Google célèbre l’histoire, la musique et le système solaire en HTML5

J’ai déjà eu l’occasion de vous parler des incroyables réalisations publiées sur Chrome Experiments. Lancé au début de l’année 2009, ce site avait pour ambition de démontrer les capacités des technologies standards du web (HTML5, javascript, WebGL…) pour mettre en valeur la performance de son navigateur. Force est de constater qu’ils ont réussi leur pari, car Chrome est le navigateur qui progresse le plus vite. Il est même dominant sur certains sites comme ce blog, mais le projet ne s’arrête pas pour autant, car ils ont franchi la barre des 500 expériences : 500 Chrome Experiments and counting.

Pour fêter ce cap symbolique, les équipes de Google ont lancé trois projets particulièrement impressionnants. Le premier est le Google Cultural Institute, une initiative menée conjointement avec de nombreuses institutions locales, dont l’objectif est de donner accès à des contenus culturels et historiques divers (textes vidéos, photos…).

Le projet d’institut culturelle de Google

Le site se présente donc sous la forme d’une timeline retraçant les grands événements de l’histoire contemporaine avec une interface de visualisation sous forme de grille que l’on parcourt avec les flèches du clavier. Le tout est bien évidemment réalisé en HTML5, et il y a également une très belle interface de recherche dont ils devraient s’inspirer pour leur moteur (et toc !) :

L’interface de recherche de l’institut culturelle de Google

Autre projet spectaculaire : 100.000 Stars, une interface de visualisation du système solaire en 3D qui repose sur WebGL et CSS pour pouvoir afficher… 100.000 étoiles à l’écran :

L’interface de visualisation des étoiles du système solaire

Je regrette que la capture d’écran ne retranscrive pas du tout l’incroyable impression de vide (ou de gigantisme) que l’on ressent à zoomer dans notre galaxie à la recherche du système solaire. Cette réalisation est signée par la Google Data Art Team, déjà à l’origine de projets dont nous avons déjà parlé ici (The Wilderness Downtown, 3 Dreams of Black ou The Exquisite Forest). En plus ils ont eu la bonne idée de mettre une visite guidée pour éviter que les internautes ne se perdent.

Et pour finir, il y a également Jam with Chrome, qui permet de jouer sur 19 instruments à 4 personnes en simultanée :

L’interface de Jam with Chrome

Une authentique prouesse technique, car il y a de nombreux types d’instruments (guitares, basses, claviers, batteries, boîtes à rythmes…) et que tout se joue à la souris et au clavier. Signalons qu’il existe d’autres expériences tout à fait incroyables visuellement comme Walk in a Fog ou Car Visualizer, je vous invite d’ailleurs à parcourir les différentes catégories.

Nous sommes tous d’accord pour dire qu’au-delà de la performance artistique / technique, ces expériences ne servent pas à grand-chose. Ceci étant dit, elles ont tout de même le mérite de nous prouver qu’il est tout à fait possible de faire des choses incroyablement sophistiquées dans la fenêtre d’un navigateur avec des technologies accessibles à tous : HTML, CSS, javascript, WebGL… Largement de quoi inspirer les développeurs d’applications d’entreprise ou d’outils de dataviz, et surtout de leur démontrer que Chrome a acquis une longueur d’avance sur ses concurrents.

2013 sera l’année du tablet first

Avec l’avènement des connexions haut débit, nous pensions que le web allait supplanter la télévision en terme de contenus vidéos. Plus pratique, plus performant, mieux ciblé… les portails proposant des contenus vidéo ont commencé à fleurir et à petit à petit transformer nos moniteurs en écrans vidéo, à l’image du portail CNN. De même, les dernières techniques d’affichage permettaient aux designeurs de concrétiser leurs rêves les plus fous avec des mises ne page particulièrement audacieuses comme celle de WonderWall (MSN expérimente des nouveaux formats pour ses magazines en ligne).

Mais entre temps, l’iPhone est arrivé… puis l’iPad… et tous leurs concurrents. À partir de ce moment, il n’a plus été question de contenus vidéos (trop lourds pour le réseau de téléphonie), mais de contenus textuels monétisés (L’avenir des magazines numériques est-il à l’HTML5 ?). La multiplication des formats nous a alors replongé dans une période sombre que nous pensions révolue (4 feuilles de styles pour 4 expériences de lecture). Les tablettes sont maintenant définitivement rentrées dans le quotidien des internautes, et leur adoption ne va qu’accélérer avec la mise sur le marché de tablettes low-cost à moins de 200 €.

Nous sommes maintenant dans une configuration de marché où la dichotomie web / mobile n’est plus vraiment d’actualité, car le spectre des formats ne cesse de s’élargir : de 3,5″ à 5″ pur les smartphones, de 7″ à 11″ pour les tablettes, de 11″ à 15″ pour les ordinateurs portables (sans oublier les écrans en retina display d’Apple), de 17″ à 27″ pour les ordinateurs de bureau, à partir de 29″ pour les TV connectées…

Les différents formats de terminaux web

Pour accélérer le travail d’intégration et pour baisser les coûts, mais surtout parce que les formats publicitaires traditionnels ne fonctionnent plus réellement, certains sites comme Amazon et Ebay ont commencé à adopter des mises en page hybrides pour faciliter l’affichage sur les tablettes. Une approche audacieuse qui en a visiblement inspiré d’autres.

Un certain nombre de sites proposent maintenant non pas une mise en page hybride, mais une mise en page directement adaptée aux tablettes. La tendance semble donc s’être inversée avec une nouvelle vague de sites HTML5 tablet first (par analogie avec mobile first), à commencer par le journal USA Today avec sa navigation latérale et sa structure tout en hauteur :

La nouvelle mise en page du journal USA Today

Plus intéressant, les blogs ReadWrite et TheNextWeb qui proposent des barres de navigation minimalistes et une liste des articles sur la gauche de l’écran :

La nouvelle mise en page du blog The Next Web

Vous noterez que cette mise en page n’est pas sans rappeler les dynamic views de Blogger et notamment le mode Sidebar de Blogger. Un choix de conception radical qui privilégie avant tout le confort de lecture sur tablettes (nous ne nous en plaindrons pas) en laissant la part belle aux contenus, comme sur le magazine Quartz.

La mise en page optimisée pour les tablettes du magazine Quartz

Au final, est-ce qu’on y gagne ? Oui, indéniablement. Car si la lecture à l’écran est grandement améliorée grâce à une bien meilleure exploitation de la surface d’affichage (plus de distraction et de multi-colonage), la consultation sur grand écran est indiscutablement plus agréable, et l’adaptation sur smartphone en responsive design est forcément plus rapide. Il est amusant de constater que si les cinq années de croissance folle des smartphones ont laissé les concepteurs froids (l’approche mobile first est encore un débat très sensible), il n’aura fallu que deux ans aux tablettes pour s’imposer d’elles-mêmes comme le format de référence pour les mises en page : 2013 sera l’année du tablet first.

Toujours pas convaincu ? Allez donc faire un tour chez Nike pour changer d’avis.