Le Responsive Web Design, vous connaissez mais êtes vous sûr d’en mesurer tous les enjeux et problématiques ? Véritable Buzzword de l’année 2012, le Responsive Web Design reste une véritable tendance suscitant un intérêt toujours grandissant. En témoignent les nombreux articles et conférences sur le sujet (Responsive Day Out).

Evolution du nombre de recherche du mot clef "Responsive" sur Google

Evolution du nombre de recherche du mot clef « Responsive » sur Google

Responsive Web Design 101

Le Reponsive Web Design est une technique de conception de sites internet permettant d’adapter la présentation de la page selon la taille de l’écran. N’importe quel visiteur pourra ainsi accéder à votre site dans les meilleures conditions d’affichage, et ce, de n’importe quel appareil : smartphones, tablettes, ordinateurs, ou même TV connectées.

Cette technique est dores et déjà utilisée par des sites aussi importants que Microsoft, le Time, The Next Web… Quelques sites e-commerce comme Skinny Ties, Shun Cutlery, ou même le store de Sony USA l’utilise également mais ce n’est pas le cas de la plupart des grands sites e-commerce qui lui préférent bien souvent les web apps ou applications mobiles. Un exemple valant mieux qu’un long discours, retrouvez une importante sélection de sites en Responsive Web Design sur le site Media Queries.

Déjà présentée en mai 2010 par Ethan Marcotte (Responsive Web Design) avant d’être adaptée en livre, l’idée remonte à 2004 où la technique se basait alors sur du Javascript (Resolution Layout). La méthode actuelle va cependant bien plus loin en permettant un ciblage plus précis des conditions d’affichage. On trouve maintenant de nombreux outils pour le développement de sites en Responsive Web Design (frameworks, création de maquettes, sliders, templates pour divers CMS…).

Le mobile et les terminaux alternatifs de plus en plus important

Le mobile a pris une place de plus en plus grande dans notre quotidien et il ne se passe pas un jour sans qu’une étude ne vienne le confirmer. Je vous conseille la lecture de l’étude de Google « Notre planète mobile », qui s’attarde sur les nouveaux usages et comportements apparus grâce au mobile. Pour illustrer cette importance, on peut également citer quelques chiffres intéressants :

  • 41% des Français sont équipés d’un smartphone (Source).
  • 15% des Français sont équipés d’une tablette (Source). Ce taux pourrait passer à 50% en 2017 (Source).
  • 14% des acheteurs en ligne ont déjà acheté à partir de leur téléphone mobile (téléchargements d’applications mobiles exclus) soit plus de 4,3 millions de Français (Source).
  • Le chiffre d’affaires réalisé sur l’internet mobile au dernier trimestre 2012 (smartphones et tablettes hors téléchargement d’applications) est 2,6 fois supérieur à celui du dernier trimestre 2011 (Source).
  • 20% des internautes comptent acheter avec leur smartphone en 2013, 15% depuis leur tablette (Source).
  • 33% utilisent leur smartphone afin de comparer les prix en magasin (Source).
  • Le trafic via mobile représente 5,1% en Europe (Source).

Bien sûr, le trafic via mobile peut varier sensiblement selon le site internet étudiée et selon la cible de celui-ci. Je vous invite à jeter un oeil sur vos statistiques web et à observer dès à présent cette évolution sur votre site. Rendez-vous dans Google Analytics, puis dans Audience et Google Mobile. Même si les visiteurs mobiles restent minoritaires, ils sont une réalité et la tendance est à la hausse. Ils devraient dépasser les visites réalisées depuis un ordinateur dans les prochaines années. Il est donc important de leur proposer une expérience de visite adaptée, sous peine de frustration pouvant ternir l’image de l’entreprise ou même faire perdre quelques clients.

Des équipements hétérogènes : le problème de la longue traine

Les appareils populaires tels que l’iPhone et l’iPad trustent les premières places dans les statistiques de connexions mais il existe de nombreux autres appareils, aux caractéristiques techniques diverses, du simple feature phone aux smartphones les plus populaires, jusqu’à la plus récente catégorie des « phablets« . Résolutions, taille d’écran, utilisation en mode paysage ou portrait, et même densité de pixels (avec le Retina Display pour les appareils d’Apple ou encore le récent Chromebook Pixel de Google) rendent leur prise en compte difficile. Il est quasi impossible de traiter chaque cas particulier. Les appareils sont donc regroupés en catégories selon leurs caractéristiques techniques.

Comment fonctionne le Responsive Web Design ?

Le Responsive Web Design regroupe en réalité 3 procédés :

  • La techniques des Grilles fluides, utilisée avant la création du Responsive Web Design et permettant de fixer la largeur des éléments de la page en pourcentage de la largeur de votre navigateur, et non pas avec un nombre fixe de pixels.
  • Les Images fluides permettant d’afficher des images dont la largeur sera également déterminée en pourcentage de la largeur du navigateur.
  • Le CSS3 et les media queries permettant enfin de viser uniquement certaines tailles d’écran (ayant une largeur maximale x, une orientation portrait ou paysage…) pour changer la disposition des éléments, voire cacher totalement un bloc.

Il est possible de jouer sur le nombre de colonnes, leur largeur, la taille du texte, des images… Le Responsive Web Design correspond surtout à une nouvelle façon de penser le web design. La véritable problématique est de déterminer quels contenus afficher et cacher pour une résolution donnée. Faites le point sur votre site et les contenus les plus consultés sur mobile. Pour cela, rendez-vous dans Google Analytics, créez un rapport personnalisé et classez vos pages selon le nombre de visites en ajoutant un filtre « Appareils mobiles (y compris tablettes) ». Vous pouvez également ajouter des variables telles que la durée moyenne de visite, le temps moyen passé sur la page et le taux de rebond pour avoir une vue précise de l’intérêt que les visiteurs mobiles ont porté à vos pages. Vous pouvez aussi lancer une étude qualitative ou quantitative auprès de vos visiteurs, grâce aux formulaires Google Drive.

Ce qu’il faut retenir pour le mobile :

  • Simplifier la navigation : éviter les sous-rubriques par exemple.
  • Se concentrer sur le contenu vraiment important et pertinent : tous les blocs de contenu de votre page d’accueil ont-ils leurs places sur mobile ?
  • Afficher le contenu en ligne et non en colonne : on passe du zoom sur les contenus de la page à un défilement vertical, qui est devenu naturel sur smartphones.

Les limites du Responsive Web Design

On a souvent opposé version mobile et site en Responsive Web Design. Le principal avantage de ce dernier est d’avoir un seul code à maintenir et un seul site à administrer. Ainsi une mise à jour du site ne demande qu’une action contre deux pour le site mobile (site principal et site mobile). Il n’y a donc plus aucun risque de contenu différent entre les deux versions. Le deuxième avantage du Responsive Web Design souvent évoqué était d’avoir une seule adresse URL par contenu, facilitant le SEO. Mais ce point ne constitue plus un avantage depuis que Google peut déterminer, grâce aux switchboard tags, quelle page afficher, même en cas d’URL différentes. Une version mobile permet quant à elle une plus grande adaptation du contenu au mobile et peut réduire de 90% le poids des requêtes.

Dans un article récent (When Responsive Web Design is Bad for SEO), Bryson Meunier souligne le fait que le Responsive Web Design n’est en réalité pas adapté à toutes les situations, et en particulier les situations suivantes :

  • Le site ne contient pas les rubriques recherchées par le visiteur mobile.
  • Le site ne contient pas les mots-clefs utilisés par les visiteurs mobiles. Par exemple, les visiteurs mobiles recherchent plus fréquemment des informations locales ou des applications mobiles à télécharger. Un audit des mots-clefs utilisés par les visiteurs mobiles peut s’avérer utile (How to do Mobile Keyword Research).
  • Quand le Responsive Web Design augmente le temps de chargement pour les mobiles. La vitesse est en effet un critère important du SEO mais il est d’autant plus important pour les visiteurs mobiles. Il joue d’autant plus sur le taux de rebond et le taux de conversion. Cet inconvénient est souligné dès la présentation du Responsive Web Design par Jason Grigsby pour qui ajouter du code ne serait pas la solution pour des appareils aux écrans plus petits et aux performances moindres (CSS Media Query for Mobile is Fools Gold).
  • Quand les visiteurs utilisent principalement des « features phones » (Yes, Feature Phone do Still Matter In Mobile SEO)
  • Quand il empêche une vision vraiment innovante. Bryson Meunier prend ainsi l’exemple de la banque JP Morgan Chase qui a su tirer profit des fonctionnalités propres au mobile pour proposer à leurs clients la fonction Quick Deposit, utilisant l’appareil photo pour le dépôt de chèques, sans se limiter aux fonctionnalités permises par le Responsive Web Design.
Responsive Web Design Vs Mobile Website Decision Chart

Responsive Web Design Vs Mobile Website Decision Chart

Vers une meilleure performance du Responsive Web Design : le RESS

La vitesse constitue un facteur clé de succès important sur mobile, que ce soit dû au motif de consultation (une information) ou du contexte (réseau, appareil moins performant…). Avec le Responsive Web Design, les éléments chargés sont les mêmes pour bureau et pour mobile, que ce soit le code Javascript ou les images en haute résolution. L’ensemble des éléments sont alors téléchargés, même s’ils ne sont pas utilisés. Certaines techniques d’images fluides n’optimisent notamment pas les images en fonction du support de destination. Les images sont alors trop lourdes, ralentissant le temps de chargement de la page. Il faut s’assurer d’utiliser une technique permettant d’adapter les images :

De même, il existe maintenant une méthode pour ne charger que les éléments nécessaires, voire adaptées à l’appareil (Améliorez la performance de vos interfaces mobiles avec RESS). Le RESS cherche à rapprocher deux solutions (le Responsive Web Design et le Server Side Component) pour combler les failles du Responsive Web Design. Grâce à une solution serveur qui détecte le type d’appareil accédant au site, le visiteur ne reçoit que ce dont il a besoin (images optimisées…). Ce procédé, déjà utilisé par l’Université de Notre Dame a permis de réduire le poids du site sur mobile à 291Kb contre 3Mb pour la version bureau (A case for RESS). Le problème est que la détection de l’appareil n’est pas infaillible, illustrant le fait que le concept de Responsive doit être intégré dans l’ensemble de la chaine de valeur.

It is not only the design of the web site and the layout of content that needs to be adapted or enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain. Jon Arnes Sæterås

L’utilisabilité comme véritable facteur clé de succès

Ne pas oublier les basiques du web design, et notamment l’utilisabilité (Not All Responsive Web Design Created Equal) :

  • Penser à l’adage « Don’t make me think », tiré de « Don’t Make Me Think: A common Sense Approach to Web Usability », écrit par Steve Krug en 2000. Pour résumer, derrière l’appareil se trouve toujours une personne, qui doit rapidement comprendre votre site (les contenus, la navigation…) sans même avoir à y penser.
  • La navigation devient importante. Elle peut se faire de plusieurs façons sur mobile : en drop-down via une boite de sélection ou une icône, comme le montre les deux exemples ci-dessous.

    Menu Responsive Web Design

    Menu Responsive Web Design

  • A ce sujet, certaines conventions commencent à se mettre en place : l’icône de menu (3 barres horizontales) est reprise sur une majorité de sites responsive ou même d’applications mobiles :

    Icone de menu sur smartphones

    Icone de menu sur smartphones

  • Le responsive design ne s’attarde que sur l’affichage mais il faut aussi penser aux périphériques d’entrée. Le paradigme Souris + Clavier n’est plus la seule référence : Ecran tactile, Stylet, Voix, Mouvement, voir même télécommande pour les TV connectées. Ce qui engendre des changements au niveau de l’utilisabilité, notamment des liens. Il est important qu’ils aient l’air « cliquables ». Sur un ordinateur de bureau, cela passe par le changement d’affichage au survol de la souris, action impossible avec un écran tactile. La solution la plus utilisée est de les afficher comme des boutons. La fonction CSS hover doit alors être vu comme une fonctionnalité supplémentaire pour ordinateur de bureau uniquement.

En allant au bout de cette logique, on voit apparaître une nouvelle tendance, le design Tablet First ou Mobile First (2013 sera l’année du Tablet First et Quelques pistes de reflexions en design web et mobile), où le travail de conception prend avant tout en compte les problématiques du mobile (place au contenu, navigation simplifiée, boutons…). Aucun risques de violer la Loi de Fitts. Le site de The Next Web en est une parfaite illustration.

En conclusion, nous pouvons souligner que le Responsive Web Design est un concept qui reste en développement mais qui s’annonce très prometteur. Même s’il ne résout pas totalement les enjeux du mobile, il constitue une excellente solution. Comme l’affirme Fred Cavazza, trois options se présentent :

  • un site en Reponsive Web Design sans detection
  • un site en RESS, se basant sur la détection
  • un site en version mobile, se basant également sur la détection

Certains ont un avis assez objectif sur la question, même si chaque cas reste particulier :

Mobile websites: Responsive design helps, but smartphone users have fundamentally different needs and only a site designed to meet those unique needs will produce the best outcome for the user and for the business. 2013-strategic-imperative-marketing-as-applied-science

Et vous, que pensez-vous du Responsive Web Design ? Avez-vous des retours d’expériences ?

One Response to “Enjeux et problématiques du Responsive Web Design”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>