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 8 conseils pour réussir cet exercice.
Qu'est-ce que le responsive design ?
Le responsive design est une approche de conception web visant à modifier l'apparence d'un site selon la taille de l'écran et le support utilisé par l'internaute. Une page web et l'ensemble de son contenu s'adaptent alors automatiquement à l'appareil et la lisibilité est ainsi optimisée.
Pourquoi utiliser le design responsive ?
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.
Le responsive design a également l'avantage d'apporter un meilleur confort de navigation, lequel améliore l'expérience 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 2023 montrent la tendance mondiale : plus de 92 % d'internautes se connectent à internet depuis un téléphone mobile. En France, cela représente 41.9 millions de « mobinautes ».
Au 1er juillet 2021, 61 % du trafic mondial provenait des téléphones mobiles. Le responsive design n'est donc plus une option, mais un réel avantage concurrentiel.
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 recherche, 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 ?
- Comprendre l'internaute
- Simplifier la mise en page
- Simplifier le code HTML
- Utiliser correctement la balise meta viewport
- Utiliser des media queries
- Utiliser des grilles flexibles
- Adapter l'ergonomie à l'usage mobile
- Adapter les images
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 8 conseils pour créer un site responsive réussi.
1 - 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 ?
2 - 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.
3 - 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.
4 - 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 le vrai format 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.
5 - Utiliser des media queries
Les media queries, ou requêtes média, 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 quel format d'écran.
Pour cela, il faut les paramétrer des règles d'affichage des divs selon le format 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 à 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.
Exemple de media queries :
@media only screen and (max-width: 768px) {
/* Affichage des colonnes en plein page pour les mobiles */
[class*="col-"] { width: 100%; } @media only screen and (min-width: 768px) {
/* Affichage vertical du menu de navigation pour les mobiles */
a.to.nav {
display: none ; }
.wrapper {
position: relative ;
width: 768px ;
margin: auto ; }
#primery_nav {
position: absolute ;
top: 5px ;
right: 10px ;
background: none ; }
#primery_nav li {
diplay: inline ; }
#primery_nav li a {
float: left ;
border: none ;
padding: 0 10px ;
-webkit-border-radius: 2px ;
-moz-border-radius: 2px ;
border-raidus: 2px ; } } 6 - Utiliser des grilles flexibles
Un site responsive requiert l'utilisation de grilles flexibles. Présentées sous forme de cellules de contenus, ces grilles vont permettre aux éléments qui composent le site, comme le texte et les éléments visuels, de s'ajuster aux écrans utilisés par les internautes. Les gouttières, espacements et tailles de blocs seront automatiquement adaptés au format de l'appareil sur lequel naviguent les utilisateurs et n'auront pas à être codés individuellement pour répondre aux centaines de normes existantes.
7 - 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.
8 - 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.
Comment vérifier si mon site a un design responsive ?
Internet regorge de simulateurs, lesquels sont le plus souvent déployés par les plateformes de création de sites internet ou par les navigateurs eux-mêmes. Généralement gratuits, ces outils en ligne proposent sensiblement les mêmes fonctionnalités et se différencient principalement par le nombre d'appareils qu'ils répertorient.
Google Mobile-Friendly Test
Avec l'outil Mobile-Friendly Test, Google offre la possibilité aux entreprises de visualiser le rendu de leurs sites web sur les écrans de smartphones et tablettes. Ce logiciel a l'avantage d'être facile à utiliser. Il suffit de saisir l'URL du site web dans la barre de recherche avant de sélectionner le bouton « Tester l'URL » qui se trouve en dessous. Google Mobile-Friendly Test se charge ensuite de déterminer si les pages web sont adaptées aux appareils mobiles. En complément, cet outil peut également être utilisé pour aider les créateurs de sites web à optimiser le temps de chargement de leurs pages.
Les simulateurs mobiles de Firefox de Chrome
Firefox et Chrome proposent chacun une extension qui permet de tester un site mobile en ligne, directement depuis leurs navigateurs. Ce type de simulateur est non seulement gratuit, mais également simple à installer. Pour l'activer, il suffit de se rendre sur sa page internet et de cliquer sur « Ajouter à Firefox » ou « Ajouter à Chrome » selon le navigateur choisi. Après avoir ouvert le site web dans un nouvel onglet, il ne reste plus qu'à cliquer sur le simulateur puis sur le bouton « Activer la simulation mobile ». Le site est alors visualisé au format mobile.
Website Planet
Avec le simulateur Website Planet, les créateurs de contenus web peuvent vérifier l'affichage de leur site sur différents appareils, quel que soit leur format d'affichage. Ils peuvent sélectionner un modèle de téléphone, tablette ou ordinateur de façon à vérifier que le site s'affiche de manière optimale sur tous les appareils, mais peuvent également utiliser des résolutions personnalisées.
Pour tester le responsive design de son site sur le simulateur Website Planet, il suffit de :
- Saisir l'adresse l'URL
- Sélectionner l'appareil à utiliser pour obtenir un aperçu du site
- Comparer les résultats d'affichage du site sur les différents appareils mobiles
Piresponsive, le simulateur du logiciel Orson
Orson est un logiciel en ligne spécialisé dans la création de sites internet responsive. Il met à disposition des internautes de nombreux outils tels que Piresponsive, lequel permet de vérifier la compatibilité des pages web sur les modèles d'appareils mobiles les plus répandus. Ce simulateur gratuit ne nécessite aucun abonnement et permet de tester rapidement le caractère responsive de son site.
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.
Fluid design
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.
Adaptive design
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é.
Responsive design
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é.
Le guide pour comprendre les langages HTML et CSS.
Découvrez comment utiliser les langages HTML et CSS pour gérer votre site web efficacement.
- Balises HTML à connaître
- Mettre à jour un fichier CSS
- Les écueils à éviter
- Ressources pédagogiques
Télécharger
Tous les champs sont obligatoires.
Merci d'avoir soumis le formulaire
Cliquez sur le lien pour accéder au contenu en tout temps
Quelles sont les alternatives au responsive design ?
L'application
Avantages
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.
Inconvénients
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é.
Le site web dédié
Avantages
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é.
Inconvénients
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.
