Tester l’affichage sur mobile de son site

Creation de site internet

Lorsque vous allez créer votre site internet, vous voudrez forcément tester l’affichage sur mobile, pour vous assurer que vos visiteurs auront la meilleure expérience possible quel que soit le support.

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.

Tester son site mobile en ligne

Il existe de nombreux outils en ligne pour tester l’affichage sur mobile, comme Am I responsive ou Responsive Viewer.

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.

tester l'affichage mobile de son site internet

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.

tester affichage mobile site internet avec inspecteur

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.

inspecteur chrome pour tester affichage mobile de son site web

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.

 

tester affichage mobile site internet avec inspecteur

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

tester la version mobile de son site internet extension chrome<br />
L’affichage sur mobile est un peu compliqué à prévoir : tous les éléments doivent s’afficher sur une surface minuscule, au format portrait, tout en restant lisibles et pratiques pour l’utilisateur.

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 !

 

a propos - creation de site internet à dijon

Hello !

Je suis Morgane,

Je crée des sites web audacieux pour les entrepreneures créatives.

ebook créer son site web 1

E-books offerts

4 ressources gratuites
à télécharger

exemple site internet hypnotherapeute

Améliorer son site

en une journée

ebooks offerts

Mes meilleurs conseils pour votre site web

Lequel pourrait vous aider?

ebook créer son site web 1

30 étapes

Créer son site internet soi-même

ebook créer son site web 1

18 conseils

Créer un portfolio de photographe

ebook créer son site web 1

10 astuces

Améliorer son site internet rapidement

Réservez

Une journée VIP

Une journée complète pour travailler sur votre site WordPress

crééer site internet soi même coach

avant de partir

Avez-vous pensé à lire ces articles?

Utiliser les modèles Divi pour créer un site web plus vite

Utiliser les modèles Divi pour créer un site web plus vite

L’un des grands avantages de Divi, c’est son incroyable catalogue de modèles de sites web. Lorsque Divi est installé sur votre site internet Wordpress, vous avez un accès direct à plus de 2000 modèles de pages. Et ces templates Divi sont tous gratuits, sans aucun...