Trucs & Astuces

Tester un site mobile ou responsive design sur PC, c’est facile !

afficher-site-mobile-sur-pc

Lorsqu’on a la responsabilité opérationnelle d’une création ou d’une refonte de site internet, on passe forcément par la case « recette ». La recette, c’est réaliser des scénarios de navigation pour tester un site internet et identifier les éventuels bugs qui pourraient intervenir.

Avec l’avènement du mobile, les sites responsive design sont devenus la norme. Un site responsive design est un site qui s’adapte au device de l’utilisateur: pc, tablette, smartphone (ou téléphone intelligent, comme diraient les Québécois). Ainsi, lorsqu’on effectue une recette d’un site de vente en ligne, il est désormais indispensable de tester la version responsive de celui-ci.

Cependant, recetter un site depuis son téléphone, c’est galère (et je suis sûr que tous ceux qui sont passés par là acquiesceront vivement). Surtout lorsque votre agence vous demande des captures d’écrans des différents problèmes que vous avez pu détecter. En effet, il faut faire une capture d’écran du bug identifié et se l’envoyer par e-mail, surtout si notre outil de ticketing qui date de Mathusalem n’est pas du tout adapté à un device mobile.

Mais alors, comment tester un site responsive design sur PC ? Comment peut-on facilement avoir accès à une version mobile de son site responsive depuis un desktop ? Je rédige aujourd’hui cette rapide brève pour vous liver la réponse.

tester-site-responsive-sur-pc-site-mobile

Tester le responsive design d’un site dans son navigateur sur PC, c’est possible !

Lorsqu’on travaille dans le domaine du marketing digital, on utilise généralement les navigateurs Firefox ou Chrome. Ces deux navigateurs ont l’avantage d’être généralement plus rapide et disposent d’un parc d’extensions qui permettent d’agrémenter notre navigation.

Je vous monterai ainsi la technique pour tester le responsive design d’un site depuis ces deux navigateurs. Vous allez voir, c’est vraiment très simple ! Pourquoi ? Parce que Google Chrome et Mozilla Firefox ont tous les deux intégrés un émulateur, c’est à dire un outil qui permet de substituer une interface dans une autre interface. En français, ça veut dire que vous pouvez simuler l’utilisation d’une interface mobile dans votre navigateur PC.

Et pour accéder à cet émulateur, il suffit de faire la manipulation suivante:

L’émulateur de Google Chrome

Pour Google Chrome, la manière la plus simple de simuler une interface mobile sur son PC, c’est de passer par le chemin suivant:

menu > Outils > Outils de Développement

Pour les amateurs de raccourcis clavier, il suffit de taper Ctrl + Maj+ i pour y accéder.

Une fois cette interface ouverte, il vous suffira de cliquer sur l’icône « Responsive » et de choisir le format que vous souhaitez tester:

tester-site-mobile-sur-pc

 

L’émulateur de Firefox

Pour le navigateur Firefox, la manip est encore plus simple car il suffit de cliquer sur:

menu > Développement web > Vue adaptative

Encore une fois, pour les amateurs de raccourcis, il faut taper Ctrl + Maj+ m

En cochant cette case, vous pourrez tester un site responsive design sur PC et simuler plusieurs modèles en quelques clics seulement.

tester-site-responsive-navigateur-pc

 

Tester un site mobile ou responsive design sur PC, c’est facile !
Moyenne de 4.4 pour 56 votes

A propos de l'auteur

Sébastien BLERIOT

Evoluant en e-commerce depuis plus de 7 ans maintenant, j'ai profité de mes différentes expériences chez Rueducommerce et Next Interactive (BFM TV, RMC, 01net) et ELEGIA Formation pour développer mon expertise de la vente en ligne en B to C et B to B.
J'accompagne régulièrement des e-commerçants dans l'optimisation de leur stratégie e-commerce.

2 commentaires

  • Cela ne concerne pas les tests utilisateur, type Userlynx ou Usertest ?
    En gros, ce n’est que de la simulation, mais pas réel.
    Merci pour l’article, mais les émulations ont rapidement leurs limites

Laisser un commentaire