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.

Google Chrome 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).

Opera Mobile Emulator

#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 :


16 commentaires

  1. Pingback: 5 façon de tester son responsive design ...

  2. Il existe aussi dans Internet Explorer le mode mobile, activable soit en appuyant sur F12 et en allant tout en bas des options, soit en faisant Control+Alt+M

  3. Pingback: 5 façon de tester son responsive design ...

  4. Pingback: 5 solutions pour tester l’affichage de vo...

  5. Hello,
    Pour moi cela n’apparaît pas sur Chrome dans les outils développeur… à mon avis il s’agit d’un pluggin… mais lequel ?

  6. Hello,
    Cela ne fonctionne pas avec Chrome, l’option ne semble pas être présente par défaut dans les outils développeur… un pluggin peut être ?

  7. Pingback: 5 solutions pour tester l’affichage de vo...

  8. Setra

    Si, c’est par défaut normalement. En tout cas, je n’ai rien installé. Peut-être un souci de version ?

  9. @byote et @setra Dans outils de développement il faut d’abord cliquer sur « Show Console » dans la liste d’icones en haut à droite (4e à partir de la droite: La flèche avec les 3 barres horizontales) et ensuite cliquer sur Emulation.
    Coté service web il y a le très bon Screenfly aussi http://quirktools.com/screenfly/

  10. Pingback: 5 solutions pour tester l’affichage de vo...

  11. Pingback: Responsive design | Pearltrees

  12. Pingback: Marion Bouvier (marionbouvier) | Pearltrees

  13. Pingback: 5 façon de tester son responsive design ...

Send this to friend

Lire les articles précédents :
hebdo des apps
L’Hebdo des Apps avec Appdays

Retrouvez ici chaque vendredi une sélection d'actualités et d’immanquables de la semaine autour des applications mobiles.

Fermer