Le responsive design ou design adaptatif, c’est quoi ?

C’est un terme retrouvé fréquemment en conception de site internet. Le responsive design, responsive web design ou design adaptatif est devenu un indispensable du web. Mais qu’est-ce que c’est exactement et quelle est son utilité ?

Le responsive design : un indispensable de la conception web

Vous avez déjà dû vous balader sur internet sur votre smartphone ou votre tablette. Une étude statut en effet que de plus en plus d’utilisateurs privilégient cette option à l’ordinateur. Les avantages sont évidents : un smartphone prend moins de place et du coup, on l’a toujours sur soi.

Donc, vous voguez sur les eaux internationales du web et tout à coup, vous tombez sur un site qui semble mal conçu. Vous pensez à un bug. Les boutons sont tellement petits qu’ils sont inatteignables, le texte est illisible, les images sont tronquées et dépassent de l’écran. Excédé, vous quittez le site.

Que s’est-il passé ? Ce site web n’était pas responsive. Et c’est bien dommage car le responsive design est désormais un indispensable.

Il permet au site web, à l’application ou à l’email que vous recevez de s’adapter à l’appareil que vous utilisez.
Il en détecte la taille et la résolution d’écran et vous propose la version la plus ergonomique et agréable.

• Voir notre article Qu’est-ce que l’ergonomie ?

Comment ça marche ?

Pour ce faire, la conception web ou applicative se base sur plusieurs éléments :

• Un contenu à la mise en forme et à la taille flexible. Chaque élément du site web (blocs, titres, paragraphes, boutons, formulaire) change selon la résolution de l’écran afin d’être toujours lisible et facilement cliquable.
  Par exemple, si sur un site web, vous avez quatre paragraphes placés les uns à côté des autres, sur mobile, vous les verrez apparaître les uns en dessous des autres pour conserver une bonne lisibilité.

• Des images optimisées. Afin d’être rapidement chargées sur les smartphones qui disposent souvent d’une moins bonne connexion que les ordinateurs de bureau, les images sont allégées et paramétrées pour s’adapter à la taille de l’écran.

Le responsive design permet d’adapter le contenu selon la résolution et la taille d’écran

L’interface se module donc intelligemment et vous avez l’impression de naviguer sur des sites web différents selon l’appareil utilisé, alors qu’il n’en est rien !

Quels sont les avantages du responsive design ?

Les avantages du responsive design sont nombreux.
Il faut en premier lieu penser à l’utilisateur qui parcourt le site. La navigation est simplifiée, par exemple, par le biais d’un menu spécialement adapté pour son smartphone.

Les éléments sont disposés de façon à être lisibles et facilement identifiables.

Mais cela a aussi des avantages lors de la conception.

• Le responsive design constitue un gain de temps.
  Contrairement à la création de plusieurs sites web adaptés à chaque appareil ou à la conception d’une application dédiée, le responsive design est tout-en-un. Un seul site web bien paramétré suffit donc.

• Il permet de profiter d’un meilleur référencement naturel (SEO).
  L’algorithme de Google sait reconnaître si votre site est reponsive, et considère cela comme une bonne chose. Il privilégie les sites qui ont mis en place le mobile-first (mobile en premier).

• Le contenu n’est pas dupliqué.
  Si vous optez pour un site web avec une version ordinateur et une version mobile, le contenu, s’il est le même, sera considéré comme dupliqué. Or l’algorithme de Google n’aime pas le contenu dupliqué (duplicate content) et votre score SEO risquerait d’en pâtir. La rédaction de contenu unique et original est privilégiée.

• Les coûts de production sont réduits.
  Si la conception en responsive design peut s’avérer plus longue et compliquée à mettre en place, vous gagnez en réalité du temps. La mise en place d’un site à plusieurs versions ou d’une application mobile dédiée peuvent avoir leurs avantages. Mais ce sont des solutions plus chronophages et coûteuses.

Google privilégie les sites au design responsive pour plusieurs raisons

Je suis intégrateur : comment rendre mon site web responsive ?

Alors, oui, c’est bien beau tout ça, mais concrètement, comment rendre son site web responsive ?

Pour un intégrateur web ou un UX designer, il n’y a rien de bien compliqué. Cela s’appuie sur quelques pratiques et astuces qui vous feront gagner du temps.

Opter pour une grille adaptative

Tout d’abord, pour organiser ses blocs de contenu, mieux vaut privilégier une architecture avec une grille adaptative.
Plusieurs frameworks d’interface ou outils vous permettent de créer facilement un site avec celle-ci. C’est le cas notamment de Bootstrap, le framework de Twitter, Cela permet de créer des éléments qui changeront de largeur en fonction de la résolution de l’écran.
Par exemple, quatre blocs de 25% de largeur sur ordinateur deviendront des blocs de 50% ou 100% sur mobile, pour une meilleure lisibilité. Et ce, simplement, avec l’ajout de quelques classes en CSS.

Définir des tailles de contenu relatives et non absolues

Deuxième point pour gagner du temps. Pour la définition de la taille des éléments du site web en CSS, il vaut mieux opter pour des valeurs relatives que des valeurs absolues.
Par exemple, opter pour des dimensions exprimées en em ou en pourcentage, plutôt que pour du pixel. Vous n’aurez plus qu’à augmenter ou réduire le pourcentage dans vos media queries, selon la résolution de l’appareil utilisé.

Optimiser les visuels

Il faut également veiller à l’optimisation et au bon redimensionnement des visuels. Il vaut mieux réduire leur taille pour accélérer leur chargement.
Changer leur proportion en fonction de la largeur de la page en définissant une taille maximale (max-width) de 100% vous assurera qu’elles ne seront pas tronquées ou trop larges.

Optimiser la navigation

Si une navigation classique, avec les liens alignés les uns à côté des autres est claire et pratique sur ordinateur, ce n’est pas le cas sur mobile.
Il vaut mieux donc opter pour la mise en place d’un menu optimisé sur le mobile. Vous savez, le petit hamburger sur le côté du logo qui ouvre le menu ? C’est un exemple parmi tant d’autres.

Il ne faut pas oublier de tester et de faire tester sa conception en responsive design afin de s’assurer, entre autres, de son ergonomie, de sa clarté et de la vitesse de chargement.

Faire appel à un professionnel

Le responsive design fait désormais partie intégrante de la plupart des conceptions de site web.
Les professionnels sont donc au fait des pratiques à mettre en application pour un site web optimal.

Nous avons vu qu’un site web responsive :

• Génère plus de visites en permettant la navigation via tous les supports
• Fait baisser le taux de rebond de votre site en évitant qu’un utilisateur ferme la page qu’il jugera peu lisible
• Vous permet d’optimiser le placement de liens, boutons et appels à l’action
• Garantit la pérennité de votre site dans une toile qui évolue chaque jour
• Donne une impression de qualité et de confiance aux utilisateurs
• Plait aux algorithmes de Google, et donc sera mieux placé sur les moteurs de recherche

Pour gagner en visibilité et en ergonomie, n’hésitez pas à nous faire appel pour rendre votre site web conforme au responsive design.