Responsive web design : les clés pour bien commencer Se procurer les outils pour tester les zones de visualisation
Exemples de responsive web design
Il faudrait configurer plusieurs machines afin de tester vos sites réactifs et ceux des autres pour tous les appareils et tous les écrans. Bien que rien ne remplace la réalité, la plupart des tests peuvent s'effectuer en redimensionnant simplement la fenêtre du navigateur. Pour aller plus loin, il existe un grand nombre de plugins tiers, d'extensions de navigateurs qui affichent la taille de la fenêtre ou de la zone de visualisation en pixels, ou bien passent automatiquement la fenêtre ou la zone de visualisation courante à une taille d'écran par défaut (1024 x 768 pixels, par exemple). Ceci permet de tester plus facilement ce qui se passe lorsque la taille de la zone de visualisation change.
Ne vous attachez pas trop aux pixels en tant qu'unités de mesure, nous allons bien souvent les abandonner et passer à des unités de mesure relatives (par exemple les "em" et les pourcentages) lorsque nous nous attaquerons vraiment au design réactif. Ils fournissent, toutefois, un point de référence pratique pour examiner des designs réactifs et les voir se modifier.
Se procurer les outils pour tester les zones de visualisation
Les utilisateurs d'Internet Explorer doivent détenir la barre d'outils développeur de Microsoft Internet Explorer. Elle se télécharge ici.
Avec Safari, mon outil préféré est Resize, sachant que ResizeMe est semblable et gratuit.
Si vous utilisez Firefox, il existe Firesizer, et les utilisateurs de Chrome peuvent se procurer Windows Resizer.
Vous n'êtes pas amateur d'extensions ? Voici une autre solution : j'ai écrit une page HTML toute simple permettant d'afficher la hauteur et la largeur de la zone de visualisation de la fenêtre d'un navigateur. En utilisant une petite partie de jQuery, une bibliothèque JavaScript, cette page récupère la taille de la zone de visualisation en hauteur et en largeur, puis l'affiche. Vous pouvez garder cette page ouverte dans un autre onglet du navigateur, redimensionner la fenêtre, puis revenir au site en question pour voir ce qui se passe. Vous la trouverez à cette URL.