4 Inconvénients du Responsive Design

Depuis plus d’un an, l’ensemble de la communication digitale a connu une petite révolution avec l’éclosion d’une nouvelle technique de mise en place de services digitaux multi-canaux : le responsive design.
Au cours de cette période, nombreux sont les projets basés sur cette technique qui ont été menés à bout ou qui ont échoué. Ainsi, il est aujourd’hui possible de disposer de retours sur expériences enrichissants à ce sujet.


Ces derniers temps, nombreux sont les professionnels du digital qui se sont levés en pensant au Responsive Design, ont pris le métro en songeant au Responsive Design, sont arrivés dans leur open space en s’exclamant : « Hey vous savez quoi ? Je crois qu’on va utiliser du Responsive Design pour le projet X, ce sera innovant, on parlera de nous, et le client va aimer car c’est nouveau et pas cher !! ». En général, ils prennent aussi leur pause déjeuner en y repensant, lisent des articles à ce sujet tout au long de l’après-midi ventant les fabuleuses vertus de ce Responsive Design et ainsi de suite élevant cette technique au rang de mythe au pied duquel l’ensemble de la communication digitale vient s’agenouiller.
L’objet de ce billet n’est pas de nier les avantages non discutables du Responsive Design, mais plutôt de le démystifier en évoquant aussi certains inconvénients dont il faut avoir conscience avant de se poser cette fameuse question : “Responsive ou pas responsive ?”



Rappel : ce qu’est le Responsive Design



image

Le « responsive design » est un concept qui regroupe un ensemble de principes de conception et de technologies qui permettent à un site de s’adapter aux différentes tailles d’écran et aux différents terminaux (ordinateur, tablette, mini-tablette, smartphone  …).

Le principe est simple : plutôt que de créer des designs différents pour chaque interface et de rediriger l’internaute vers une version mobile ou tablette du site, le responsive design permet d’adapter un même site à un maximum de configurations, tout en offrant une expérience utilisateur de qualité.

Il faut ainsi imaginer son design en se basant sur un système de grilles fluides et d’éléments adaptés qui permettront d’ajuster la page en fonction des cas. Ainsi le « responsive design » induit une nouvelle façon de penser les interfaces web où la mise en page, les marges, les tailles des polices de caractères et des images ainsi que la disposition des éléments s’adaptent en fonction des dimensions du navigateur.

Cette technique repose en général sur une structure HTML5 commune à toutes les versions (tablette, mobile etc) et différentes feuilles de styles CSS, une par version.

En définitif, plus besoin de créer une application spécifique par type de terminal, mais une unique web app qui s’adaptera à tous les supports.



Les avantages du responsive design



Le Responsive Design permet déjà de disposer d’un service digital “X en 1” mais il s’agit aussi d’un moyen de communication puissant pour valoriser l’image de la marque.

Il repose sur tous les avantages liés à l’utilisation de web app plutôt que d’app natives : un développement en langage simple (HTML/CSS), une accessibilité depuis un navigateur, la possibilité d’outrepasser les validations (contraignantes) des stores, la mise à jour à tout moment sans action de l’utilisateur et bien d’autres…

Cette technique garantit une accessibilité, une lisibilité et une cohérence des contenus sur tous les devices. L’utiliser est bien évidemment moins coûteux que de créer un site web + une app mobile spécifique pour chaque OS (native) + une app tablette spécifique pour chaque OS.

Le responsive design assure donc une ergonomie de qualité en optimisant l’interface pour chaque terminal. Cependant, en explorant les détails, cette technique entraîne aussi des inconvénients qui peuvent être très structurants pour la stratégie de la marque…



Les inconvénients majeurs du responsive design

 

Il faut tout d’abord garder à l’esprit que l’architecture de l’information des écrans est pensée « multi-supports » et nécessite un temps de conception bien supérieur à un site web classique. Il est aussi plus difficile d’innover avec le Responsive Web Design qui impose ses contraintes liées à son caractère d’adaptabilité. Le framework responsive qui est utilisé apporte généralement aussi de nombreuses contraintes techniques sur lesquelles le designer doit s’appuyer.



Inconvénient #1 : Le redimensionnement d’images

image

Le Responsive Design étant basé sur une structure fluide, les images doivent se redimensionner suivant la largeur de l’écran. Cependant, afficher une image sur mobile oblige déjà à charger cette image en grande taille (issue de la version web) sur le mobile avant de la redimensionner. Or les bandes passantes 3G  sont loin de disposer de la même puissance que l’ADSL ou de la fibre optique… Il est donc difficilement envisageable de charger plusieurs dizaines d’images de dimension web sur un mobile. De plus, le redimensionnement des images nécessite des calculs CPU qui peuvent aussi ralentir le device et la vitesse de chargement globale de la page.



Inconvénient #2 :Temps de chargement

image

Comme énoncé précédemment, le responsive design repose sur une structure HTML5 couplée au CSS3. Ce postulat implique que toutes les versions (mobile, tablette, web …) chargent toutes les données HTML. Ainsi, même si l’interface mobile n’affiche que 60% des informations web, les autres 40% sont chargées puis masquées en CSS. Or sur mobile, il faut savoir que 40% des utilisateurs quittent le site s’il n’est pas chargé en moins de 3 secondes. Sous couverture 3G, il y aurait sans aucun doute un taux de rebond très élevé.


D’après des études de Gomez et Akamai, 1 seconde de délai de réponse peut induire une perte de 7% du taux de transformation. Lors du chargement d’une page mobile, chaque seconde compte !

En allongeant le temps de chargement d’une interface, le responsive design peut donc avoir des conséquences non négligeables sur la performance et le business du service.

sources : gomez.com et akamai.com (http://blog.kissmetrics.com/loading-time/)



Inconvénient #3 : Le respect des usages


Selon le terminal utilisé et son contexte d’utilisation, un même service digital peut être appréhendé de façons très différentes.

Tout d’abord, le Responsive Design ne prend pas en compte les caractéristiques spécifiques de chaque terminal et de son environnement tels que la qualité de la bande passante, les limites du matériel, la performance globale de l’appareil, l’éclairage, le son, l’accessibilité …

Sans parler des conditions spécifiques d’utilisation telles que la position de l’utilisateur, son temps d’utilisation, sa situation de confort, sa façon d’utiliser le device et l’attention souvent partielle dont l’utilisateur dispose.

Or chacun de ces paramètres prend une part très importante dans la construction d’une expérience utilisateur réussie en situation de mobilité.

Pour démontrer ce propos, je vous propose une démonstration avec l’
exemple d’une expérience utilisateur vécue sur un site d’actualité.

L’usage typique sur ordinateur (et certainement tablette …)

L’utilisation aurait lieu le plus souvent sur un bureau, avec une connexion continue et une puissante bande passante, au sein d’un environnement privé et dans une position assise.
La consultation de l’actualité peut être assez profonde et large (lecture de nombreux articles en profondeur) avec un niveau d’information élevé, une richesse de contenu possible grâce à la bande passante.

Exemple de service proposé sur web (qui pourrait également convenir pour un usage tablette) : éditorialisation des contenus avec dossiers thématiques, sujets approfondis, actualité “tiède” et valorisation de la richesse de contenu (vidéos, diaporamas, inteviews etc).


L’usage typique depuis un smartphone
Son utilisation consisterait généralement à survoler des titres principaux. L’utilisateur va à l’essentiel et adopte une lecture rapide et peu profonde des sujets. Son temps de consultation est faible, mais peut se reproduire plusieurs fois par jour. L’objectif de notre utilisateur est de rester à jour sur l’actualité. Ce type d’utilisation a majoritairement lieu dans les transports en commun, ou pendant les moments d’attente, de temps libre et souvent dans une position debout.
 
Exemple de service proposé sur mobile : un fil d’actualités chaudes en temps réel et mise en avant des sujets à la Une.

Ces deux cas d’usage prouvent que les besoins et attentes d’un utilisateur pour un même service peuvent être très différents selon le contexte et le terminal utilisé.


Or, le responsive design ne permet pas d’obtenir plusieurs interfaces structurellement différentes. Rappelons que cette technique est basé sur une seule structure HTML5 commune à toutes les versions (web, tablette et mobile). Cette unique structure pourrait donc difficilement proposer une interface cohérente avec les différents besoins de notre utilisateur.

Exemple du service s’il était construit sur du responsive design : mise en avant des sujets à la une, bloc “dernières actualités”, dossiers thématiques, actualité en vidéo …
=> Au final, un “mix” entre contenus pertinents sur web et d’autres pertinents sur mobile.
 
Notre exemple illustre de nombreux cas où l’expérience utilisateur peut être fortement perturbée par des contenus et fonctionnalités qui doivent couvrir à la fois des besoins et usages du mobile, du web et de la tablette.

Utiliser le responsive design peut dans certains cas être une grossière adaptation d’une expérience sans se baser sur les principes ergonomiques, les contextes et les usages spécifiques de chaque device.



Inconvénient #4 :

Compatibilité des navigateurs

Il est important de rappeler que tous les la navigateurs ne sont pas encore compatibles HTML5, notamment sur des anciennes versions de smartphone… Dans certains cas, l’usage du responsive design n’est donc tout simplement pas envisageable car le public cible n’a pas encore en sa possession des terminaux compatibles.



Pour conclure, ce que N’EST PAS le Responsive Design


En définitif, Le Responsive Design est une technique très intéressante mais à utiliser avec grande précaution, selon le sujet, le type de service, l’expérience que l’on veut faire vivre à l’utilisateur, ses attentes… Il faut toujours garder à l’esprit qu’il ne s’agit pas d’une solution miracle pour résoudre toutes les problématiques de tout service digital.


Cette technique peut être idéale pour des sites simples avec peu de contenus tels que des blogs, sites d’agence, portfolio etc … (voir des exemples réussis sur http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive-website-layouts/)

Le choix d’utiliser du responsive design ou de mettre en place deux ou trois web apps distincts dépend de la stratégie digitale de la marque : quelle audience couvrir ? Quel accès proposer (web, store …) ? Est-ce que la performance de l’interface est une nécessité ? Le public cible dispose-t-il de terminaux récents ? Etc.

Utiliser le responsive est très efficace pour délivrer un service à un maximum d’utilisateurs, pour disposer d’une visibilité importante, mais oblige parfois à faire d’importantes concessions en terme de performances (temps de chargement élevé et des calculs CPU importants) ou d’optimisation de l’expérience (procurer une expérience “générique” sans répondre à des usages spécifiques).

____

Me suivre sur Twitter : @matthieu_lerat
Me rejoindre sur LinkedIn

____

sources :
http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/
http://www.agence-csv.com/blog/le-guide-de-reference-pour-seos/
http://www.webdesignshock.com/responsive-design-problems/
http://www.24joursdeweb.fr/2012/re-evaluer-approche-responsive-sur-desktop/