Ҫa y est ! Votre site est en ligne et vous êtes impatient de le partager avec vos proches.
Vous dégainez votre smartphone pour leur montrer le fruit de votre travail et c’est la douche froide : le site n’est absolument pas responsive !
Immédiatement votre pouls s’accélère, la sueur perle sur votre front, et vous imaginez déjà les heures à passer à ajuster le design…
Pas de panique ! Nous allons voir quelques notions essentielles qui vous aideront dans cette étape.
Avertissement : Il m’est difficile de fournir un « how to » détaillé, car si les fonctionnalités sont très souvent similaires, leur emplacement et appellation varient en fonction du thème que vous utilisez (j’utilise le thème Divi pour les captures d’écran).
Tout d’abord, qu’est-ce que le responsive design ?
Le responsive design consiste à concevoir des sites internet qui s’adaptent à différents types d’appareils (ordinateurs, tablettes, smartphones).
- 92 % des utilisateurs de smartphones utilisent leur appareil pour effectuer des recherches en ligne et des achats (source : Google)
- Plus de 95 % des utilisateurs accèdent à leurs réseaux sociaux (Facebook, Instagram, LinkedIn etc…) via leur smartphone
En 2025, il est impossible de concevoir ou conserver un site web qui ne serait pas optimisé pour la navigation sur les appareils mobiles.
Vous perdriez de nombreux prospects potentiels et seriez très mal référencés sur les moteurs de recherche.
Voyons ensemble quelques pistes simples pour améliorer l’apparence de votre site web sur tous types d’écrans.
1. Taille de la police
Sur un smartphone, il est courant de définir une taille de police plus petite que celle de la version pour ordinateur.
Que vous utilisiez l’unité « rem » (root em) ou « px » (pixels), il sera souvent nécessaire d’ajuster la taille de la police ainsi que l’espacement des interlignes.
Dans Divi, nous pouvons définir des réglages différents pour un élément en fonction du support utilisé par l’internaute.
Ci-contre, nous pouvons ajuster la taille de la police en sélectionnant l’icone « smartphone ».
2. Gestion des espaces
Il est nécessaire de vérifier visuellement les marges internes et externes sur un écran plus petit.
Si vous avez utilisé les unités %, vh ou vw, il vous suffit de réajuster les proportions de vos éléments par raport à l’écran.
Dans l’exemple ci-dessous, le formulaire est réglé pour occuper 60% de l’écran dans la version ordinateur et 90% de l’écran en version smartphone.
Les marges internes ont en revanche été définies avec des pixels (30px). Leurs valeurs doivent être réduites à 15px en version mobile pour que l’ensemble soit cohérent.
L’illustration ci-dessous montre :
- la version ordinateur
- la version smartphone sans travail préalable
- la même version après le travail de mise à l’échelle fait manuellement
3. Le problème des colonnes
En version mobile, les colonnes vont se superposer. Il faudra alors vérifier l’espace entre les éléments afin qu’ils ne soient pas « collés » les uns aux autres.
Vous devrez aussi peut-être inverser le sens des colonnes si vous alternez des textes et des images comme illustré ci-dessous. La version Mobile A par défaut doit être travaillée afin d’obtenir la version Mobile B, plus adéquate.
Si vous utilisez Elementor, il est très simple d’agir sur le sens et l’ordre des colonnes grâce aux flexbox.
Dans d’autres cas, il faudra accéder aux réglages avancés de votre thème pour dénicher l’option qui vous permettra d’inverser l’odre des colonnes. Plus rarement, cela nécessitera quelques lignes de CSS qui dépendront de l’effet souhaité.
4. Images et illustrations
4.1 Masquer les éléments superflus
Vous les avez sélectionnés avec soin et pourtant, vous vous en passerez en version smartphone si (et seulement si !) ils n’apportent pas d’information concrète à votre contenu.
En effet, les images d’illustration pour apportent du style à votre page web en version ordinateur, mais prennent trop de place sur un écran de mobile.
Ce petit espace doit concentrer l’essentiel.
4.2 Ajuster la taille
WordPress génère automatiquement plusieurs formats de vos images lorsque vous les chargez dans la médiathèque. Le logiciel sélectionnera ainsi la taille d’image la mieux adaptée pour la version mobile de votre site.
Mais malgré cette première sélection, il est possible qu’un petit réajustement soit nécessaire.
Vérifiez soigneusement chaque visuel.
4.3 Repositionner si nécessaire
Si vous avez abusé de la fonction « transformer » en version ordinateur, il est probable que des décalages importants entre les éléments rendent l’ensemble dysharmonieux sur mobile.
Rectifiez en centrant les images pour redonner élégance et fluidité à votre contenu.
5. Prendre en compte les interfaces tactiles
5.1 Les éléments interactifs (boutons, liens, menus)
Ils doivent être facilement :
- visibles
- accessibles
- cliquables
Evitez, par exemple, d’aligner deux boutons et superposez-les avec un espace suffisant entre les deux.
5.2 Les effets de survol
Anticipez, dès la conception du site, le fait que le mobinaute n’ait pas de souris.
En navigation mobile, les effets doivent apparaître au clic et non au survol (changement de couleur, animation, agrandissement… ). Ainsi l’internaute saura qu’il active une fonctionnalité.
6. La méthode « mobile first »
En général, nous construisons un site en version « ordinateur » puis nous l’adaptons aux écrans de tablettes et mobiles. Au contraire, le mobile first consiste à concevoir le site d’abord en version mobile, puis à l’adapter dans un deuxième temps aux écrans d’ordinateur.
Cette pratique récente est née suite au « mobile indexing » de Google.
En effet, depuis 2019, Google analyse et indexe les pages web en version « mobile » pour établir son classement des résultats de recherche. Ainsi certains concepteurs de site, de plus en plus nombreux, considèrent pertinent de travailler en « mobile first ».
7. Les points de rupture (ou breakpoints)
Les points de rupture sont des limites de largeur d’écran. Quand cette limite est franchie, l’apparence de votre site change.
Par exemple, l’affichage de votre menu sur ordinateur devient plus petit et compact sur smartphone. Il apparaît alors sous forme de points ou traits alignés verticalement : le menu « hamburger ».
En réalité, tout dépend des points de ruptures, exprimés en px, définis par votre thème.
Voici par exemple les points de rupture par défaut de Divi :
- Moins de 480px : smartphones
- de 320px à 768px : smartphones et petites tablettes
- de 768px à 980px : tablettes
- de 980px à 1100px : grandes tablettes ou ordinateurs portables
- de 1100px à 1405px : ordinateurs de bureau
- plus de 1405px : grands écrans de bureau
8. Erreurs courantes à éviter
8.1 Négliger les tests sur un maximum de supports
Dès que vous en aurez l’occasion, visualisez le rendu de votre site sur des ordinateurs, tablettes et smartphones de tailles différentes, en format portrait et paysage pour ces derniers.
Affinez ensuite vos réglages et vérifiez encore, jusqu’à obtenir un résultat suffisamment abouti (sinon impeccable !) sur chaque support.
8.2 Oublier de prendre en compte le mode de navigation des mobinautes
Ce point a déjà été abordé plus haut (voir section 5.2) mais son importance est cruciale.
En ne prenant pas suffisamment en compte la navigation sans souris, vous risquez :
- d’offrir une mauvaise expérience utilisateur aux mobinautes, augmentant ainsi le taux de rebond
- de proposer une navigation difficile et frustrer vos visiteurs si vous ne misez que sur les effets de survol
- de perdre des opportunités de convertir en n’encourageant pas les mobinautes à passer à l’action ou à revenir sur votre site
En conclusion
Un site web doit être adapté sur tous les supports. Ce travail peut vous sembler fastidieux mais il est absolument nécessaire. Permettre au visiteur de profiter d’une expérience agréable et fluide sur votre site web, quel que soit l’appareil utilisé, renforce une image positive de votre entreprise.
Si vous rencontrez des difficultés pour adapter l’apparence de certains éléments en responsive, n’hésitez pas à me contacter, je me ferai un plaisir de vous aider !
