Le responsive dans nos navigateurs

Les outils pour le responsive design

Développer un site internet pour ordinateurs, tablettes, smartphones, etc... revient à imaginer un gabarit qui s'adapterait à tous les appareils ci-dessous :

Crédit Bad frost https://www.flickr.com/photos/brad_frost/7387824246

En l'état actuel des choses, tester son site sur toutes ces machines serait évidemment la meilleure chose à faire pour être sûr que son site s’adapte et fonctionne partout. Cela étant, deux problématiques s'imposent, il faut tout d'abord posséder tous ces appareils (€++) et il faut pouvoir mettre en place des batteries de tests automatisés. Une autre solution serait de passer par des simulateurs (iOS pour Mac, Windows Phone pour Windows 7/8), ou encore utiliser nos bon vieux navigateurs et leurs outils de développement dédiés. C'est sur ces derniers que je m'attarderai dans cet article.

Vue adaptative

Firefox embarque un outil simple mais efficace : la vue adapative

Accessible par les outils de développeurs ou par le raccourci clavier (cmd + shift + maj ou ctrl + shift + m), cet outil se présente sous la forme de 4 fonctionnalités principales :

• Simuler la résolution souhaitée (Largeur x hauteur).
• Alterner entre la vue portrait et paysage.
• Prendre une capture d'écran de la zone de contenu.
• Simuler les événements tactiles

Enfin, il est également possible de visualiser et inspecter les différentes médias queries au sein de son éditeur de style intégré.

Device Mode & Mobile Emulation

Selon moi, Chrome possède actuellement les meilleurs outils de développement.

Tout comme Firefox, cet outil permet de tester son site sur n'importe quelle résolution, et gère également les différents breakpoints. Le navigateur propose en plus une liste prédéfinie d’appareils, associés à leurs résolutions mais aussi à leurs User Agent, ce qui peut-être très utile pour les sites mobiles accessibles sur un sous-domaine m.example.com.

Mais là ou ça devient réellement intéressant, c'est la capacité de simuler un accès internet optimal voir dégradé grâce à l'option network. On peut donc passer d'une connexion 30 mbit/s à du GPRS 50kbit/s, fonctionnalité très pertinente aux vues des pratiques actuelles qui ne sont pas du tout orientées "mobile first".

Opera Mobile Classic Emulator

Opera est lui basé sur le moteur Blink. Il dispose néanmoins d'outils bien moins complets que ceux de Chrome, toutefois, il est possible de télécharger un logiciel permettant de pousser un peu plus ses tests.

Il est également possible de modifier la résolution, le User Agent et la densité de pixels (dpi). Une liste de profils des appareils les plus communs est accessible depuis cette interface. Moyennant quelques difficultés, il est également possible d'associer ce logiciel avec Opera Dragonfly (Outils de développement Opera). Une fois ces quelques manipulations réalisées, on obtient un outil plutôt intéressant pour réaliser des tests d'intégration.

F12 Émulation

Safari étant le parent pauvre dans ce domaine, terminont notre tour d'horizon des navigateurs par Internet Explorer et son F12

Microsoft présente un outil très complet qui n'a rien à envier aux outils de ses concurrents.

• Possibilité d’émuler différentes tailles et résolutions d’écran.
• Manipulation du User agent.
• Simulation des événements touch
• Gestion des orientations (portrait et paysage).

On notera toutefois une option un peu plus poussé sur la géolocalisation. Il suffit de renseigner les champs avec les coordonnées GPS souhaitées afin de simuler une géolocalisation.

Le mot de la fin

Ces outils sont parfaits pour débugger pendant la phase de développement. Toutefois, Il est vivement conseillé de procéder à la manipulation de son site sur de véritable smartphones et tablettes. Les événements touch sont bien différents du click de nos machines, et l’expérience apportée par un test en condition réelle est de loin la solution la plus efficace.