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.

>> Découvrez le logiciel CMS gratuit de HubSpot

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.

Comment créer un design responsive ?

Le responsive design est aujourd'hui incontournable, et de nombreux CMS, tel que le CMS gratuit de HubSpot, 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 intention 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 suivants :

  • 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.

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.

Quelle est la différence entre responsive, adaptive et fluid ?

Bien avant le responsive design, d'autres techniques ont été utilisées pour adapter le contenu d'une page web en fonction de l'écran utilisé. L'adaptive design et le fluid design sont d'ailleurs toujours d'actualité, mais il est important de faire la distinction entre ces trois approches.

La technologie du fluid adapte l'affichage en fonction de pourcentages et de proportionnalités selon la résolution de l'écran. Les blocs de contenus, qu'il s'agisse de texte, d'images ou de vidéo, vont alors s'étirer ou rétrécir en fonction de la typologie d'écran de l'appareil. Le fluid design permet ainsi de mettre l'accent sur la flexibilité et la compatibilité entre les différentes tailles d'écran.

Avec l'adaptative design, le site web repère le type d'appareil qui demande à afficher un contenu et le design s'adapte en fonction : iPhone, iPad, ordinateurs portables 14 ou 17 pouces, montre Galaxy, etc. Si l'affichage est plus rapide et l'expérience utilisateur plus agréable, l'adaptative design nécessitant peu d'ajustement lors du téléchargement, cette méthode demande cependant à concevoir une version spécifique pour chaque appareil et de rester en veille sur la sortie des nouveautés sur le marché.

Depuis quelques années, avec la multiplication des appareils qui a rendu complexe la conception de sites pour chaque type de résolution, le responsive design a fait son apparition. Avec cette technique, le contenu du site reste identique, mais est réorganisé en fonction de l'écran utilisé.

Quelles sont les alternatives au responsive design ?

Application

Destinée aux systèmes d'exploitation mobiles comme iOS, Android ou Microsoft, l'application mobile est une solution particulièrement intéressante pour les sites e-commerce. Par rapport à un site dédié au mobile, elle propose une ergonomie plus poussée et une meilleure expérience utilisateur. Les différents OS qui existent sur le marché comportent des langages de programmation permettant des temps de chargement rapides et facilitant la navigation au sein de l'application.

L'application mobile est développée de façon à pouvoir interagir avec les fonctionnalités d'un téléphone, offrant ainsi aux utilisateurs de nombreuses possibilités. Grâce à cette alternative au responsive design, il est possible d'utiliser des notifications pour informer les utilisateurs d'une offre ou d'une mise à jour. L'application mobile se présente aussi comme une solution pratique pour les utilisateurs situés dans une zone hors réseau, car il est possible d'utiliser certaines applications hors connexion, ce qui permet d'accéder en permanence aux contenus.

Le développement d'une application mobile demande des adaptations technologiques selon les systèmes d'exploitation. Le développement sur différentes plateformes peut donc s'avérer coûteux selon les fonctionnalités, prenant également en compte les mises à jour à réaliser pour chaque système d'exploitation mobile. De plus, comme le référencement naturel n'existe pas pour les applications mobiles, l'entreprise devra multiplier les leviers de communication pour développer sa visibilité.

Site web dédié

Le site web dédié au mobile est un site dédié avec un contenu et des fonctionnalités propres à la consultation sur smartphone ou tablette. Ce dispositif est un bon moyen de segmenter son offre en mettant à disposition un contenu exclusif. Par exemple, le contenu peut s'adresser à un profil type d'utilisateur ou à un public spécifique. Un site web dédié peut être mis en ligne pour promouvoir un produit, un service ou un événement particulier.

La structure du site web dédié, son arborescence et les espaces d'interactions seront donc étroitement liés au contenu proposé et à la consultation en mobilité.

Le principal inconvénient du site web dédié au mobile réside dans le référencement naturel par les moteurs de recherche. Le site est en effet hébergé sur une URL différente de celle du site principal. De ce fait, il faudra réaliser deux fois, et de manière différente, les optimisations liées au référencement des pages des deux sites pour éviter d'être confronté à la problématique du duplicate content. Second inconvénient non négligeable : chaque mise à jour faite sur le site principal devra être également faite sur le site web dédié au mobile. La maintenance et le temps alloué à ces mises à jour représentent donc un coût non négligeable.

 

Pour aller plus loin, découvrez le logiciel CMS gratuit de HubSpot et créez un site web responsive et puissant pour votre business.

Pour aller plus loin, découvrez le logiciel CMS gratuit de HubSpot et créez un site web responsive et puissant pour votre business. 

Le logiciel CMS gratuit de HubSpot

Publication originale le Mar 3, 2020 2:40:00 PM, mise à jour le 19 janvier 2023

Sujet(s):

Lancement de site web Créer un site internet gratuitement