Retour Tech

Quatre limites très gênantes du Responsive Web Design

responsive design Très à la mode, le Responsive Web Design peut cependant ne pas convenir à certains sites. L'expert Rémi Parmentier, du site HTeuMeuLeu.fr, explique certaines limites.

Publié le 30 janvier 2013


"Il y a clairement un effet de mode. 2012 a sans doute été une année marquée par l'adoption du Responsive Web Design. Mais des questions vont aujourd'hui commencer à pouvoir sérieusement émerger autour de cette technique. En 2013, les limites et problèmes du Responsive Web Design vont commencer à mieux se faire connaître", estime l'intégrateur Rémi Parmentier, qui a déjà émis, de nombreuses fois, des doutes et critiques sur le Responsive Design sur son site HTeuMeuLeu.fr.

1- Le problème de l'affichage des publicités 

Le premier problème, rédhibitoire pour certains sites monétisés : l'affichage de la publicité, très fortement chahuté par le Responsive Design. Une publicité au-dessus de la ligne de flottaison sur un PC de bureau traditionnel, peut se retrouver, avec le Responsive Design, très en dessous sur un écran de mobile. Or, évidement, voir sa publicité disparaître de l'écran a de quoi déplaire aux annonceurs...

2- Le problème de la connexion des smartphones

Le but du Responsive Web Design est de servir le même contenu web aux smartphones, tablettes et ordinateurs. Or, bien souvent, un site passe au Responsive Design, non pas à partir d'une feuille blanche, mais depuis un site initialement pensé pour des ordinateurs "Desktop" classiques... qui ont une bien meilleure connexion Internet qu'un smartphone. "Si vous avez un site qui n'a pas été conçu pour ça, vouloir ajouter du Responsive en surcouche n'est pas forcément une bonne idée", résume l'auteur du site HTeuMeuLeu.fr.

responsive design
 
Un exemple de Responsive Web Design : le site Starbucks.com. A gauche, la résolution la plus étroite correspond à celle d'un smartphone, celle du milieu à une tablette, et la plus large à celle d'un PC classique. ©  Starbucks.com (capture)
 

Par exemple, charger dynamiquement une carte issue de Google Maps ne pose aucun problème sur un ordinateur classique, mais en posera depuis un smartphone avec une connexion Edge. D'où l'intérêt de développer dans ce cas un site mobile dédié, rapide à charger pour les smartphones, et prenant en compte en amont des connexions internet moins performantes.

"Le Responsive Design se base principalement sur l'ajout de code gérant l'optimisation pour mobiles. Or, cela va à l'inverse du but d'un site mobile qui doit être optimisé au maximum pour des petites connexions. Sur des domaines hautement concurrentiels, comme la presse en ligne ou l'e-commerce, il peut donc être préférable d'avoir un site mobile dédié", poursuit l'intégrateur. Cependant, souligne cet expert, ces problèmes de connexion n'empêchent pas d'opter pour une stratégie de Responsive Web Design "mobile first", qui va servir aux tablettes, Desktop, et smartphones un site d'abord pensé et optimisé pour les mobiles et leurs connexions.

3- Des problèmes de maintenance ?

Un seul et même site servi pour tous les terminaux, est-ce réellement plus économique que de développer deux sites, l'un pour smartphones et l'autre pour les PC ? Pas si évident. "Cela peut en effet être très coûteux de recréer un nouveau site pour mobile, même si la base de données est la même. Mais après avoir adopté le Responsive Design, il faudra ensuite tester toutes les nouvelles fonctionnalités du site, pour savoir si elles passent bien sur tous les terminaux", prévient l'expert. Il n'est en effet pas rare par exemple qu'une vidéo insérée dans une page ne soit pas accessible depuis un smartphone par exemple. Le Responsive Web Design peut donc réserver des mauvaises surprises, et les éviter peut demander du temps, tout comme les corriger.

4- Le Responsive Web Design : adapté à la résolution, mais pas à l'écran

Le Responsive Web Design et ses "Media Queries" réagissent surtout aux résolutions, mais pas à la taille d'écran. Problème : l'iPad 2 a la même résolution que l'iPad Mini, mais leur taille d'écran est assez différente (9,7 pouces, contre 7,9 pouces). Or, comme le rappelle l'intégrateur sur HTeuMeuLeu.fr : "est-ce que vous devriez présenter votre contenu de la même manière sur des écrans de 4", 7" ou 10" avec une résolution identique ?" Cela peut générer sur une même taille d'écran des affichages très différents, et pas toujours optimisés, Rémi Parmentier en montre un exemple très visuel sur son site.

Des pistes d'amélioration à creuser ?

Des solutions ont pu être esquissées pour répondre à ces problèmes et limites :

 Détecter la vitesse de connexion des terminaux peut sembler alléchant, mais les données remontées ont aussi leurs limites. "Les navigateurs vont pouvoir mesurer le débit des fichiers en cours et rendre la valeur accessible via la propriété JavaScript navigator.connection.band. Mais il ne s'agira que d'une moyenne sur une très courte période à un instant t", explique l'expert, qui ajoute que cela peut poser problème, notamment dans le cas, très fréquent, d'une connexion qui passe brutalement de 3G en Edge en plein téléchargement d'une page...

 Plutôt que de voir certaines images se réduire jusqu'à devenir illisibles à cause d'un design "Responsive", pourquoi ne pas préciser un seuil à partir duquel une autre image, cadrée plus serrée, s'afficherait ? Un groupe de travail du W3C, le Responsive Images Community Group, a été chargé de définir une spécification en ce sens. Elle serait d'ailleurs déjà testée, sous forme de prototype, au sein de WebKit, laissant penser que des navigateurs comme Chrome ou Safari pourraient assez rapidement l'intégrer, pourquoi pas même dès cette année.