le lundi 09 septembre 2013

Post PC : est-il temps d'adopter le Responsive Web Design ?

Des pages souvent trop lourdes

Le chercheur Guy Podjarny, spécialisé dans la mesure de performances et responsable de l'architecture chez Akamai, a effectué une batterie de tests afin d'analyser le poids d'une même page sur différente définitions d'écran. Il en conclut que dans près de 75% des cas, celui-ci reste inchangé. Cela signifie donc que pour la majorité de ces sites le mobinaute charge les mêmes éléments que sur un ordinateur. Les images, par exemple, bien que redimensionnées en fonction de la largeur du smartphone ou de la tablette conservent un poids identique. Certains éléments sont en outre masqués via une propriété conditionnelle dans la feuille style mais tout de même chargés par le navigateur du smartphone.

RWD - poids des pages

Crédits : SixRevisions


Selon une étude précédemment menée par Equation Research pour Gomez, 52% des utilisateurs ayant rencontré des difficultés sur un site mobile n'y reviennent plus et 40% d'entre eux se tourneraient davantage vers un site concurrent. Toutefois M. Adam rappelle que certains navigateurs mobiles testent aujourd'hui des optimisations afin d'accélérer l'affichage et qu'il existe plusieurs techniques visant à améliorer la bande passante sans pour autant appliquer des filtres sur un serveur. Il ajoute que « l'emploi de CDN (distribution de contenu statif rapide) permet également d'accélérer le chargement ».

Le poids d'une page peut également affecter la position d'un site au sein des résultats de Google. M. Poltorak explique en effet que le moteur de recherche prend de plus en plus en compte certains indicateurs de qualité et notamment : le taux de rebond, le nombre de pages vues par visite, le temps passé sur le site et le taux de retour/fidélité. Il ajoute ainsi : « un temps de chargement rapide des pages est une condition sine qua non pour améliorer les indicateurs de qualité », en précisant que l'indexation par les moteurs de Google sera plus rapide sur un site léger.

Interrogé par nos soins, Raphaël Goetter, spécialiste du développement Web et fondateur de l'agence Alsacréations, souligne que les notions de performances et d'optimisations concernent le domaine plus général du "Web Design Adaptatif", dont les caractéristiques peuvent être combinées avec le Responsive Web Design. M. Goetter ajoute qu'il est possible de « limiter les requêtes (sprites CSS, Data-URI, font-icon), compresser les images, concaténer et minifier scripts et CSS, charger conditionnellement les ressources lourdes, compresser côté serveur, gérer les durées de cache, etc. ».

Un contenu parfois inadapté

Si le Web adaptatif facilite la création directe d'une page pour tous les terminaux, toutes les pages en revanche ne sont pas logées à la même enseigne. Un site Internet relativement statique ne demandant aucune interaction répétée de la part de l'utilisateur diffère par exemple du site Internet d'une compagnie aérienne. En version classique ce dernier permettra de consulter les horaires des vols et les tarifs tandis que dans sa déclinaison mobile, il répondra à un besoin bien précis (connaître les éventuels délais ou les portes d'embarquement). Dans ce cas, une application mobile dédiée est sans doute préférable, mais aussi plus coûteuse.

RWD - Web vs Natif

M. Goetter explique ainsi que si tous les sites méritent au moins d'être lisibles sur n'importe quel écran, « quelques cas très spécifiques, liés à des fonctions inhérentes d'un smartphone, tireront grand bénéfice d'une application dédiée, par exemple un service immobilier ou d'emploi offrant une prestation de géolocalisation ». Il ajoute que le téléchargement d'une application n'est réalisé que par la suite, une fois que l'internaute est fidélisé.


Des problèmes d'accessibilité

De prime abord, un site en responsive semble favoriser l'accessibilité avec une mise en forme du texte adaptée à l'écran et la taille de la police s'adaptant à la résolution. Pourtant, comme le souligne le développeur Chris Day, PDG de l'agence Daymedia, ce type de développement ne conviendra pas à tous les mobinautes.

En effet, pour mettre en valeur le contenu sur mobile, un site adaptatif utilise généralement une technique visant à masquer le menu au sein d'un volet dynamique et à ne conserver que les icônes pour la navigation. Or, une personne à déficience cognitive nécessitera un texte clair permettant d'identifier l'objet du lien.

RWD - problème menu

M. Day ajoute : « l'un des problèmes les plus fréquents que j'observe avec les sites responsive est l'usage de la balise <select> ».  Sur mobile celle-ci se présente sous la forme d'un menu déroulant, de fait, un lecteur d'écran dictant le contenu du site ne sera pas en mesure de naviguer correctement les pages.

Par ailleurs, certains développeurs empêchent la possibilité de zoomer sur le texte. Plus précisément, en tentant de passer outre un bug d'iOS, une manipulation consiste à rajouter la propriété maximum-scale=1 au sein de la balise meta name="viewport" dans l'en-tête de page. Les Malvoyants ne seront alors pas en mesure d'effectuer un zoom sur la page.

Une refonte complexe pour les sites existants

Quand il s'agit de moderniser un site Web existant selon les principes du responsive Web design, les choses se compliquent. Le webmaster devra ainsi reprendre chacun des éléments de la page et les optimiser pour chacune des tailles d'écran, un travail parfois colossal qui mériterait peut-être d'orienter la réflexion vers le développement d'une application mobile. En outre l'adaptation automatique d'un site aux terminaux est effectuée non pas en fonction de la taille de l'écran mais de leur définition et les choses sont moins simples qu'elles n'y paraissent. Le blog spécialisé hteumeuleu.fr note par exemple que l'iPad 2 et l'iPad Mini ont la même définition d'écran (1024x768) mais deux diagonales bien différentes respectivement de 9,7 pouces et 7,9 pouces. Or les hybrides de type phablets se multipliant, le ciblage s'en trouve complexifié.

En outre, comme le souligne Jakob Nielsen, spécialiste de l'ergonomie et anciennement vice-président de la recherche chez Apple, « les différences entre un site mobile et un site classique vont au-delà du simple agencement ». L'homme explique par exemple que le contenu à lire sur un téléphone doit plus court et plus simple. Il ajoute qu'il ne suffit pas d'adapter automatiquement la largeur des images via une propriété CSS mais que ces dernières doivent être encadrées et zoomées de manière différente pour mettre en évidence certains détails. Et de conclure : « Cependant, lorsque vous prenez en compte toutes ces différences, nous revoilà à la case de départ : deux designs différents ».
Modifié le 18/11/2013 à 15h50
Commentaires