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…
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 :
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 :
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.
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.
Ne se rapprocherait-on pas d’un modèle de type application HTML5 dédié à la tablette plutôt ?
Je salue les efforts que les éditeurs ont fait pour augmenter l’expérience utilisateur des sites pour tablettes et mobiles.
Je suis d’accord sur le fait qu’il faut adapté l’expérience utilisateur à son audience. Mais il ne faut pas oublier les internautes qui surfent aussi sur grand écrans. Et dans l’exemple de Quartz, ce n’est guère convainquant.
@ Stéphane > Heu… c’est allez un peu trop loin à mon goût que de qualifier un site web d’application. Je ferais preuve de plus de modération en disant que c’est plus une mise en page adaptée aux contraintes d’usages des tablettes. Certes, le site Quartz est un peu déstabilisant sur grand écran, mais TNW est bien plus agréable comme ça que la version précédente très polluée. Ceci étant dit, j’imagine qu’il parte du principe qu’à terme (6 mois à 1 an), la majorité de la consommation des contenus se fera par d’autres moyens que la lecture sur grand écran.
Pour Quartz : il est a noté que dans sa version large faire “monter” la roulette de sa souris rafraichit la page => comportement du “release to refresh”. Comportement que l’on retrouve sur le même site avec une fenêtre plus réduite, il suffit alors de tirer la page vers le bas.
En passant, Mashable s’y met également : http://beta.mashable.com/
On peut remarquer que les marques deviennent très réactives. Il aura fallu 10 ans d’expérience internet pour les sensibiliser à “l’expérience utilisateur”.
Leur nouveau credo ” Ne surtout pas rater le marché du mobile” et se positionner dans les 1er. Cela donne des sites simples, agréables à lire et esthétiques.
En tant que “Webdesigner” je ne peux que saluer ce changement .
Je préfère appeler cette approche App Thinking Design car c’est un poil moins réducteur que Tablet First.
App thinking design : démarche de conception dans laquelle les usages sont pensés « sur un mobile » et les interfaces conçues « comme une App », même pour la partie web.
Au final ça revient à appliquer peu ou prou les principes suivants :
– Mobile First pour conduire les réflexions sur les usages
– Design for thumb pour conduire les réflexions sur les interfaces et les principes de navigation «comme une App»
– Adaptive web design pour l’articulation de l’ensemble
Quand on voit l’inexorable ascension des tablette dans la consommation de contenu (mais pas que), il est logique de procéder de la sorte car cela permet d’apporter une expérience d’usage confortable sur l’ensemble des terminaux utilisés (incluant les PC).