La boîte à outil ultime pour le responsive design

La boîte à outils ultime pour le responsive design

Si vous ne savez pas par où commencer votre webdesign responsive, ni quels outils vont vous faciliter la vie, cette liste d’outils concoctée à l’aide du dernier article de Smashing Hub devrait vous égayer. Faisons un petit tour des outils pratiques ou simplement indispensables

 

Le responsive design est relativement récent et les choses bougent très vite. A peine a-t-on pris connaissance d’une technique qu’il faut déjà apprendre une nouvelle chose ou maîtriser le dernier outil sorti. Le responsive design n’est pas une simple mode de passage mais bel et bien une possibilité et une philosophie de conception de sites web bien en place qui fait ses preuves.

Avec sa popularité toujours grandissante, de nombreux outils ont vu le jour pour faciliter le travail des concepteurs et intégrateurs de sites. Ces derniers peuvent vous faire gagner un temps fou que ce soit en amont du projet lors de la phase de réflexion ou durant sa conception jusqu’à la dernière ligne de CSS. Comme il est dur de tous les connaître, Smashing Hub a réalisé un article recensant la boîte à outil ultime pour le responsive webdesign.

 

L’article original recense de nombreux outils gratuits qu’on peut trouver sur le web et vous trouverez ci-dessous ma sélection parmi tous ceux présentés dans celui-ci, plus quelques ajouts. Faisons le tour des outils à votre disposition pour simplifier et raccourcir vos projets responsives.

 

 

Avant de commencer :

N’ouvrez pas dans la hâte Photoshop ou votre éditeur de code favori, prenez le temps de réfléchir au site et à son comportement suivant les résolutions et cas de figure. Rappelons qu’un bon site qui se dit « responsive » s’adapte tout seul en fonction de certains paramètres de l’utilisateur tels que la résolution, la vitesse de chargement, le type d’appareil, etc… Imaginez donc dès le départ ce à quoi ressemblera votre site selon chaque résolution, comment vous allez gérer la navigation, les images ou sliders, etc…

 

1. Feuilles de croquis pour le responsive design

Très utile pour réaliser vos premières réflexions et poser rapidement des zonings, ces feuilles vierges vous aideront à imaginer votre site sur toutes les résolutions.

Outils pour le responsive webdesign

 

2. Différents types de mises en page responsive

Vous ne voyez pas très bien comment votre site pourrait réagir au redimensionnement de la fenêtre ou sur un appareil mobile ? Cet article recense plusieurs possibilités de mise en page responsive : il vous aidera à choisir si vous souhaitez redimensionner vos colonnes, les placer ailleurs, les faire disparaître, etc…

Outils pour le responsive webdesign

 

3. Quels choix de navigation en responsive design ?

Dans le même style que l’article juste au-dessus, celui-ci publié il y a peu sur Design Spartan vous aidera dans votre réflexion sur la navigation. Plusieurs méthodes sont listées avec à chaque fois leurs avantages et inconvénients.

Outils pour le responsive webdesign

 

 

Gagnez du temps avec une structure souple et responsive

Les frameworks, kits de développement et grilles mises  à disposition sur le net sont nombreuses et je n’ai pas la prétention de les avoir tous testé. Mais en me reposant sur les différents retours que j’ai reçu d’intégrateurs et l’article de Smashing Hub, voici ceux qui devraient sûrement faire votre bonheur pour gagner du temps lors de la création de votre responsive webdesign. Vous n’avez qu’à les télécharger et vous voilà avec une base de code basique responsive et souvent même plusieurs styles prédéfinis.

 

1. Simple Grid

Outils pour le responsive webdesign

 

2. Foundation

Outils pour le responsive webdesign

 

3. Skeleton

Outils pour le responsive webdesign

 

4. The 1140px CSS grid

Outils pour le responsive webdesign

 

 

Des outils pour des images responsives

La gestion des images sur un site en responsive design peut être une plaie. Elle doivent se redimensionner, ne pas être trop lourde, si elles deviennent trop petites faut-il les faire disparaître ? Autant de contraintes et de questions qui trouveront sûrement solutions et réponses avec ces outils formidables :

 

1. Adaptative Images

Je ne l’ai pas testé moi-même mais Adaptative Images semble être un outil indispensable pour tout site en responsive design qui se respecte. Basé sur PHP et Javascript, Adaptative Images détecte automatiquement la résolution du visiteur et en fonction de ça va générer l’image à la taille optimale pour cette résolution et bien sûr, le poids de l’image aussi se verra augmenté ou diminué. Aucun effort à faire !

Outils pour le responsive webdesign

 

2. Sencha

C’est un excellent outil utilisé pour le redimensionnement d’images au bon format. Il fournit une optimisation des images hébergées en fonction de la taille du périphérique sur lequel les images sont visionnées.

Outils pour le responsive webdesign

 

 

Du texte qui s’adapte

FitText

FitText est un script JS permettant à vos textes et titres de s’adapter à la taille du conteneur, et donc à la résolution de l’internaute.

Outils pour le responsive webdesign

 

 

Outils relatifs aux media-queries CSS3

1. Respond.js

Utilisez rapidement vos media queries même sur IE 6 à 8 !

Outils pour le responsive webdesign

 

2. Adapt.js

Cet outil fonctionne aussi sur les vieux navigateurs et le meilleur est qu’il peut détecter plusieurs dimensions de plusieurs navigateurs et servir en fonction les feuilles de style nécessaires.

Outils pour le responsive webdesign

 

3. detectMQ.js

Ce script vous permet de détecter si des media queries sont utilisées ou non. Cela peut être très pratique pour par exemple appliquer du Javascript en fonction du changement de mise en page ou pour avoir avec précision les « breakpoints » sur tous les navigateurs.

Outils pour le responsive webdesign

 

 

Des outils tout-en-un ou « boilerplates »

Les boilerplates sont des combinaisons de nombreux outils pour la création de sites web cross-devices. Cela en fait donc d’excellents choix pour débuter un site web avec de nombreuses fonctionnalités et outils déjà prêts à l’emploi.

 

1. Mobile boilerplate

Outils pour le responsive webdesign

2. 320 and up

Outils pour le responsive webdesign

 

 

Conclusion

La principale référence utilisée est l’article paru sur Smashing Hub, vous y trouverez quelques outils non listés ici :

Ultimate responsive web design toolkit

 

Ces quelques outils devraient vous simplifier de nombreuses tâches lors de la création de sites en responsive, bien qu’ils ne fassent pas tout le travail à votre place. Ils permettent d’accélérer tout votre processus de travail et il serait dommage de se priver de tant d’outils pratiques et gratuits, non ?

Auteur: Gaétan Weltzer, comme toujours en fait.

Articles qui pourraient vous plaire

Commentaires (31)

  1. Pingback: La boîte à outils ultime pour le responsive design | Le monde du Geek | Scoop.it

  2. Pingback: La boîte à outils ultime pour le responsive design | Etourisme : boite à outils | Scoop.it

  3. Pingback: La boîte à outils ultime pour le responsive design » Web Design

  4. Pingback: La boîte à outils ultime pour le responsive design | Des infos, outils et conseils 2.0 | Scoop.it

  5. Pingback: La boîte à outils ultime pour le responsive design | CSS3 et HTML5 | Scoop.it

  6. Pingback: Webdesign responsive : galerie de sites | la Veilleuse Graphique

  7. Pingback: Web 2.0 | Pearltrees

  8. Pingback: Les ressources du net #4 – La sélection › JeremDsgn › Le blog

  9. Pingback: HTML5/CSS | Pearltrees

  10. Pingback: La boîte à outils ultime pour le responsive design | Veille_Prospection | Scoop.it

  11. Pingback: La boîte à outils ultime pour le responsive design | Réseaux Sociaux, SEO, NTIC | Scoop.it

  12. Pingback: Responsive design | Pearltrees

  13. Pingback: Les ressources du net #4 – La sélection › Jérémy Barbet › Web & UI Designer

  14. Pingback: La boîte à outils ultime pour le responsive design | Extrait du web | Scoop.it

  15. Pingback: La boîte à outils ultime pour le responsive design | Boite à outils etourisme | Scoop.it

  16. Pingback: La boîte à outils ultime pour le responsive design | Reverbe Inspiration et butinage graphique et Cie | Scoop.it

  17. Pingback: ergonomie | Pearltrees

  18. Pingback: Développement web | Pearltrees

  19. Pingback: Optimiser son site e-commerce pour les tablettes tactiles, c’est maintenant ! | Reservoirweb

  20. Bravo et merci pour cet article.
    Une étude récente indique qu’en janvier 2013 (france): 7 mobiles achetés sur 10 étaient des smartphones. Du coup, nous aussi on conseille à nos clients d’être vigilant sur leurs sites en création. Pour les aider à comprendre les impacts nous avons développé un outil simple, efficace et sans prétention: Pireponsive.
    Il permet à chacun de visualiser et naviguer dans son site sur différents smartphone et tablette. Il sort de four, nous l’avons lancé hier. Du coup, je suis très intéressé par vos retours (vraiment…): A essayer ici donc:
    http://www.pikock.com/fr/piresponsive.html

  21. Pingback: La boîte à outils ultime pour le r...

  22. Pingback: La boîte à outils ultime pour le r...

  23. Pingback: La boîte à outils ultime pour le r...

Laisser un commentaire

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>