Fail : les sites de presse et le responsive web design

Ce n’est pas un scoop, le web mobile gagne de plus en plus de terrain, et dépassera bientôt le surf généré par les ordinateurs de bureau. Smartphones, tablettes, TV connectées, netbooks, formats portrait ou paysage, interfaces tactiles ou à la souris, impossible pour les éditeurs de sites de décliner leurs plateformes pour chaque variante.

De là est né le concept du « responsive web design », ou web design adaptatif si vous préférez. On ne désigne pas ici une technologie particulière, mais un ensemble de techniques (HTML5, CSS3 media queries, JS) visant à adapter et optimiser automatiquement les pages web aux différents dispositifs, sans changer de socle technique. Autrement dit, même URL pour tous les terminaux, et interface adaptée en fonction de la taille des écrans.
Si le travail est fait dans les règles de l’art :

• Pas besoin de zoomer pour lire
• Part belle faite au contenu
• Images redimensionnées
• Eléments et scripts superflus supprimés
• Navigation simplifiée
• Ergonomie adaptée au support (tactile)

Voilà pour la définition du responsive web design.

Pisseurs de code, intégrateurs, webdesigners et ergonomes doivent donc assurer un certain confort à leurs visiteurs, quelque soit leur plateforme. Le rapport avec le SEO ? L’URL unique évidement, mais également tous les changements de comportement des mobinautes induits par cette nouvelle approche de la conception des sites web. Le SEO a un devoir de conseil pour fidéliser les visiteurs, diminuer le taux de rebond etc, il aurait tort de bouder cette tendance.

Un peu de technique :
On détermine en premier lieu des pivots de transition, appelés break points. Ils correspondent à des tailles d’écrans qui une fois atteintes (et détectées) chargeront une feuille de style spécifique (CSS Media Query) pour adapter automatiquement l’interface.
On observe généralement 2 pivots (donc 3 formats) dans les sites responsive : le format standard, le format tablette/hybride et le format smartphone.
Rares sont ceux qui proposent plus de 3 formats. smashingmagazine.com (US), par exemple, réussit la prouesse d’en proposer 5 !

Pour tester si un site possède un design responsive, et voir comment il réagit, inutile de dégainer votre smartphone ou votre tablette. Redimensionnez horizontalement la fenêtre de votre navigateur, et si le site est « responsive » sa présentation doit s’adapter automatiquement à votre fenêtre une fois certaines dimensions clés atteintes (break points).

Mais le but de mon billet n’est pas de vous présenter le responsive web design, d’autres l’ont fait mieux que moi. C’est plutôt un coup de gueule envers les gros sites de presse (vous savez ceux qui par le biais de leur lobby osent quémander des brouzoufs à Google…). Bref, j’y viens…

J’ai un smartphone sous Android qui, soit dit en passant, est aux dernières nouvelles l’OS le plus répandu sur les smartphones avec 75% de parts de marché. Il est donc représentatif. Mais surfer avec est un calvaire.
Inutile de jeter la pierre à l’OS, il n’y est pour rien. C’est la gestion et l’adaptation la non-adaptation qu’en font les éditeurs de sites. On voit de tout et surtout du n’importe quoi. Les sites d’actualité non indépendants, ceux qui squattent Google news donc, en sont la parfaite démonstration. Je me suis toujours dis un peu naïvement que ces grosses cylindrées du web sauraient négocier le virage et faire les bons choix au bon moment… hélas.

Rappelez-vous, les smartphones ont vraiment pris leur envol avec la technologie EDGE puis 3G en 2007/2008, galvanisés par l’énorme succès commercial de l’iPhone d’Apple. Au-delà de l’effet de mode, une véritable révolution des supports s’est mise en marche.
Cela fait donc 5 ans que le web mobile gagne des parts de marché. 5 ans que tout le monde sait qu’il faut faire de l’adaptatif. 5 ans à l’échelle du secteur IT, c’est énorme, et ça laisse largement le temps d’optimiser, surtout quand on a les moyens. Mais manifestement les sites de presse n’en n’ont rien à faire, ou le font mal. Des sites comme lepoint.fr, lequipe.fr, 20minutes.fr ou encore metrofrance.com, en sont les parfaites illustrations.

J’ai donc fait un petit test avec les gros bonnets de la presse. Je n’ai pas pris en exemple des « petits » sites qui n’ont pas forcément les moyens et l’utilité de faire du « responsive ». Pour faire un bon échantillon, rien de plus simple, direction Google news (qui lui est responsive). Et voici le résultat :

Les résultats sont affligeants ! Même pas une exception pour faire un exemple, rien, nada. Et le tableau ci-dessus ne dit pas tout : je passe sur les sites renvoyant sur des versions optimisées mais qui balancent des bannières en over-layer impossible à fermer, les pages qui se rechargent toutes les 30sec, lourdes à charger, qui cassent l’historique de navigation avec leurs redirections…
La palme revient sans doute à ces sites qui proposent sans cesse à l’ouverture de télécharger leur app. Ca me défrise ! Si encore on avait le choix entre app à télécharger, ou version web optimisée avec un cookie pour mémoriser le choix, là d’accord, mais ça n’arrive jamais pour la bonne et simple raison qu’ils ne maintiendront jamais 2 versions pour mobiles. Et le responsive alors ? Si seulement ils proposaient une version standard « praticable » sur smartphone… mais c’est rarement le cas.

Pourtant les sites responsive, soucieux de leurs mobinautes existent. Grazia.fr par exemple, s’y est mis.

Le concept ne manque pourtant pas d’avantages

Laissons un peu la presse de côté, j’y reviendrai plus tard. Penchons-nous sur les avantages du responsive webdesign.
Les éditeurs de sites pour commencer : le responsive permet de capter le trafic mobile beaucoup plus efficacement. Ils n’ont plus à assurer la maintenance de plusieurs déclinaisons de leur architecture en fonction des divers terminaux.

Autre avantage, la possibilité de diffuser des formats publicitaires adaptés à la résolution de l’écran : dans une version non/mal optimisée, les bannières ne sont plus visibles après le zoom, ou pire, recouvrent le contenu et incitent à fuir le site.
Conjointement avec le HTML5, il est également possible de délivrer à l’utilisateur des informations locales (proximité de certains services et commerces) avec l’aide de la géolocalisation. Bref, contenant et contenu s’adaptent au format, mais également au lieu.

Côté SEO, le gros avantage réside dans l’URL unique. Même si en théorie une version mobile déportée ne pénalise pas le référencement, on mettra toutes les chances de son côté en ne proposant qu’une seule URL pour tous les supports. D’ailleurs, Google préconise cette solution dans ses recommandations pour l’élaboration de sites optimisés pour les smartphones :

Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

Alors pourquoi ce retard ? Quels sont les facteurs bloquants ?

On peut comprendre que certains sites orientés service ou applications en ligne (ASP), ne peuvent pas faire de responsive. Le choix d’une application dédiée, ou une version optimisée reposant sur un bloc technique différent est justifié, faute de mieux. Un site de contenu (presse) en revanche j’ai plus de mal à comprendre.

Certes les langages et techniques qui permettent de faire du responsive (HTML5, CSS3, JS) sont encore jeunes voire expérimentaux, mais l’excuse « on a encore du trafic avec IE6 ou 7  » ne tient pas la route au regard de la progression du web mobile. C’est pour ces navigateurs obsolètes qu’il faut imposer une version dégradée !

Pour un gros site, le passage au responsive implique de repenser intégralement l’interface et l’ergonomie. C’est en amont du projet qu’il faut intégrer cette notion, et non en surcouche une fois l’architecture figée. Tous les intervenants qui composent la partie développement (développeurs, intégrateurs, graphistes…), doivent s’adapter et être en phase sur cette nouvelle conception : mettre en place une structure automatiquement modulable, tout en un, ouverte à n’importe quel terminal. Difficile pour eux de tout remettre à plat, alors que certains inaugurent à peine leur déclinaisons « optimisée iPhone » en m.domaine.fr.

C’est le camembert qui dit au roquefort « tu pues ! »

Ca ne vous a sans doute pas échappé, Htitipi.com n’est pas (encore) en responsive [Edit 26/02/2013 : C’est fait !], et vous trouverez peut-être ce billet un peu gonflé de ma part. Certes. Je ne vais guère me dédouaner en vous disant que c’est en chantier, mais mon site n’a rien de comparable avec ceux de l’express ou 20minutes. Deux poids, deux mesures.

Néanmoins, en bossant dessus, je me rends également compte du côté expérimentale du concept. La fragmentation des divers écrans n’aide pas. Cela implique inévitablement de repenser et réécrire entièrement son interface, tout en bricolant des exceptions pour les navigateurs qui ne comprennent pas les CSS3 Media Queries.
Il faut également détecter le viewport des écrans mobiles dont la résolution est totalement disproportionnée par rapport à la taille réelle des écrans. Le dernier Galaxy SIII propose une résolution indécente de 1280 x 720 pixels, autant qu’un moniteur de bureau quasiment ! Mais si vous affichez votre texte en fonction de la résolution, vous devrez obligatoirement zoomer.
De même, il est très simple de faire du responsive sur un ordinateur de bureau en jouant avec la taille de la fenêtre du navigateur, mais l’interface des smartphones n’est pas basée sur des fenêtres. Donc ce qui fonctionne d’un côté, ne fonctionne pas forcément de l’autre.

Je suis conscient des contraintes que cela représente. Néanmoins, responsive mis à part, les gros sites français (surtout comparés aux sites anglo-saxons) ont complètement raté leur virage sur les supports mobiles, quelques soient les techniques utilisée.

En tout cas, c’est certains, le responsive est LA solution pour les années à venir.

Pour approfondir le sujet

Voici quelques ressources utiles pour en apprendre d’avantage sur le sujet, ou vous aider :

• « Responsive Web Design par Ethan Marcotte », celui qui est à l’origine du concept
• Un article pour vous expliquer le fonctionnement des CSS3 Media Queries
• Galerie de sites « responsive » sur mediaqueri.es (US)
• Le très bon article d’Usabilis qui m’a bien aidé à préparer le mien
• Sans oublier les articles sur l’indispensable balise « viewport » comme celui de Vincent De Oliveira et celui de Jeremy

Si vous avez des exemples de sites de référence français, ou encore des ressources utiles sur le sujet, n’hésitez pas à me les communiquer en commentaire, je les intégrerai si besoin.