Dans un souci de qualité, les techniques de responsive design à utiliser doivent être appréhendées en amont de la conception du site internet. Ici les enjeux sont multiples et comptent tout autant pour les moteurs de recherche que pour les internautes. Cet article vous présente donc 7 conseils pour réussir cet exercice.

>> Évaluez gratuitement votre site web et découvrez comment l'améliorer avec  Website Grader.

Que sont les langages CSS et HTLM ?

Téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base de ces deux langages de programmation pour gérer votre site web.

Pourquoi créer un site en responsive design ?

Aujourd'hui, le responsive design est un enjeu tant technique que marketing. Grandement apprécié par les moteurs de recherche, un site non responsive aura beaucoup de mal à se référencer dans le classement des résultats de recherche.

Pour l'utilisateur, le responsive design représente un confort de navigation qui joue sur l'expérience de l'utilisateur.

 

La navigation mobile ne cesse d'augmenter

Ce n'est pas un hasard si les moteurs de recherche se sont intéressés de près au responsive design et l'ont intégré comme un des critères de référencement à respecter.

Les chiffres de 2019 montrent la tendance mondiale : au 1er janvier plus de 4 milliards d'internautes se connectaient à internet depuis un téléphone mobile. En France cela représente 41.9 millions de « mobinautes ».

Les prévisions d'ici 2021 annoncent que 61% du trafic mondial proviendra des téléphones mobiles. Le responsive design n'est donc plus une option. 

 

Le mobile-first de Google

Le « mobile first » est un système d'indexation qu'utilise Google. Pour référencer les sites internet dans ses résultats de rechercher, les robots vont d'abord étudier leur version mobile.

Historiquement, les robots du moteur de recherche analysaient la version web des sites internet. En 2018, Google change officiellement son algorithme afin que les robots se concentrent d'abord sur leur version mobile.

Ce changement est cohérent avec la tendance mondiale : les internautes utilisent de plus en plus leurs téléphones mobiles pour effectuer une recherche.

 

Quelles bonnes pratiques adopter pour un site responsive design ?

Le responsive design est aujourd'hui incontournable, et de nombreux CMS, tel que le CMS Hub, proposent cette fonctionnalité. Mais son implémentation doit respecter les bonnes pratiques de l'exercice. Voici 7 conseils pour réussir son site responsive.

 

Comprendre l'internaute

La compréhension de l'internaute est importante : elle permet de déterminer la manière dont il s'informe, ses attentes et ses besoins. Cette compréhension se fait généralement via une étude de persona.

Pour construire son responsive design dans cette optique, il est judicieux de se mettre à la place de l'internaute en se demandant :

  • Quelle est son intension de recherche ?
  • Quelles informations lui seront vraiment utiles ?
  • Comment est-il possible de faciliter sa compréhension ?

 

Simplifier la mise en page

Un web design « simple » aura plus de chances de devenir responsive. Pour cela, chaque élément qui constitue une page doit être considéré comme un bloc qui viendra s'empiler aux autres lorsque la taille d'écran sera réduite en version mobile.

Pour cela, il est conseillé d'utiliser une base épurée, des feuilles de style simples à modifier ou avoir recours à un framework responsive tel que Bootstrap.

La simplicité de la mise en page passe par :

  • Une même structure utilisée sur l'ensemble des pages.
  • Pas de surcharge visuelle inutile.
  • Des menus courts et bien organisés.

 

Simplifier le code HTML

Toujours dans cette même logique de simplification de la mise en page, il est conseillé d'alléger le code HTML en évitant les positionnements absolus, trop d'imbrications de divs et en plaçant le style dans une feuille CSS à part.

Il est également fortement recommandé d'utiliser le doctype HTML5 et de respecter les normes W3C (World Wide Web Consortium), l'organisme de standardisation chargé d'impulser les technologies compatibles au World Wide Web.

 

Utiliser correctement la balise meta viewport

La balise meta viewport permet de définir les dimensions d'une page web. Elle est importante pour le responsive design car elle permet aux navigateurs de simuler la vraie taille d'une page web dans un écran de téléphone sans altérer sa résolution.

Cette balise se rédige ainsi : <meta name=”viewport” content=”width=device-width, initial-scale=1”>. En raison des différentes tailles d'écran des téléphones mobiles, il est très important d'utiliser cette balise correctement.

 

Utiliser des media queries

Les media queries sont des spécifications des feuilles de style CSS3. Elles permettent d'attribuer automatiquement des règles de CSS selon des conditions particulières.

En responsive design, leur intérêt premier est qu'elles permettent d'adapter automatiquement le web design d'une page à n'importe quelle taille d'écran.

Pour cela, il faut les paramétrer des règles d'affichage des divs selon les différentes tailles d'écran (mobile, tablette et ordinateur). Ces règles se codent à l'aide des préfixes min- et max- et des critères suivant :

  • width qui contrôle la largeur de la zone d'affichage dans le navigateur.
  • height qui contrôle la hauteur de la zone d'affichage dans le navigateur.
  • device-width qui fait référence à la largeur de l'écran de l'appareil.
  • device-height qui fait référence à la hauteur de l'écran de l'appareil.
  • orientation qui permet d'orienter l'affichage selon les modes portrait ou paysage des écrans.
  • aspect-ratio qui permet de définir un ratio entre la largeur et la hauteur de la zone d'affichage (exemple : "16/9" pour un écran 16/9). 

 

Les tailles standards des écrans à prendre en compte sont :

  • De 480 à 720 px pour les téléphones mobiles.
  • De 768 à 900 px pour les tablettes en mode portrait.
  • De 900 à 1024 px pour les tablettes en mode paysage.
  • De 1024 à 1200 px pour un ordinateur fixe ou portable.

 

Adapter l'ergonomie à l'usage mobile

Puisque les internautes et les moteurs de recherche privilégient les téléphones mobiles, il est alors important d'adapter l'ergonomie de son site dans ce sens.

Comme déjà mentionné, il est recommandé de considérer chaque élément comme un bloc et d'organiser les blocs afin qu'ils soient alignés sur une seule et même colonne.

Il est aussi judicieux de prendre en compte les écrans tactiles des téléphones mobiles et des tablettes pour y adapter les éléments et les zones cliquables.

Enfin, il faut faire preuve de vigilance quant à la surcharge des fonctionnalités en version mobile qui, même si elles sont justifiées pour la version bureau, peuvent gêner la lisibilité  et l'expérience de l'utilisateur comme : 

  • Un chat en ligne qui se déclenche automatiquement.
  • Une fenêtre pop-up qui envahit l'écran.
  • Des listes déroulantes de choix qui multiplie les clics à effectuer.

 

Adapter les images

Les images font elles aussi l'objet d'un point de vigilance pour le responsive design. En effet, elles doivent être correctement traitées pour être affichées aussi bien sur des grands comme des petits écrans.

Dans le cas contraire, elles peuvent gêner l'expérience utilisateur et engendrer des défilements d'écran conséquents. Pour éviter ce cas de figure, il est recommandé de prévoir les différents reconditionnements automatiques à l'implémentation des images.

Si le responsive design s'impose à présent comme une nécessité, il faut tout de même avoir conscience de ses limites. Un site internet se doit d'avoir une version mobile fonctionnelle et ergonomique mais faut-il pousser l'optimisation jusqu'aux moindres détails ? La réponse à cette question dépendra des objectifs, de la cible et du budget.

Pour aller plus loin, utilisez cet outil gratuit et évaluez votre site web en quelques secondes pour obtenir des conseils gratuits pour l'améliorer.

Website Grader

 Website Grader

Publication originale le 3 mars 2020, mise à jour le 06 août 2021

Sujet(s):

Création de site internet