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 ;-).
Pas de commentaires !
Il n'y a pas de commentaires pour le moment, mais je sens que vous allez être le premier :-)