Si tu as pour projet de créer ton site internet pro, tu as certainement entendu dire qu’il fallait absolument faire un site responsive, sans forcément savoir exactement de quoi il s’agit, ni comment y parvenir…
(Et si tu n’en as jamais entendu parler, reste lire les quelques paragraphes qui suivent, promis je vais faire en sorte de ne pas être trop ennuyeuse !)
C'est quoi le responsive ?
Le responsive design (que l’on appelle aussi parfois “site web reactif”) est une approche popularisée en 2010 et introduite par l’adoption des “media queries” par le W3C (World Wide Web Consortium) lors de cette même année.
Je te passe les détails techniques mais c’est l’idée que les sites et applications web doivent s’adapter à l’environnement dans lequel ils sont vus. Autrement dit, qu’un site/app soit consultable et utilisable sur toutes les tailles et résolution d’écrans.
Par exemple :
- Un menu horizontal qui devient un menu déroulant sur mobile
- Des images qui se redimensionnent
- Des marges qui s’adaptent à l’écran…
Mais si WordPress et les constructeurs de page te facilitent la tâche, ils ne font pas tout et il va falloir que tu penses au responsive dès la conception de ton site.
1. Utiliser des "break points" (points de rupture).
Savoir à quel moment tu dois adapter le design et la mise en forme de tes pages à une tablette ou un mobile, ne se fait pas au hasard.
Des conventions sont apparues au fil des années en fonction des résolutions d’écran courantes et des appareils les plus populaires (smartphones, tablettes, ordinateurs).
Les développeurs se sont donc basés sur l’utilisation majoritaire de certains formats d’écran pour créer des points de rupture “standards” mesurés en pixels :
- 320px : Smartphones (anciennes générations avec petits écrans).
- 640px : Smartphones (récents).
- 768px : Tablettes (tailles moyennes).
- 1024px : Écrans d’ordinateurs portables ou tablettes en mode paysage.
- 1200px et plus : Ordinateurs de bureau (écrans larges).
On se détend, tu ne peux pas espérer avoir un site parfait sur 100% des écrans existants aujourd’hui.
Chaque constructeur a sa norme, si on ajoute à cela les tablettes/mobiles au format paysage et les écrans larges… OMG! Sans parler des différents navigateurs qui impactent aussi tes pages.
Ta to-do:
- Choisis 4 à 5 points de rupture qui te permettront le meilleur affichage sur une majorité d’écrans
- Définis une largeur de contenu maximale (généralement entre 1140 et 1200px).
2. Optimiser la vitesse de chargement de tes pages.
Au-delà du format d’écran, on n’utilise pas un site web de la même façon :
- sur un ordinateur portable tranquillement installé dans son canapé
- sur mobile (dans le bus, par exemple).
En France, le débit “fibre” est entre 450 et 600Mb/s.
C’est 10 fois plus que la 4G.
Je n’ai pas de statistiques récentes sur la patience des gens devant une page de site qui met trop de temps à charger mais tu saisis l’idée…
Le responsive, c’est aussi prendre en compte :
- la navigation (cohérence, facilité, efficacité)
- la vitesse de chargement
- donc le volume de données.
C’est d’ailleurs pour cela que les outils de test de performances, comme Google Page Speed, proposent 2 évaluations distinctes en simulant des conditions de navigation réelles : desktop et mobile.
Si tu as déjà un site, fais le test, tu pourrais être surpris de l’écart de performances entre ces 2 versions de ton site.
Sur le mien, les résultats sont assez proches (et très bons) quel que soit l’appareil.
Si tu veux en savoir plus sur les tests à faire sur ton site avant sa mise en ligne, tu peux consulter mon article “5 outils pour tester ton site“.
Une page de vente de 20 000 mots c’est pénible sur desktop, sur mobile c’est encore pire. Pareil pour les 36 images/illustrations par page.
Tes visiteurs n’ont pas envie de scroller pendant 5mn avant de trouver l’info qui les intéresse.
Ta to-do :
- Pour chacune de tes pages, priorise tes contenus essentiels et les mettre en valeur.
- Masque certaines images si elles n’ont pas une grande valeur ajoutée
- Utilise des ancres pour faciliter la navigation, si besoin
3. Utilise des images adaptées aux différents formats d'écrans.
Et optimisées au format NextGen.
En 2024, les images représentent 40 à 70% du poids total d’une page web.
(Source : httparchive.org)
Oui, je me répète, mais tu dois toujours optimiser tes images sur ton site et plus particulièrement sur la version mobile. Je t’explique ici : “guide complet : comment bien utiliser les images sur ton site web“.
Mais ce n’est pas tout !
Une image utilisée en plein écran pour ton hero sur desktop ne sera pas adaptée à une vue sur mobile, tant par son format (paysage vs portrait) que par ses dimensions/poids.
De plus, une image en 2 000px de large sur un mobile, ça ne sert à rien et ça ralentit ton site, surtout si elle n’est pas optimisée.
Ta to-do :
- Option 1 : Choisir et optimiser en WebP une image avec beaucoup d’espace autour de ton sujet principal pour pouvoir la recadrer et l’utiliser pour la version mobile de ton site
- Option 2 : Choisir une seconde image au format portrait et de plus petites dimensions (500x700px est un bon compromis) pour la version mobile. Tu amélioreras à la fois ton design et la vitesse de chargement de ta page.
4. Ne néglige pas les polices.
Pour le corps de texte, c’est 16px minimum.
Pour les titres, tu peux être créative : 24, 48 ou même 60px, ça le fait.
Mais pas sur mobile !
Ta police doit, elle aussi, s’adapter à ton écran.
Sinon, tu vas avoir des coupures de mots et des sauts de lignes intempestifs…
Et ça, si tu veux avoir un bon site sur mobile, c’est no way.
Ta to-do :
- Utilise des tailles de polices adaptées aux différents formats d’écran.
- Auto-héberge tes polices sur ton serveur, cela évitera d’envoyer des requêtes pour les télécharger (sur les serveurs de Google Fonts par exemple).
5. Utiliser le flexbox.
La plupart des constructeurs de page intègrent désormais les containers Flexbox, et c’est un game changer pour le responsive.
Grâce à lui, tu peux définir direction, sens, alignement, très simplement et pour chacun des écrans que tu auras défini avec tes points de rupture.
Le flexbox peut sembler compliquer au premier abord, mais je t’ai préparé des visuels pour te présenter ses principes.
6. Faire un site responsive, c'est bien. Faire un site "fluide", c'est encore mieux !
Tu l’as compris, avec les breakpoints, les mêmes paramètres sont appliqués à tous les écrans d’un même intervalle. Ton responsive sera en “escaliers”.
Surtout si tu as choisi peu de valeurs, par exemple 320px pour les Smartphones, 768px pour les tablettes et 1200px pour les ordinateurs, ton affichage sera le même que l’appareil fasse 320 ou 767px…
Mais il est possible de faire mieux (sans définir des dizaines de points de rupture).
Ta to-do :
- Choisir des unités “fluides” ou “relatives” : em, rem, %, vh, vw plutôt que des pixels.
- Utiliser la fonction CSS “Clamp” qui calcule la taille d’un élément (espace, marge, texte) entre deux valeurs (mini/maxi), qu’elles soient en px, % ou rem.
Si le sujet t’intéresse, n’hésite pas à venir en discuter sur Insta !
Conclusion
Faire un site responsive n’est pas très difficile si tu as le bon réflexe : te mettre à la place de l’utilisateur !
Ton site doit pouvoir être utilisé en toutes circonstances, par tous les utilisateurs et sur n’importe quel appareil (ou presque).
Écrans, temps de chargement, affichage… Plein de petits détails qui ont leur importance !
Et si tu ne te sens pas de créer ton site par toi-même, n’hésite pas à venir me parler de ton projet.
