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 :
dispositifs

  • 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 :

Domaine Responsive Alternatives (à l’ouverture) Remarques
lexpress.fr non oui, redirection redirection vers 404. Fail total
nouvelobs.com non non
20minutes.fr non oui, redirection version mobile dédiée bâclée, fichiers image manquants, navigation impossible.
leparisien.fr non oui, téléchargement app. dédiée Aucune version adaptée si on ne télécharge pas l’appli
lepoint.fr non oui, téléchargement app. dédiée Aucune version adaptée si on ne télécharge pas l’appli
europe1.fr non non
humanite.fr non oui, redirection Bonne version optimisée
liberation.fr non oui, redirection Bonne version optimisée
lefigaro.fr non non
lemonde.fr non non
metrofrance.com non oui, redirection redirection vers page vide. Fail total
sport.fr non oui, redirection Version optimisée austère mais fonctionnelle.
lequipe.fr non non Fut un temps une version optimisée était proposée, plus maintenant. Pourquoi ce retour en arrière ?

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.

Grazia.fr

 

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 :

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.

Vous pouvez avoir un lien en DoFollow si :
  • Vous ne faites pas de lien optimisé (brand ok).
  • Votre contribution apporte de l'eau au moulin et ne se contente pas de remercier (même si c'est toujours appréciable).
  • Vous ne donnez pas l'impression de ne pas avoir lu l'article.
  • Votre site doit graviter dans l'univers du SEO / web marketing / IT.
  • Nouveau : Se suivre mutuellement sur Twitter (oui ça fait copinage, et j'assume !).
Le but n'étant pas d'être plus sévère, mais au contraire plus équitable et... naturel. N'oubliez-pas : moins de spamco = meilleur jus !

8 thoughts on “Fail : les sites de presse et le responsive web design

  • La plupart de ces sites ont apparemment décidé de se concentrer sur les app mobiles plutôt que sur des versions responsives de leurs sites. C’est un choix discutable, mais sans doute guidé par le peu d’adaptabilité actuel des bannières publicitaires. Cela contrairement aux annonces pour app mobiles que l’on peut voir un peu partout grâce à iAds par exemple.

  • C’est vrai que la situation est quand même aberrante, mais bon peut-être que ces sites finiront par ouvrir les yeux et se rendre compte qu’ils sont totalement à la rue, d’autant plus que la progression d’internet sur mobiles ne va cesser de croitre encore et encore. Parfois il y a des choses que je ne comprends vraiment pas!

  • Bon j’avoue que personnellement je n’ai pas encore fait cet effort là pour mes sites existants, mais j’ai quelques sites en préparation et cette fois-ci je planche dessus afin que tous soient responsive. Mieux vaut tard que jamais ;-)

  • Il est vraiment pas mal quand même le thème de Grazia !
    Soigné et le Responsive est très réussi.

    Finalement, la presse française va recevoir un gros chèque de Google pour s’améliorer non ?

  • Le concept de RWD est apporté avec la multiplication des terminaux de consultation de sites web. Il convient d’avoir à l’esprit deux approches différentes du Design de site web adaptatif.

  • Le responsive web design va lentement mais surement prendre sa place, mais comme toujours le presse ou les grands médias ont toujours un train de retard, mais au fur et a mesure les choses changes, le problème c’est que pour les petits sites et budget ce n’est pas toujours simple comme transition.

Les commentaires sont fermés.