Ce n’est un secret pour personne, les mobiles deviennent un support de navigation qu’il ne faut plus mettre de côté. Du design à la typographie, de nombreux outils existent sur le web pour bien réfléchir votre design et le mettre en place correctement. En plus du gain de temps et d’efforts qu’un design peut vous apporter, des designs responsives apportent aux utilisateurs de smartphones et de tablettes une navigation qui leur est adaptée. Alors si vous ne savez pas par où commencer, voilà une petite liste d’outils qui vous seront utiles pour démarrer votre travail.

[symple_heading type= »h2″ title= »Pour bien réussir vos wireframes et prototypes » margin_top= »20px; » margin_bottom= »20px » text_align= »left » font_size= » »]

Modèles, wireframes et prototype. Un bon design part nécessairement de là, surtout lorsqu’on le veut responsive :

• Pour les amateurs de papiers comme moi, vous trouvez sur Interface Sketch la plupart des supports au format imprimable, pour bien démarrer vos designs responsives.
• Comme pour toute organisation, il existe des patterns que le designer Luke Wroblewski a regroupé et classé. Vous pouvez vous aider de son site pour choisir celui qui vous convient le mieux et l’adapter à votre projet
• Responsive Wireframes, créé par James Mellers d’Adobe vous montre comment vous pouvez passer d’un affichage desktop à un affichage mobile et réorganisant votre contenu, grace à quelques wireframes.
  
• Vous utilisez Photoshop ? Alors GuideGuide est fait pour vous. Grace à ce plugin pour Photoshop, vous pourrez créer des guides pour travailler avec vos frameworks et grilles en quelques clics !

[symple_heading type= »h2″ title= »Concevoir » margin_top= »20px; » margin_bottom= »20px » text_align= »left » font_size= » »]

Vous avez décidé des layouts, vous avez construit votre wireframe ? Il est maintenant temps de créer !

• StyleTiles est un guide qui vous permettra de bien communiquer avec votre client. Sous la forme d’un fichier photoshop, vous pourrez y construire votre grille, appliquer vos typographies et vos couleurs afin d’être bien clair. Un outil agile qui vous permettra d’avancer plus vite.
• Foundation est une framework CSS redoutable. Mise à jour régulièrement, bien documentée et accompagnée d’exemples, elle vous permettra de réaliser vos projets.
• Bootstrap, une référence, est une framework semblable à Foundation et réalisée par Twitter. Dans le même esprit que Foundation. Vous pourrez customizer votre grille et vos modules selon vos besoins.

[symple_heading type= »h2″ title= »Améliorer » margin_top= »20px; » margin_bottom= »20px » text_align= »left » font_size= » »]

Vous y êtes presque. Votre site s’adapte à tous les supports, mais il manque peut-être ces petits détails des images et du texte qui pourraient mieux d’adapter. Voilà quelques librairies qui vous simplifieront le travail :

• Fit Text est un plugin jQuery destiné aux titres, afin qu’ils s’adaptent automatiquement à votre page en fonction du device utilisé.
  
• Lettering.js, c’est le grand frère de Fit Text avec plus de contrôles.
• FitVids vous rendra le même service que les plugins précédents mais pour les vidéos.

[symple_heading type= »h2″ title= »Tester, tester, et tester » margin_top= »20px; » margin_bottom= »20px » text_align= »left » font_size= » »]

Vous avez démarré votre projet ? Il faut maintenant le tester ! Voilà quelques liens pratiques pour vous assister dans cette tache qui peut s’avérer longue. Et dans la catégorie test, ce site suffit à lui même. Matt Kersley a développé l’un des outils les plus connus pour tester vos designs responsives. Vous pouvez l’utiliser en ligne, l’installer sur votre serveur pour plus de rapidité. Il permet de tester les points de changement de votre site et de tester les différentes résolutions. Un must-have, un incontournable.