Cela va sans dire, le Responsive Web Design est “le” thème de prédilection des designers Web de ce début d’année 2013. Impossible de se promener sur le Web sans en entendre parler “Responsive Design”, que ce soit sur les sites techniques, les galeries de webdesign, les portfolios ou encore dans la presse spécialisée.
Si le concept de design adaptatif n’est pas tout neuf, il a dépassé le phénomène de mode et tend de plus en plus à s’imposer comme un standard de développement dans le domaine des interfaces Web. C’est devenu presque un réflexe chez les designers découvrant un nouveau site de rapidement jouer avec la taille de son navigateur afin de tester son côté “adaptatif”…
Maintenant que le Responsive Design est quasiment devenu une norme, il est très intéressant de se pencher sur la méthodologie et l’outillage disponible pour éviter de perdre trop de temps, et donc d’argent, sur ce genre de problématique. Tout le monde est à peu près d’accord sur le fait que la conception d’un site “Responsive” nécessite plus de temps que celle d’un site standard (Design fixe). Il est donc primordial de sauter sur toutes les occasions d’en gagner un peu, et ce lors de toutes les étapes de la chaîne de production !
Un des gros soucis des développeurs d’interface adaptative est de pouvoir facilement tester leur réalisation dans différentes résolutions. Il est également intéressant d’avoir le maximum d’information pour pouvoir gérer facilement ses média-queries, définir des points de bascules…
L’outil de développement intégré à Firefox
Si énormément de développeurs et webdesigners utilisent régulièrement le navigateur Firefox, il y en a beaucoup qui passent à côté d’une fonctionnalité très pratique apparue depuis quelques versions. Depuis le menu principal de Firefox, le sous-menu “Développement” propose dorénavant une fonctionnalité appelée “Vue adaptative” (Nb : Durant quelques version elle s’appelait “Mode Responsive Design”).
L’activation de cette fonction va automatiquement modifier l’interface du navigateur pour permettre facilement à l’utilisateur de jouer avec la taille de la fenêtre. Ceci peut être réalisé manuellement, ou automatiquement en choisissant une des résolutions proposée dans la liste déroulante. L’exemple suivant, basé sur la page d’accueil de notre dernier social game Facebook, illustre le rendu de l’interface dans 3 résolutions différentes :
On note déjà que l’outil permet une très grande souplesse lors des tests d’affichage. Le gros point fort de ce mode est de ne pas redimensionner complètement la fenêtre de Firefox lors des manipulations de résolution. On peut ainsi continuer à basculer d’un onglet à l’autre sans devoir forcément retailler sa fenêtre à une dimension acceptable pour la lecture par exemple.
L’autre avantage de ce mode réside dans la possibilité de choisir des résolution prédéfinies (Liste déroulante en haut à gauche de la fenêtre), ainsi que la capacité à changer l’orientation de la fenêtre (Bouton “Rotation”). On note également la possibilité d’enregistrer des résolutions personnalisées :
En conclusion, même s’il y en aura toujours pour vous dire qu’il est conseillé de tester le design de son site sur les appareils réels (Le rendu pouvant changer d’une plateforme à l’autre), dans les faits il n’est pas toujours aisé d’avoir tout le matériel à portée de main !
L’outil inclus dans Firefox est donc un très bon point de départ pour réaliser ses tests, du moins durant la phase d’intégration/développement. Il offre à moindre coût une solution facile et rapide de visualiser le rendu de son site sur une tablette, un smartphone, en mode portrait, paysage, etc.
Pour aller un peu plus loin : Adobe Edge Inspect
En complément de cet outil, on pourra aussi se tourner vers la solution proposée par Adobe via l’application Edge Inspect. Cette solution permet d’afficher simultanément sur des appareils mobiles (smartphone, tablette / IOS ou androïd), le contenu chargé au sein de son navigateur desktop :
Une extension est à installer sur le navigateur hôte (Chrome) et l’application Inspect est à installer sur les appareils mobiles cibles. La connexion se fait alors grâce au réseau Wifi et tous les écrans sont synchronisés avec le PC, y compris pour ce qui est de la navigation…
Bluffant ! Mais nécessite encore une fois d’avoir pas mal de matériel à disposition 
Là, Firefox gagne encore un point !
