Le responsive design, c'est adapter son site web à différentes tailles d'écrans : smartphones, tablettes, ordinateur, etc.

Généralement, quand on développe un site web (sauf les fous), on le fait sur un ordinateur. Au fur et à mesure de la création, on vérifie le travail effectué dans un navigateur web (Chrome, Firefox, ...). Le problème, dans le cadre du responsive design, c'est que ce navigateur a la taille d'un écran d'ordinateur. Comment faire alors pour voir le rendu du site sur un terminal mobile?

On peut bien sûr redimensionner la fenêtre du navigateur pour avoir une largeur équivalence à celle d'un terminal mobile. Mais c'est un peu crado...

On peut également mettre en ligne le site et y accéder depuis son smartphone ou sa tablette. Mais une mise en production pour ça, c'est — 1 — affreux et — 2 — pas le plus pratique pour ajuster son code.

Heureusement, les grosses têtes derrière les navigateurs ont tout prévu ! Il est possible, directement depuis Chrome ou Firefox (et autres, j'ai pas testé) d'émuler un terminal mobile.

Emuler un terminal mobile

Dans ma démonstration, je vais utiliser Chrome.

Si vous touchez un peu au développement web, vous savez surement qu'il y a des outils pour les développeurs intégrés aux navigateurs (appelés Outils de développement, fou!) qui permettent de modifier directement le code source d'une page web, de lancer des commandes Javascript, de vérifier les appels réseaux, etc.

Les outils de développement dans Chrome

L'émulation de terminal mobile fait parti de ces outils. Pour y accéder, rien de plus simple. Lancez le panneau des outils de développement (cmd + alt + i sous Mac. Les Windowseurs, démerdez-vous) et suivez les étapes suivantes :

La liste déroulante "Device" permet d'accéder à une liste pas trop dégueu de terminaux mobiles (smartphones et tablettes). En cliquant sur le bouton "Emulate", le navigateur prend la forme (la taille d'écran et le type de navigateur) du terminal choisi. Tada!

C'est aussi facile que ça.