Responsive design : les outils indispensables

Le nombre de devices qui nous relie à la toile n’a jamais été aussi important.  L’hégémonie du fameux format « desktop » est de plus en plus mis à mal… A l’arrivée de ces nouveaux écrans, certains ont pris le pari de créer une expérience utilisateur pour chaque grande famille de supports. On a alors vu la naissance des versions spécifiques pour les mobiles, tablettes… Mais cette tendance s’inverse au profit du responsive web design.

Ce format est désormais devenu la norme des sites Internet. Mais responsive design ne rime pas forcément avec simplicité !

Pour faciliter la vie des développeurs, chef de projets, intégrateurs, clients… voici quelques outils et supports devenus indispensables à la réalisation d’un site Internet adapté à tous les devices.

Les frameworks les plus puissants

Les frameworks sont des composants structurés qui organisent le code informatique. Parmi les frameworks frontend, le framework CSS va aider les développeurs pour la mise en forme des pages web. Voici 2 frameworks que je considère les plus performants sur le marché (choix totalement subjectif :-)).

Zurb Foundation

Zurb Foundation est un framework CSS permettant la conception d’un design responsive. Le framework propose un système de grilles ainsi que des éléments full responsive (tableau, menus etc.).

Le gros avantage de ce framework est son orientation « Mobile first ». On ne part pas du device nécessitant le plus de contenu possible mais au contraire avec le format le moins riche en contenu.

Lien : Zurb Foundation

Bootstrap

On ne présente plus Bootstrap, kit CSS créé par les fondateurs de Twitter. Malgré l’arrivée d’autres frameworks très puissants, il reste le LA référence.

Son système à 12 grilles est assez simple à prendre en main, et son architecture facilite les possibilités d’évolution.

A noter un outil complémentaire à Bootstrap : Jetstrap . Il va vous permettre de designer votre page à l’aide de simples glisser-déposer.

Lien : Bootstrap

Lien : Jetstrap

Des outils utiles pour la gestion des médias

Icomoon

Avec la multiplication des écrans Retina, difficile (et surtout pas très esthétique) d’illustrer son site avec des icones bitmap ! Le must est donc d’utiliser une police de caractères composée d’icônes vectorielles.

Bien sûr il existe des concurrents à Icomoon mais lui offre la possibilité de créer sa propre police, créée sur Illustrator.

Lien : Icomoon

Foresight.js

Ce script javascript va détecter la taille, la résolution de l’écran (retina) et le débit de connexion afin de livrer une image adaptée à ces différents paramètres.

Lien : Foresight

Fitvids.js

Difficile de garder l’homothétie lors de l’intégration de vidéos sur une page du site. Fitvids.js est un plugin jquery qui va permettre de redimensionner automatiquement vos vidéos en fonction de la résolution de l’écran.

Lien : Fitvids

Tester son responsive design

L’émulateur de Google Chrome

Fin octobre 2014, Google a procédé à une mise à jour de son outil de développement à destination des développeurs.

Et cette dernière version est particulièrement aboutie pour l’émulation des sites sur les différents devices. Elle dépasse désormais l’outil de Mozilla Firefox qui était jusque ici la référence.

Pour activer cette fonctionnalité, il vous suffit d’activer l’inspecteur d’élément en appuyant sur la touche F12 puis sur le petit bouton représentant un téléphone Toggle device Mode.

Avec cet émulateur, vous pourrez notamment :

- tester toutes les résolutions possibles,

- choisir le modèle de son device,

- vérifier la vitesse de connexion de son site en fonction de différentes configurations,

- voir le site en fonction de ses media queries.

Browserstack

Le célèbre émulateur Browserstack n’est lui aussi plus à présenter. Il permet de tester à distance tout un panel device, de navigateurs… Outil assez performant surtout pour le test des versions (capricieuses pour ne pas dire autre chose) d’Internet Explorer.

Lien : Browserstack

Mobitest

Ce petit outil gratuit va vous permettre de tester les principales performances de votre version mobile.

Lien : Mobitest

Viewflux

Petit outil sympa pour échanger sur les maquettes entre webdesigner et client : relire mon article à ce sujet.

Le responsive design évolue, et vous ?

Pour se tenir informé, voici quelques ressources qui peuvent être très utiles dans le milieu mouvant du design adaptatif.

Responsive design weekly

L’auteur de ce blog, reconnu dans le milieu, offre une newsletter hebdomadaire avec les dernières actualités du responsive, les outils, les évolutions, etc.

Lien souscrire à la newsletter : Responsive design weekly

Pour suivre l’auteur : @justinavery

This is responsive

Le seul problème de ce site reste le fait qu’il est en anglais. Pour le reste, on trouve de tout : ressources, outils, modèles de pages, actualités.

Lien : This is responsive

Voilà donc quelques outils utiles pour la gestion et la création d’un site en responsive design. Si vous en utilisez d’autres, n’hésitez pas à les renseigner en laissant un petit commentaire ;-).