Le Responsive Web Design ou comment améliorer l'expérience utilisateur.
Avec la multiplication du nombre de supports permettant de surfer sur le web, la question de l'ergonomie des sites internet peu importe le navigateur et le type d'appareil utilisé est au cœur des préoccupations actuelles.
Les usages web ont fortement évolué depuis plusieurs années. L'utilisation des mobiles et tablettes explose ; selon les chiffres de Médiamétrie en 2012 plus de 23 millions de français ont en effet déjà accédé à internet via leur mobile et plus de 3 millions de foyers possèdent une tablette tactile en France.
Il devient donc crucial pour les entreprises, à la fois du secteur privé et public, de réfléchir à leur présence multi-écrans (ordinateur, mobile, tablette, télévision connectée) afin d'offrir aux visiteurs l'expérience utilisateur la plus confortable et ergonomique possible.
Deux solutions se démarquent pour répondre à ces problématiques :
• mettre en place des versions séparées dédiées aux mobinautes (version mobile, application mobile),
• miser sur le responsive web design (conception adaptative en français).
De plus en plus plébiscité en entreprise, le Responsive Web Design est une technique qui vise à optimiser ou adapter automatiquement l'affichage d'un site web en fonction du terminal utilisé.
Concept séduisant, il implique de
repenser en profondeur la conception des sites et interfaces et
d'anticiper les contraintes d'utilisabilité quel que soit le support de
navigation choisi.
Le Responsive Web Design
répond à cette question en permettant de concevoir un site unique
compatible quel que soit le support emprunté, évitant ainsi le
développement de plusieurs versions d'un site web ou d'applications
natives.
Le site web conçu peut donc changer de
forme, s'adapter automatiquement selon la taille d'écran, une expérience
unique et séduisante pour l'utilisateur !
Concrètement, comment ça marche ?
Le Responsive Web Design repose sur trois composants clés :
•
Des requêtes de média (media queries) : il s'agit de critères en CSS3
qui permettent d'adapter dynamiquement le design en fonction des
caractéristiques de chaque support utilisé et de la taille d'écran
correspondante.
• Des grilles fluides : il s'agit de concevoir une
interface composée de blocs en unités relatives, cette conception
modulaire permet de jouer sur la composition de la page en fonction de
la largeur de l'écran. Les éléments fluides occupent le même pourcentage
d'espace sur les différents écrans. Par exemple un élément va prendre
50 % de la largeur, quel que soit le terminal.
• Des images flexibles
: autre élément important du responsive design il s'agit de proposer
des images dont la taille et la disposition s'ajustent en fonction de
l'écran.
Les bénéfices du responsive design
Le responsive permet
de proposer une base HTML/CSS unique qui sera compatible quel que soit
le terminal. Les avantages sont donc nombreux :
• Un temps de maintenance réduit,
•
Un contenu unique : cela permet une gestion unique et centralisée, de
même que des efforts de rédaction et de duplication des contenus moins
importants.
• Une URL unique : élément important non seulement pour
l'optimisation du référencement naturel sur les moteurs de recherche
mais aussi en matière de communication externe.
• Une seule
expérience utilisateur : il s'agit de concevoir une interface à
l'ergonomie intuitive unique pour l'ensemble des supports.
• Des coûts de développement moins élevés que pour des versions séparées
Les limites du responsive design
Le
responsive design impose des contraintes techniques lourdes et implique
de revoir en profondeur les rôles et expertises de l'équipe projet.
•
La phase de conception est plus lourde : quelle approche adopter pour
décider des points de rupture du design du site ? Penser aux contenus ?
Penser aux terminaux ?
• Les temps de développement sont plus longs qu'un site classique seul,
•
Les temps d'affichage sont potentiellement plus longs en raison des
ajustements d'images et de contenus. Cependant une gestion fine des
images responsive permet de pallier à cette limite particulièrement avec
l'utilisation de javascript.
• La compatibilité avec les différents
navigateurs est un point sensible en raison des codes HTML et CSS plus
travaillés que pour un site classique. En effet, tous les navigateurs ne
gèrent pas les media queries notamment IE7 et IE8. Toutefois, il existe
plusieurs librairies javascript comme par exemple le plugin jQuery qui
permettent de contourner cette limite.
• Les coûts de développement
sont généralement plus élevés puisque la création d'un site responsive
nécessite des temps de développement plus longs qu'un site web classique
Pour conclure, le Responsive Web Design
est clairement une solution efficace afin de proposer une expérience
utilisateur enrichie en adéquation avec les nouveaux usages web.
Certes, le coût d'un projet responsive est plus important (20 % à 30 %) que celui d'un projet classique. Cependant, il reste inférieur aux coûts cumulés d'un projet classique, d'une version mobile et d'une application native. Par ailleurs, le coût de maintenance d'un seul site en responsive est inférieur aux coûts de maintenance de plusieurs sites ou applications dédiées (iOS, Windows, Android...).