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.