Responsive Web Design
Livre suggéré par Raphael (Eleveur de kiwiz, Strasbourg)
En septembre dernier est parue la traduction française (merci Eyrolles) d'un livre de webdesign de référence initialement publié chez A Book Apart : "Responsive Web Design", du célèbre Ethan Marcotte, inventeur de la méthodologie éponyme et que l'on pourrait traduire en français par "Design web adaptable à toutes les résolutions". On se contentera de "Responsive Web Design", bien plus succint :)
Le principe général de l'ouvrage est d'expliquer rapidement (150 pages) et avec un humour décapant comment il est possible de penser et décliner un design web sur en vaste ensemble de résolutions d'écrans, allant du petit smartphone aux écrans larges de bureau de 30 pouces, en passant par les diverses largeurs de tablettes existantes.
Parfait pour débuter !
L'ouvrage est extrêmement bien rédigé, avec des pointes d'humour et des illustrations omniprésentes. Son cheminement est parfaitement tracé et les concepts évoqués sont expliqués en toute clarté.
On y traite des avantages des grilles en pourcentages, des images adaptables à la taille de leur parent et - surtout - de Media Queries CSS3, dont Ethan Marcotte est un grand fan. Le tout décrit à travers un fil rouge sous la forme d'un mini site dédié aux robots qui se prête idéalement au jeu.
Le livre est très intéressant et parfait pour découvrir et comprendre les énormes enjeux et avantages des Media Queries pour la réalisation et production de sites web pour mobiles et dont nous avons déjà dit beaucoup de bien sur Alsacréations. Il me semble même être une base "culturelle" indispensable à tout webdesigner voué à concevoir des pages web à l'avenir. C'est un must, tout simplement !
Quelques faiblesses
Malgré tout l'intérêt que j'ai pu porter à ce livre rapidement dévoré, j'ai tout de même pu y ressentir quelques manques flagrants :
- Le livre est trop court, c'est frustrant ! :)
- La philosophie générale du livre est intégralement basée sur une sacro-sainte trinité établie : "Grille fluide, Images fluides, Media Queries". Selon l'auteur, seul cet assemblage mérite de s'appeler "Responsive". Cependant, cette recette me paraît quelque peu "figée" (c'est un comble !) et discutable. Par exemple, rien n'empêche de faire un design adaptable basé sur une grille non fluide, en tout cas pas forcément en pourcentages (prônés par l'auteur).
- L'ouvrage ne traite nulle part d'une notion fondamentale dans ce domaine, celle de la performance web : du poids des éléments, des temps de chargement, des requêtes superflues, etc. Cette notion est capitale et peut conduire à de grosses désillusions selon les projets.
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"
Plus d'informations ou acheter en ligne sur amazon.fr (lien sponsorisé)
Partagez ce livre :
Commentaires
Nico3333fr a dit le
En effet, vu que les navigateurs téléchargent tout... les media-queries n'ont pas que des avantages.
Quand à l'approche mobile d'abord et media-query pour de plus hautes résolutions, l'idée est très bien, mais un navigateur nommé "vieil IE" va venir ruiner cette approche très rapidement... à prendre avec des pincettes.
Gili a dit le
J'ai acheter toute la collection d'un coup et c'est le premier que j'ai dévorer. Super bouquin.
Je me suis fais la même réflexion concernant les grilles en pour cent, surtout qu'en utilisant cette technique on tombe parfois sur des résultats surprenants.
Clawfire a dit le
Tres bon bouquin en effet meme si un peu court. Je me susi fait la meme reflexion avec les grilles fixes. Pour moi rien n'empeche d'avoir une grille fixe revisité via media query et servie pour le périphérique qui arrive ...
Vaxilart a dit le
@Nico3333fr : "En effet, vu que les navigateurs téléchargent tout... les media-queries n'ont pas que des avantages."
Oui, mais:
1- les feuilles de styles supplémentaires ne sont chargées que lorsque tout le reste est chargé (donc pas d'impact réel de performance sur les navigateurs)
2- Les images de background des versions grandes écrans ne seront pas téléchargés si on utilise la technique du mobile first.
Il y a donc quand même des avantages à utiliser cette technique.
Quant aux grilles, je vais dans la même direction que les autres. J'ai d'ailleurs créés un site en utilisant ce schéma de grille fixe s'adaptant selon la largeur. Et fait à noter, c'est aussi le type de grille que le nouveau site de la campagne 2012 d'Obama utilise !!
iManu a dit le
Excellente collection, même le numéro 3 "Stratégie de contenu web" qui peut sembler loin des préoccupations d'un webdev est riche d'enseignements.
J'attends avec impatience la traduction des numéros 5 et 6, respectivement "Designing for Emotion" d'Aarron Walter et surtout "Mobile First" du fameux Luke Wroblewski. Vite !
Frederic_B a dit le
Je crois aussi que c'est un livre qui marque un tournant avec celui de A. Gustafson (un peu dans la même veine). Pour répondre à certaines remarques:
Certes le bouquin est court mais c'est un des principes de la collection "Brief books for people who make websites". Le tout est conçu pour parler aux gens qui sont occupés à travailler, qui ont besoin d'une mise à jour sans passez des jours dans des livres, au contraire, trop touffus et complets.
Le livre est assez dogmatique sur le contenu de la méthode. Ici tout est une question de termes entre responsive, adaptative et autres. Voir la présentation suivante pour un éclaircissement : http://www.slideshare.net/rudyrigot/responsiv...
Le livre n'aborde pas, ou effleure, la notion de performance. C'est un fait reconnu par l'auteur et un des défis majeurs de l'année 2012 pour ce cercle dont fait partie E. Marcotte. L. Wrobleski donne des débuts de réponse à ce problème avec l'approche Mobile First. Dans cet article (http://24ways.org/2011/conditional-loading-for-responsive-designs) J. Keith propose une ébauche de solution, une piste à suivre. Sur ce sujet, ce n'est que le début, il y a encore beaucoup de choses à peaufiner.
Et avec le support du débit de connexion qui arrive dans la WebAPI et déjà dans Modernizr ça s'annonce comme une année faste !
Olivier C a dit le
Moi je n'utilise pas de pourcentages et j'évite aussi les valeur "auto" car j'ai remarqué que ces valeurs pouvaient être interprétés différemment d'un navigateur à un autre (notamment sur un navigateur pour mobile).
rudyrigot a dit le
À propos du terme "Responsive Web Design" qui n'englobe que ces trois techniques, et devrait englober plus, c'est un regret que le grand Zeldman a exprimé dans son blog : "i think it (Responsive Web Design) may be an even bigger idea than we initially realized — an idea too big to be limited to a single, technical approach to the problem of multiple, disparate viewing environments." (http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/)
Commenter
Vous devez être inscrit et identifié pour utiliser cette fonction.
Vous identifier (déjà inscrit)
Nouvel inscrit
Être inscrit sur Alsacréations vous permet de participer à la communauté (actualités, forum, concours, commentaires...), de publier votre profil, mais aussi de proposer vous-même des astuces et bien d'autres choses. Indiquez un e-mail valide pour recevoir votre mot de passe :
cris_ a dit le
très bon bouquin en effet (et très bonne collection).
sur les perfs, il évoque quand même le sujet en parlant de l'approche mobile first, qui donne plus de css à manger au fur et à mesure de l'augmentation des capacités de l'écran (donc de la machine).