Pendant ses dix premières années, le web a su séduire le grand public avec uniquement du texte et des images. Puis vint l’avènement de la vidéo avec YouTube. Puis vient la révolution des terminaux mobiles avec l’iPhone et l’iPad. Nous sommes maintenant en 2012 et plus personne ne veut lire à l’écran : trop fatigant, trop long, trop… ringard. Les articles et contenus sont maintenant mis de côté pour être lus sur un smartphone ou une tablette, ils sont synthétisés sous forme d’infographie ou sont tout simplement ignorés (on se contente de les tweeter si le titre est accrocheur ou des les épingler s’ils contiennent une photo sympa). Une réalité bien triste… Face à cette bien triste réalité, les navigateurs s’organisent en proposant un mode de lecture comme Safari ou des extensions comme Clearly ou Readability, mais je ne peux m’empêcher de penser que ce ne sont que des caches-misère.
Heureusement, certains éditeurs de site relèvent le défi en proposant une expérience de lecture à l’écran beaucoup plus agréable. Cette expérience est conditionnée par plusieurs choses :
- La mise en page (lignes pas trop larges, photos et vidéos bien intégrées, pas d’éléments parasitant l’attention) ;
- La densité d’information (avec un interlignage optimisé et des paragraphes pas trop longs) ;
- La typographie utilisée pour le texte, les titres et intertitres…
Je précise au passage que tout ceci est maintenant grandement facilité avec les navigateurs récents qui savent correctement afficher les CSS3 qui autorisent des choses tout à fait intéressantes : Vers une scénarisation des contenus textuels.
De mémoire, le premier éditeur à avoir fait volontairement un gros effort est Google avec son Think Quaterly :
Vous pourriez me dire que dans ce contexte précis les choses sont plus simples, car c’est un site dédié. Soit, mais laissez-moi alors vous parler de l’admiration que j’ai pour The Verge, un blog de gadgets qui propose les plus belles pages d’article que j’ai pu voir en 12 ans de carrière :
Le travail de composition et de mise en page sur ce site (pourtant à très gros tirage) est tout simplement splendide.
Toujours dans cette lignée, je vous engage vivement à explorer le très impressionnant Ridebook de Harley-Davidson :
Là encore, la mise en page a été particulièrement soignée pour intégrer de façon élégante les différentes photos et la vidéo. Un travail pas si compliqué si l’on utilise le bon outil (le tout étant d’exploiter un outil de gestion de contenu avec un mécanisme de gabarits de page suffisamment souple).
Sans partir dans des expérimentations techniques trop proches de ce que l’on trouve sur les tablettes (à l’image du Experimental Page Layout de Tympanus), je suis convaincu qu’il serait tout à fait possible d’appliquer les mêmes formules pour un site institutionnel ou même pour des pages produit.
Bon par contre tous les exemples cités utilisent du texte aligné à gauche, alors que je suis un grand défenseur du texte justifié. Mais ce n’est qu’une question de goût (et sûrement parce que j’ai un côté psychorigide). Et vous, quel alignement préférez-vous ?
très bon article, merci. Je défend aussi les sites lisibles et clairs, même s’il est parfois difficile de sortir des sentiers battus et de ce que le ‘public’ attend.
Concernant le texte justifié vs aligné à gauche… je prefere aussi le texte justifié, pour les mêmes raisons que toi, mais les puristes diront que le texte aligné à gauche se lit plus facilement et évite la monotonie…
Merci pour cet article ! Personnellement, j’ai aussi fait le choix d’un style assez épuré et privilégiant le confort de lecture (enfin j’espère… ^^).
Je considère même qu’il s’agit d’une question de respect pour son audience.
Pour les alignements, j’ai ma préférence pour le texte aligné à gauche qui permet une lecture plus facile sur écran à mon sens… Mais d’ailleurs, existe-t-il des études récentes à ce sujet ?
Débat sans fin j’imagine. Pour mon appli (une touche d’histoire), j’ai mis un texte justifié sur iPad car la largeur de colonne permettait d’avoir des trous pas trop gros. Par contre, sur iPhone j’ai mis un alignement à gauche. Trop peu de caractères par ligne pour avoir quelque chose de correct en justifié.
Et pour revenir au sujet de ton article. Je ne suis pas du tout d’accord avec le “plus personne ne veut lire à l’écran : trop fatigant, trop long, trop… ringard”
Les gens lisent nos articles qui prennent entre 15mn et 30mn à lire et sont très contents (beaucoup de gens les lisent sur iPhone d’ailleurs ce qui m’a étonné vu la longueur des textes). Personne ne m’a demandé de vidéos ou de la 3D.
Comme tu as l’habitude de dire “Content is King” ! Du bon contenu, une mise en page épuré et le tour est joué
très bon article,
les utilisateurs sont de plus en plus exigeants sur la qualité de la présentation de texte sur internet. fini les pages perso illisibles, avec du html et quelques lignes de CSS.
je pense quand même que le texte a encore de l’avenir pour une raison simple, il est impossible de voir une vidéo sans avoir 20 secondes de pub avant. elle est beaucoup moins intrusive sur article.
Si on ajoute le problème d’avoir un bon environnement sans bruit extérieur, pour profiter pleinement du contenue, la vidéo est plus contraignante. et je ne parle pas de l’impossibilité de voir uniquement le contenue nous intéressent dans un vidéo, il faut la regarder en intégralité sous peine de rater le plus important.
je pense surtout qu’un beau travail de césure rendrait la lecture plus agréable… même sur thinkwithgoogle
la justification donne en effet de bien mauvais résultat quand elle n’est pas
je pense surtout qu’un simple travail de découpe correcte des textes rendrait la lecture plus agréable… même sur thinkwithgoogle : le texte au kilomètre ça ne fonctionne pas bien…
on sait que la justification donne de bien mauvais résultats quand elle n’est pas assortie d’un gros travail sur les approches.
Elle n’est belle que bien gérée, et je doute que les webmasters aient le temps et la formation nécessaires.
@ Cedric Soubrie > Comprenez “plus personne ne veut lire à l’écran de son ordinateur”. Il y a un phénomène de report sur les smartphones et tablettes, d’où le succès des Intapaper, Read It Later…
Que proposez-vous ou conseillez-vous pour un auteur qui cherche des gabarits -en CMS- (or wordpress et cie) pour afficher, sur un site ou un blog, des textes courts et agréables à lire ?
Pour moi c’est un défi, j’ai rient trouvé de satisfaisant, probablement que je cherche mal.
Bonjour,
très bon article, comme d’habitude. Cependant, je pense que certaines des recettes citées pourraient être appliquées à la mise en page de ce blog : je possède un écran de taille raisonnable (1280×1024) et si mon navigateur est en plein écran, les paragraphes sont bien longs. De même, une police à empattements améliorerait la lisibilité.
Concernant la justification, je pense que pour être agréable à l’œil, elle doit s’accompagner d’une césure pour éviter une trop grande disparité dans les espacements. Heureusement, ça commence à arriver [http://blog.fontdeck.com/post/9037028497/hyphens].
@ Stef > Heu… le thème fournit par défaut avec WordPress est plutôt bien, non ?
Ton (très bon) article est aligné à gauche.
@ lecucurbitacee > Ha mince, mais tu as raison. Je cours changer ça dans le thème !
Remarquer tous ces petits détails au niveau de l’ergo, quel travail ! Merci pour cet excellent article