Intégration web

Notes de lecture : « Responsive Web Design »

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed».

Les Medias Queries n’arrivent qu’au chapitre 4, une fois les fondamentaux mis en place. Rien à dire sur cette partie, si ce n’est qu’elle est concise et que les exemples sont clairs. Le meilleur est pour la fin avec la description d’un Workflow pour faire des sites web «responsive» dans une optique d’amélioration progressive, avec comme mot d’ordre : pensez mobile !

En effet, dans cette dernière partie, l’auteur explique comment mettre en place une stratégie pour utiliser les Medias Queries au plus près des besoins des utilisateurs. Il en profite pour exposer une méthode de travail qui me plait tout particulièrement : le design dans le navigateur. Bien sûr, il ne s’agit pas de remplacer Photoshop, mais de lui demander ce qu’il sait faire de mieux : produire une maquette fixe qu’il faudra adapter selon les contraintes d’affichages des différents agents utilisateurs disponibles sur le marché. Je ne peux m’empêcher de ressortir pour l’occasion cette phrase issue de l’article Et si Photoshop permettait de tester des maquettes fluides ? qui résonne bien ici :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Le sommaire

  • Principes du responsive design
    • Attachez vos ceintures
    • Responsive architecture
    • La voie à suivre
  • La grille flexible
    • Composition flexible
    • Créer une grille flexible
    • Marges et espacement flexibles
  • Les images flexibles
    • Retour aux (codes) sources
    • Images fluides
    • Mosaïque d’arrière-plan flexible
    • Apprenez à aimer overflow
    • Négociez votre contenu
    • Images et grilles flexibles, tenez-vous bien
  • Les media queries
    • Cicatrisation douloureuse
    • Le problème en question
    • Traînasser vers plus de réactivité
    • Un robot plus « responsive »
    • Les media queries en action
    • Au sujet de la compatibilité
    • Pourquoi la flexibilité ?
  • Passer au responsive, design
    • Une question de contexte
    • Mobile first
    • Vers un responsive workflow
    • Être « responsive » et responsable
    • L’amélioration progressive revisitée
    • Va et sois « responsive »

Acheter le livre

Responsive web design

Publié le par Bruno Bichet