4 outils pour le responsive design

Laissez-moi vous dire tout d’abord, que je ne vais pas vous proposer des outils point-and-click qui vous mâchent le travail. La raison est simple, je pense qu’ils sont nuisibles pour tout le monde : designer, développeur, client. Tout le monde en souffrira…

Ce n’est pas une question de qualité du code produit. Ce n’est pas parce qu’ils pondent un design facilement. C’est qu’ils sont forcément limités. Voici donc une liste d’outils qui vous seront très utiles lors du développement de votre site en version responsive :

1/ Votre navigateur

Non je ne plaisante pas. Il constitue l’outil le plus important car il vous montrera exactement selon les conditions imposées. Il y a eu de nombreux débats pour savoir s’il fallait mieux créer le design à l’aide du navigateur, ou directement sur Photoshop. Laissez moi vous aider…
Votre site va-t-il être consulté sur Photoshop ? Les logiciels de création graphique peuvent créer de magnifique visuels, mais n’émulerons jamais l’expérience utilisateur. Utilisez Photoshop pour créer un visuel. Votre navigateur pour créer la structure de votre site.
Il est maintenant temps de sevrer vos clients des maquettes hyper-détaillées qu’ils ont eu l’habitude de voir. Avec les derniers changements du web, les processus devient plus fluides. Il est maintenant temps de passer à autre chose.
Installez un navigateur complet ainsi que des plugins de développeur. Prenez l’habitude de regarder le code source comme le voit votre navigateur, car vous allez y passer du temps.

2/ Google Drive’s drawing App

Techniquement, n’importe quel éditeur d’image à base de vecteur pourrait faire le travail pour réaliser le cadrage de votre site web et application. En utilisant les vecteurs, il est facile de redimensionner rapidement et de réorganiser vos éléments.
Je préfère l’application de dessin Google Drive pour 2 raisons :
Partage et collaboration : Google partage l’information mieux que personne. Edition simultanée, commentaire,…
Guides automatiques : pour chaque dessin, les guides sont automatiquement créés sur la base des dimensions de l’objet que vous placez dans votre document. Cela vous permet facilement de modifier les dimensions.
C’est gratuit. Que dire de plus ?

3/ Responsinator

Responsinator est un outil qui permet de montrer votre site sous différentes tailles. Il émule, de manière simple, les différents appareils : mobile, tablettes, … Vous souhaitez voir ce que rendra votre site dans une plus petite résolution ? Redimensionnez votre fenêtre de navigation.
Cette application est parfaite pour montrer à vos clients ce que rendra approximativement votre travail sur des supports différents.

4/ Adobe Edge Inspect

Celui-ci est pour vous. Edge Inspect va synchroniser tous les supports en une seule page pour voir les différentes vues à chaque refresh. Cette application n’est pas gratuite, mais coutera toujours moins cher que d’acheter un exemplaire de chaque support mobile disponible sur le marché.

Conclusion

Comme toujours, l’aspect le plus important reste votre reflexion. Ces outils peuvent seulement vous aider et vous mettre sur le bon chemin. J’ai choisi ces applications car elles me permettent de  créer des sites responsive de qualité et qu’elles ne me limitent pas.