Responsive Design

Il est aujourd’hui indispensable de penser l’accès à son site en prenant en compte les nouveaux moyens de consommer l’information : smartphone, tablette.
Combien de fois, sur votre smartphone / tablette, avez-vous quitté un site dès la première page à cause de textes de taille trop petite rendant le contenu illisible ou nécessitant des zooms ou défilements (scrolls) incessants?
Ce site n’était pas à rendu responsive et a donc dégradé votre expérience utilisateur, vous n’étiez à ce moment très certainement pas enclin à acheter, or le nombre de mobinautes grandissant, la part de marché du m-commerce (commerce depuis un mobile) suit cette courbe, avec des actes d’achats sur mobile entrant dans les habitudes, là où il y a quelques années, ils pouvaient entrainer des craintes.
Bien avisé est le professionnel au fait de cette tendance.

Pour répondre à cette évolution, deux angles d’attaque sont possibles : le site mobile, ou le responsive design.

En fonction du média d’accès, le contenu ne répond plus aux mêmes exigences, les comportements des utilisateurs sont différents, une adaptation du support est donc nécessaire.

Depuis 2014, le nombre de mobinautes devient plus important que le nombre d’internautes (en part globale), les situations de mobilité se multiplient, anciennement où un utilisateur ouvrait son logiciel client de messagerie sur son poste fixe, il accède maintenant à l’ensemble de ses emails depuis son smartphone (via son application dédiée ou via un webmail), or combien de liens comportent ces emails, ou ces application de type réseaux sociaux (Facebook, Twitter, …)? Autant de sources de trafic qui renvoient sur un comportement de consultation via mobile (smartphone, tablette). Et ce constat n’est pas près de devenir obsolète (voir les chiffres des ventes du Desktop continuellement en perdition depuis quelques années).

La connexion au réseau cellulaire demeure cependant encore un des freins à la consommation de contenu numérique depuis mobile, il est donc extrêmement important de prendre en compte ce fait et d’adapter la création des sites afin de les rendre les plus légers possibles tant dans leur structure (contenu Javascript, feuilles de styles CSS minifiées) que dans leur contenu (images optimisées, à l’échelle).

Un mobinaute quittera votre site si celui-ci met plus de 3 secondes à s’afficher.

La résolution d’écran est une autre propriété intéressante à prendre en compte, impossible de fournir le même rendu quand la largeur physique de l’écran change.
Grâce aux frameworks offrant des systèmes de grilles et un usage poussé des media queries CSS 3 permettant de détecter la résolution d’écran (ex. Bootstrap) il est maintenant possible d’adapter la disposition du contenu (bascule du contenu sur une ou plusieurs colonnes en fonction de cette résolution, …).

Voici les principales résolutions d’écran à prendre en compte :

  • Smartphone : largeur inférieure à 768 pixels
  • Smartphone (Phablette) et tablettes orientation portrait : largeur comprise entre 768 pixels et 1024 pixels
  • Desktop : largeur supérieure à 1024 pixels

Mais de nombreux points de ruptures supplémentaires peuvent être définis afin de correspondre à des exigences particulières (iPhone 5 portrait / paysage, iPhone 6 portrait / paysage, iPhone 6+ portrait / paysage, …).

En fonction de la pertinence de l’information, certains éléments d’un site peuvent également être masqués ou adaptés (ergonomie différente), nous retrouverons ainsi assez régulièrement des sites qui disposent d’un menu adapté (type menu hamburger Android), de boutons de taille plus importante facilitant l’usage tactile.

Parmi les avantages du site responsive :

  • Une seule URL d’accès, le contenu s’adaptant en fonction du média utilisé (smartphone, tablette, desktop)
  • Par conséquent, une seule interface de gestion du contenu (Back Office) / une unique base de données

Le site responsive répond à la plupart des attentes concernant les sites vitrines d’aujourd’hui, son affichage est fluide (adaptation automatique au média).
C’est la méthode préconisée par des sociétés telles que Microsoft ou Google (voir mon article concernant le nouveau label Mobile Friendly et son impact sur le référencement naturel – SEO).

Le site mobile (version dédiée – ex. m.zalando.fr) sera quand à lui privilégié dans le cadre d’un projet plus complexe (ex. site de e-commerce), son interface est spécifique et uniquement destinée à une prise en main mobile.
Dans un tel cas, une attention toute particulière sera portée sur le risque de duplication de contenu (méthode pénalisant le référencement naturel) et sur la perte de notoriété dût à la dilution des flux.
En terme de coûts, une telle architecture s’avère plus onéreuse (différents rendu d’un même site selon les résolutions cibles <=> surcoût en terme de maintenance (mise à jour, tests, …)).

 

Comment tester le rendu de mon site sur différents médias ?

http://material.io/resizer/

Je vous invite à consulter mes offres concernant le développement web, je vous accompagne dans votre projet, de l’analyse préliminaire à la mise en production.

Si votre idée dépasse le cadre du web : fonctionnalités plus accès application (caméra, géolocalisation, notifications pushs, mode offline, scanner de code barre, …), n’hésitez pas à me contacter, je prendrai en charge pour vous la phase de maîtrise d’oeuvre (formalisation du besoin) et le suivi de votre projet.

Remarque : de nouvelles cibles émergent telles que peuvent l’être les dispositifs TV (Android TV), avec leurs résolutions / points de rupture particuliers.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.