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 avez tous les formats de tablettes et de téléphone, un iPhone 5 et un iPhone X n’ont rien à voir.
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.

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 iPhone5 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 deux que j’utilise pour tester la version mobile des sites que je conçois.

Tester l’affichage sur mobile avec Un outil en ligne

Il existe de nombreux outils en ligne pour tester l’affichage sur mobile, comme celui-ci.
Et gratuit (c’est ça qu’on aime).

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éentes tailles d’écran en même temps. Vous pouvez parcourir toutes les pages et voir comment ça s’affiche.

tester l'affichage mobile avec resizer

prévisualiser 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 (ou clic droit / examiner).

Cliquez sur le petit icône qui représente une tablette et un téléphone.

 

Votre page s’affiche alors en version mobile. Vous pouvez voir en direct si tout s’affiche correctement, ou s’il vous faudra apporter quelques modifications.

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.

.

 

L’affichage sur mobile est un peu plus compliqué à prévoir : tous les éléments doivent s’afficher sur une surface minuscule, en restant lisibles et pratiques pour l’utilisateur.

En utilisant ces outils pour tester l’affichage mobile, vous pourrez éviter la plupart des bugs d’affichage.

 

crééer site internet soi même coach

Créer son site internet

soi-même

a propos - creation de site internet à dijon

Hello !

Je suis Morgane,

Je vous aide à créer votre site web.

ebook créer son site web 1

E-books offerts

4 ressources gratuites
à télécharger

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

Avez-vous pensé à lire aussi ces articles ?

Écrire les textes de son site internet : 10 conseils

Écrire les textes de son site internet : 10 conseils

Vous avez peut être remarqué, (et vous faites sans doute pareil!) : les lecteurs et lectrices d'un site internet ne sont pas DU TOUT plongés dans la lecture vos textes comme on pourrait l'être dans Harry Potter.  C'est même tout simplement l'inverse. Ils sont aussi...

découvrez

Les templates

Un site internet pré-conçu à personnaliser soi-même.

crééer site internet soi même coach