Si vous arrivez sur une page qui s’affiche mal, qui vous demande de zoomer ou de scroller sur les cotés, il est bien possible que … vous fermiez tout simplement cette page.
Pensez donc bien au responsive !
Que veut dire le terme responsive?
Votre site doit être responsive c’est-à-dire qu’il doit s’afficher correctement sur tous les écrans.
Et c’est très vaste!
Déjà à cause des innombrables tailles d’écran d’ordinateurs : des tout petits MacBook aux grands écrans de PC de bureau, on multiplie déjà la surface par 3 et on change complètement le ratio.
Ensuite vous devez prendre en compte tous les formats de tablettes et de téléphone disponibles.
Un iPhone 5 et un smartphone récent n’ont rien à voir, la taille de l’écran a presque doublé en quelques années…
Il faut donc modifier le contenu, mais aussi l’affichage. Vous devez souvent supprimer certains éléments purement décoratifs pour les utilisateurs mobiles, qui préfèrent accéder directement à l’information.
Et pensez aussi à certaines zones où le réseau mobile est faible. Vous pouvez supprimer les images volumineuses et les vidéos pour accélérer le temps de chargement en 4G ou en 3G.
La version mobile devrait être un peu « épurée », avec beaucoup d’espaces vides et de zones libres pour éviter les erreurs de clics.
Mais comment tester l’affichage sur tous ces supports mobiles?
Les développeurs ont-ils tous un placard rempli à ras bord de tablettes et de smartphones tombés du camion ?
Non. Oubliez ça, j’ai seulement un vieil iPhone et il est cassé (vous pouvez voir ses prouesses en stories bancales sur Instagram)
Vous avez beaucoup de possibilités mais je vous présente les 3 que j’utilise pour tester la version mobile des sites que je conçois.
Sur le même thème :
Créer la version mobile de son site internet avec Divi
Tester son site mobile en ligne
Rien de plus simple, vous voyez à l’écran 3 autres écrans (c’est une inception d’écrans) :
- Un ordinateur portable
- Une tablette
- Un smartphone
Vous entrez l’adresse de votre site, et il s’affiche sur différentes tailles d’écran en même temps. Vous pouvez parcourir toutes les pages et voir comment ça s’affiche.
Prévisualiser l’affichage mobile directement dans le navigateur
Autre solution, passer directement par les outils de développement du navigateur :
Rendez-vous sur votre site, sur la page que vous voulez vérifier.
Ouvrez les outils de développement avec :
- F12
- ou clic-droit/inspecter.
Cliquez sur la petite icône qui représente une tablette et un téléphone.
La page s’affiche alors en version mobile.
Vous pouvez voir en direct si tout s’affiche correctement, ou s’il faut modifier la disposition.
Vous pouvez aussi utiliser le menu déroulant pour choisir entre différents appareils, ou créer un modèle personnalisé en ajoutant ses dimensions en pixels.
Installer une extension pour tester son site sur mobile
Des extensions permettent aussi de tester son site sur mobile avec Google Chrome ou Firefox.
Rendez-vous sur le Chrome Web Store ou dans le catalogue d’extensions Firefox.
Vous y trouverez des simulateurs de mobiles, comme Web Mobile First (qui est français) ou Responsive Viewer.
Épinglez l’extension dans votre navigateur, et cliquez sur l’icône lorsque vous parcourez les pages de votre site, pour visualiser la version mobile directement depuis votre ordinateur.
Vous aurez accès à toute une collection de smartphones de différentes marques et différentes tailles, des tablettes, des MacBooks et même des Apple Watch.
Mais ne zappez pas cette étape!
Vos visiteurs utiliseront majoritairement leur smartphone pour visiter votre site.
Ce qu’il faut vérifier en priorité :
- Pensez à laisser assez de place autour des boutons, pour que vos visiteurs puissent cliquer facilement sans cliquer accidentellement sur autre chose.
- Vérifiez que tout est lisible, et que la police est suffisamment grosse.
- Regardez si tout est bien aligné, et si aucun élément ne chevauche un autre.
Si vous avez besoin d’aide pour cette partie, n’hésitez pas à réserver une journée VIP avec moi !
