Archives par mot-clé : html5

Quartz 3.0

On m’a encore récemment demandé quelle était mon app iPhone favorite pour lire l’actualité. Et d’admettre que la plupart des apps y sont installées essentiellement pour les notifications, seul flux accessible en Chine: par exemple, les contenus des applications iOS le Monde New York Times sont bloquées en Chine.

J’ai récemment pris le coup de coeur des pure players qui spécialisent leur thématiques de manière claire (Slate, Eon Magazine, ou encore Good). Parmi mes préférés: Quartz ou qz.com. Le site prend le parti, et ce depuis ses débuts, de mettre en avant la plateforme mobile, et ce.. sans utiliser la moindre app, et opte pour une version responsive particulièrement travaillée.

Quartz opère sa deuxième refonte. Quartz explique que la refonte inclus l’ajout d’une homepage éditorialisée, et ce malgré que le site n’a jamais cru aux longues listes de contenus. Besoin d’audience supplémentaire? Possible. Le site souhaite convaincre ses lecteurs et les marques que la qualité et la rareté des contenus intrusifs iront de pair. Les annonceurs ne sont pas mis au placard, mais vont disposer d’espaces plus immersifs.

Une épure visuelle qui ferait plaisir à voir chez nos chers medias français.

Sous le header minimal et l’immense photo de une, quelques gros plans sur la section de la homepage intitulée « The Brief », qui prend le parti de presenter une nouvelle en 2 ou 3 phrases courtes, accompagnées de liens. L’équivalent de 3 a 4 tweets rassemblées.

The Brief. Notez que c'est la seule zone du site qui comporte la présence d'un annonceur.
The Brief. Notez que c’est la seule zone du site qui comporte la présence d’un annonceur.

Dans les articles, une navigation facile d’accès et réactive. Je vous ai capturé un exemple de parcours utilisateur dans la vidéo ci-dessous:

La version desktop du site est réussie meme si on ressent facilement que la refonte du site cible avant tout les mobiles.

Avec une seule colonne, le site démontre qu'aucun compromis a été pris pour mettre des batons dans les roues des utilisateurs. Seule obligation: scroller ou utiliser la navigation des menus.
Avec une seule colonne, le site démontre qu’aucun compromis a été pris pour mettre des batons dans les roues des utilisateurs. Seule obligation: scroller ou utiliser la navigation des menus.

Force est de constater que les choix de la simplification de la mise en page des sites d’information vont de l’avant. Avec de tels parti pris, je ne peux souhaiter que bonne continuation à Quartz!

Los Angeles Times 2014 redesign

Une refonte efficace et complète pour le Los Angeles Times, LA Times pour les intimes. Elle a été réalisée par les talentueux designers de Code and Theory, qui n’en sont pas a leur premier coup d’essai.

Homepage du LA Times (2014).
Homepage du LA Times (2014).

Vous qui recherchez la colonne publicitaire, l’espace sponsorisé, vous risquez d’être décus. Tout ces espaces ont littéralement fondu dans le décor, et fait place devant l’intelligence d’une mise en page résolument simplifiée. Car au delà des nécessités de l’utilisateur moderne (responsive design), ainsi que celles qui rendent le site simplement élégant (une typographie particulièrement travaillée), le site a fait un gros efforts de nettoyage et de suppression de tout le superflu en terme de gestion, mais aussi d’affichage et de transition du contenu: le concept de page et sa problématique rupture (lors du chargement, mais pas seulement) disparaissent.

Le pitch est simple: Si le LA Times produit du contenu, l’utilisateur se l’approprie, et le parcoure comme s’il s’agissait du sien. Comme bon le lui semble.

Les videos, signées LA Times, qui fait sa promo:


La navigation par rubrique, qui s’affiche en toute circonstance, sans s’imposer. L’architecture d’information, par rubriques, est le reflet d’une organisation interne conçue pour produire du contenu. Chaque rédaction produit du contenu pour ‘sa’ rubrique. Le problème, c’est que pendant longtemps, les sites de presse ont trop misé sur ces onglets pour afficher d’autres type d’informations, plus commerciales. Plus que jamais, le lecteur a besoin de ce repère, mais le passage d’une rubrique à l’autre ne doit plus rompre l’experience de lecture.


Le chargement des photos en grand format, pour naviguer en mode visuel, pour les détesteurs de chapeaux d’articles.


Pour les twittos, des fonctions de partage qui vous mache le travail, tout en vous laissant le controle. Cela parait si simple… pourtant si éloigné de la plupart des comportements de boutons de partage.


Les galeries ont toujours été l’obsession des marketeux. Source de pages vues? Marketing enrichi? que nenni! Ici les images défilent intuitivement, comme si l’on parcourait ses propres photos sur sa tablette.


La bonne vieille liste d’articles en relation (comme vous en trouverez en bas de ce post) commence a sentir le moisi. Si un article vous plait, un clic sur l’onglet ‘related’ et, surprise…

Le modèle économique? un modèle qui se tourne vers le payant, avec une offre a environ 50 dollars US par an.

Bim.

TBWA\Paris

Un site lancé tout discrètement en début de semaine, le site parisien de l’agence TBWA, l’agence au ‘\’ (Le backslash, symbole du MS-DOS, au passage). L’aspect général n’a rien de disruptif (mot pourtant associé à cette agence), mais celui-ci reste à la page, fonctionne correctement, et respecte les standards du moment (le nécessaire responsive design). Continuer la lecture de TBWA\Paris

Redesign du site TIME

Un redesign réussi pour TIME, qui se tourne vers une interface responsive dépouillée et résolument mobile. La gestion des contenus de la Homepage est simple et sans multi-colonnage. Il fallait faire rester les 60 millions de visiteurs habitués à la précédente version. L’objectif est de poursuivre sur la lancée opérée en 2013, avec plus du double de lecteurs depuis un an et une audience mondiale qui nécessite des éditions sur plusieurs continents. Continuer la lecture de Redesign du site TIME

The Most Northern Place

Pour démarrer la semaine, je vous invite à prendre dix minutes et parcourir la superbe expérience du webdoc « The Most Northern Place ». Il a été réalisé dans le cadre d’une opération transmedia, avec la diffusion d’un documentaire TV, par l’agence Unit9.

Il décrit la nouvelle vie des autochtones de Thulé, contrainte au déménagement pendant l’installation d’une base américaine au Groënland, en pleine guerre froide.

Sur le site, il est possible de parcourir quelques écrans pour explorer les paysages désolés et vides. Continuer la lecture de The Most Northern Place

Frederik Delmotte portfolio

Un regard sur le portfolio de Frederik Delmotte, Interactive Designer chez AREA 17 à New York.

A noter le projet artistique de Riusuke Fukahori, dans un site fullscreen intitulé Goldfish salvation.

Quelques images et animations du site, et, en particulier, du système de navigation original du site qui utilise un rectangle a position fixe. Le site étant conçu en mode responsive, le rendu est particulièrement efficace sur les mobiles et tablettes. Continuer la lecture de Frederik Delmotte portfolio

Berger & Föhr

Berger & Föhr est un studio de design dans une petite ville du Colorado, Boulder. Leur pratique du design est caractérisée par le minimalisme et le modernisme. Ils sont remarqué depuis la dernière mise à jour de leur site.

Pour un des amis de l’équipe, Christopher du site Changethethought, ils ont « littéralement transformé » leur approche du design et leur positionnement est encore bien unique dans le paysage de la communication au Colorado.

 

 

Une de leur création les plus interessante est cette application iPhone sans bouton de fonctions, qui utilise uniquement les gestures pour gérer les operateurs, l’affichage du resultat, et l’affichage à zéro. 5 minutes suffisent pour s’y habituer.

Bullit Agency

L’agence Bullit est bien connue des fans de musique électronique. Leur dernière upgrade de site propose une experience de navigation interessante basée sur les touches du clavier (les flèches), en HTML5. On constate également le retour des mini-intros de site avec une vidéo. Les images dans la suite montrent également l’ambiance quasi noir et blanc du site.


La première interaction, permet de naviguer directement dans les contenus avec les flèches.


Les différents artistes sont disposés en grille.


Il est possible d’acceder à la fiche d’un artiste et de savoir où il joue.


L’interface permet d’entrer directement en contact avec les agents des artistes pour booker une nuit.


Le blog est moins ambitieux en terme de navigation mais reste cohérent visuellement avec le reste du site.


Interessante application de la cartographie Google maps, une des plus élégantes que j’ai pu voir !

Le site a été conçu par le developpeur Sylvain Tran, et le directeur artistique Dilshan Arukatti (dont je vous invite à voir le surprenant portfolio).

Every Time Zone

Si, comme moi, vous avez souvent besoin gérer des conférences-call sur différents fuseaux horaires, il ya la solution du lobby de l’hôtel, très low-tech est très esthétique, qui consiste à afficher plusieurs pendules au dessus de votre bureau. Comme nous n’avons pas tous les moyens de se payer de splendides pendules vintages, le web vient à la rescousse.

Découvert il ya une semaine via @SwissMiss, le site Every Time Zone fait apparaitre les heures de lieux différents. Deux particularités :

  1. Rien ne vous empeche de modifier l’heure d’un lieu, pour que le reste des pendules se mettent à jour, et ainsi trouver le meilleure horaire. Très pratique pour les réunions NYC/Paris/Shanghai.
  2. Aucun problème pour l’utiliser en mode Offline ou sur un iPad. C’est, comme bien souvent sur ce site, un site utilisant HTML5, qui ne fonctionnera peut etre pas parfaitement bien sur IE.

Convaincu ? Essayez le site.

Hakim El Hattab

Il le fait pour le fun, et il le fait sans objectif de dénigrer Flash. Et pourtant, l’effet premier de ces animations est de mesurer toute la potentialité de ce qui devient progressivement le standard web. Hakim El Hattab, developpeur interactif chez l’agence f-i.com réalise ce que Josh Davis commencait à réaliser avec Flash il ya déjà dix ans de cela.

Les expérimentations d’Hakim portent sur le mouvement de la souris (Sinuous, Particles), l’affichage de flux de données (Wave) ou des effets de magnétisme.

Avec ces annonces de web en phase de déclin, on pourrait croire que l’HTML5 n’arrive juste pas un peu trop tard. Faux, il est déjà adopté par les autres devices comme iPhone iPad et j’en passe.

Voir toutes les expérimentations sur le site d’Hakim El Hattab (la page d’accueil n’est pas mal non plus).

Cartagen

Nous étions déjà très enthousiastes au sujet de l’HTML 5, avec les récentes expérimentations réalisées en HTML 5, que moult projets d’applications étaient en cours d’achèvement. J’ai choisi de vous présenter Cartagen, car il me parait ambitieux.

Cartagen fait partie de ces applications qui se chargent sans avoir besoin d’un quelconque plugin. Ce framework permet d’afficher des cartes vectorielles en HTML 5. Écrit en Javascript, il utilise la fonction Canvas qui permet de charger des données de cartes depuis de nombreuses sources. L’affichage utilise une feuille de style géographique, (GSS), qui contient, en plus des informations de style, des spécifications de géolocalisation. Rien de vous empêche donc de modifier les données, ou le style, et d’afficher un rendu immédiatement.

Exemple ici avec une carte de Paris et de Rome, avec les données de OpenStreetMap

paris

roma

Un exemple plus ludique, celui d’afficher une carte de Londres avec une feuille de style inspirée des maps de Mulgore dans World of Warcraft !

wow-london

Un autre exemple concret de l’usage de Cartagen est celui d’afficher un fil d’actualité sur une carte, en temps réel.

cartagen-newsflow-live

cartagen-newsflow-live-nyt

Le site officiel donne toutes les informations nécessaires pour installer et utiliser le framework immédiatement. Le blog Unterbahn donne plus d’informations sur Jeffrey Warren, l’auteur de l’application Cartagen.