5 solutions pour tester l’affichage de votre site sur les appareils mobiles
Découvrez 5 façons simples pour visualiser l’affichage de votre site web sur les terminaux mobiles, smartphones et les tablettes.
Actuellement, il est tout simplement inconcevable, dans le cadre d’un projet, de ne pas penser à l’expérience utilisateur sur mobile. Dans un précédent article, nous avons évoqué les différentes manières d’adapter son site web à ces terminaux : un site web mobile à part, un site dynamique qui affiche des contenus différents selon la plateforme ou le responsive design (des éléments statiques qui s’adaptent en fonction de la taille de l’écran).
Jusqu’à preuve du contraire, le responsive design semble être la solution la moins dangereuse (notamment vis-à-vis de Google) et celle-ci est même encouragée par Google.
Si vous avez choisi cette approche (ou même les autres), il est préférable de tester en parallèle l’affichage sur les mobiles et les tablettes dès les premières étapes du développement (donc, même lorsque le site web est encore hébergé dans le « localhost »), afin d’éviter les surprises.
Pour réaliser ces tests, ce ne sont pas les solutions qui manquent, certaines étant plus efficaces que d’autres – notamment, des services web qui n’affichent pas les sites hébergés en local ou qui manquent de « réalisme ».
Ce que je propose, c’est une liste non exhaustive de solutions qui vous permettront de vérifier cet affichage.
#1 Redimensionner le navigateur
Aussi simple que ça puisse paraitre, cela devrait fonctionner (mais pas à 100%). Si votre site répond bien aux redimensionnements de votre navigateur web, c’est déjà un bon signe. Actuellement, la plupart des nouveaux thèmes WordPress s’adaptent instantanément.
#2 L’émulateur de Google Chrome
Dans ses outils de développement, le navigateur de Google propose une fonctionnalité qui émule les tailles d’écran de différents smartphones et tablettes. Pour essayer, il vous suffit d’aller dans le menu > Outils > Outils de Développement et de cliquer sur l’onglet Emulation.
#3 L’émulateur de Firefox
Le navigateur de Mozilla propose une fonctionnalité similaire à celle de Google Chrome. Il suffit d’aller dans le menu > Développement et de cocher la case vue adaptative.
#4 L’émulateur d’Opera Mobile
Pour les développeurs, Opera propose également un émulateur d’Opera Mobile. Outre la visualisation de l’affichage de votre site sur ce navigateur populaire, le petit logiciel permet également de voir comment le site apparaît à côté des éléments du navigateur ou lorsque l’utilisateur saisi quelque chose (donc, lorsque le clavier apparaît).
#5 Les services web
En plus des émulateurs (qui peuvent s’avérer plus pratiques à partir d’un moment), il existe aussi de nombreux services web qui vous permettent de tester rapidement l’affichage de votre site. Certains ont été évoqués dans ces précédents articles :
