La boîte à outils du Responsive Web Design

Le responsive design est une solution efficace pour proposer une expérience utilisateur enrichie en adéquation avec les nouveaux usages web.

Depuis le boom récent de cette technique, de nombreux outils gratuits sont disponibles sur internet pour faciliter la vie des concepteurs et intégrateurs de sites.

Loin d'être exhaustive, cette liste pratique d'outils vous permettra d'y voir plus clair dans le développement de vos projets responsive. N'hésitez pas à la compléter !

2 outils pour bien démarrer

L'utilisation de framework, de kits de développement et de grilles permettent de fiabiliser et d’accélérer le développement.

Simple Grid pour une interface souple et extensible

L'outil, très complet, permet de simplifier la mise en page d'une grille par l'utilisation d'une classe par élément. A noter une utilisation particulièrement simple !

Foundation pour créer facilement des prototypes

Foundation est un framework très complet se basant sur Sass et sur Compass plutôt que sur du simple CSS. Il utilise jQuery pour certains éléments graphiques.

L’outil, plus léger et plus simple que Twitter Bootstrap, permet de créer rapidement un prototype, et dispose de nombreux éléments graphiques. Un prototype facilite la compréhension et la simulation de l'ergonomie.

2 outils pour les media queries CSS3

Les media queries permettent l'application de feuilles de styles différentes en fonction des terminaux cibles.

Adapt.js

CSS3-mediaqueries.js

3 outils pour des images responsive

La gestion des images peut s'avérer très compliquée. Il faut faire attention à la taille en pixels ainsi qu'au poids de l'image.

Adaptative Images : une solution efficace

Adaptative Images est une solution très pratique pour avoir des images responsive, l'outil génère automatiquement des images flexibles optimisées en fonction de la résolution d'écran du visiteur.

Sencha pour redimensionner les images

FitText pour ajuster la taille des textes et titres

FitText est un plugin jQuery très pratique qui permet d'ajuster automatiquement la taille des textes et titres en fonction de la résolution d'écran.

2 outils prêts à l'emploi ou "boilerplates"

Les boilerplates sont des kits de démarrage qui permettent de gagner un temps précieux. En combinant plusieurs outils, ils deviennent des outils tout-en-un redoutables !

Skeleton : un des meilleurs framework responsive

Skeleton utilise seulement des CSS. L’outil est particulièrement adapté à de petits sites et sa prise en main est rapide.

Bootstrap : un framework simple et complet

Twitter bootstrap utilise jQuery. Il inclut de nombreux éléments graphiques et permet de mettre en place rapidement un site multi-terminaux.

3 outils pour tester le responsive design d'un site

Avec la multiplication des supports utilisés pour la navigation, il est crucial de disposer d'outils efficaces pour tester les différentes résolutions d'écran propres à chaque terminaux.

Responsive Web Design Testing Tool

Screenfly

Outil très simple d'utilisation et agréable à prendre en main, Screenfly permet de tester un site sur les terminaux les plus populaires. Il suffit d'entrer l'URL du site web et de se laisser guider !

Responsinator