Responsive Web Design

Livre suggéré par (Intégrateur du Dimanche, Strasbourg)
Créé le (48295 lectures)
Tags : css, webdesign, css3, responsive

Ethan Marcotte (150 pages, Éditions Eyrolles / A book apart, ISBN-13 : 978-2212133318)

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"

(lien sponsorisé)

Note moyenne : 4/5 (8 votes)    Attribuer une note :

 

Commentaires

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).

a dit le

Commandé ! :-)

a dit le

Acheté il y'a une semaine !

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.

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.

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 ...

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 !!

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 !

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 !

a dit le

Le numéro 5 est sorti: design émotionnel.
J'ai hâte de le lire celui là.

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).

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/)

a dit le

Bien le bonjour,

Il y a un élément dans le livre qui me laisse perplexe, j'ai beau creusé ma petite tête je n'arrive pas à comprendre :

Page 94, nous pouvons voir dans le CSS li#nav-rated, li#nav-contact {....} : Je n'arrive pas à le décrypter : li est une balise et nav-rated une ID ? ce que je ne pense pas vu qu'écrit de cette manière cela ne mène à rien.

bref si quelqu'un peux éclairer a lanternes je veux bien :)

merci d'avance,

a dit le

Bonjour,

Je n'ai pas lu ce livre, du moins pas encore car je pense que je vais bientôt passer une commande... ^^
Je viens juste donner une réponse @vitamine.

@vitamine : Pour cette ligne en css --> li#nav-rated, li#nav-contact.
li est bien une balise de liste à puce et #nav-rated correspond à un identifiant (donc unique).
Écrit de cette manière (#nav-rated collé au li), cela veux dire que l'on style la balise li ayant pour identifiant #nav-rated.
En fait, l'écrivain aurait très bien pu écrire #nav-rated au lieu de li#nav-rated

Par contre si l'on aurait écrit cette ligne de cette manière --> li #nav-rated
L'élément "sélectionné" est l'élément ayant pour identifiant #nav-rated et ayant pour parent une balise li.

Si tu veux voir concrètement la différence, essaye ce petit morceau de code :
Ton CSS :
<style type="text/css" media="screen">

li#nav-rated{color : red;}

li #nav-rated2{color : blue;}
</style>

Le HTML
<ul>

<li id="nav-rated">1 - 2 - 3</li>

<li>4 - <span id="nav-rated2">5</span> - 6</li>

<li>7 - 8 - 9</li>
</ul>

Est-ce que je me trompe ?
Voila j'espère t'avoir éclaircie là-dessus vitamine.

a dit le

@anthoid : Je dois avouer que j'avais réussi à récupérer la réponse sur un de mes livres mais c'est avec plaisir que j' effectivement c'est bien ça : le li#nav-rated ne sera effectif que s'il est englobé dans une balise li.

<html>
<head>
<style type="text/css" media="screen">
li#nav-rated{color : red;}
li #nav-rated2{color : blue;}
</style>
</head>
<body>
<ul>
<li id="nav-rated">1 - 2 - 3</li>
<li><span id="nav-rated">4 - 5 - 6</span></li> <!-- nav-rated non pris en compte n'étant pas dans une balise li -->
<li><span id="nav-rated2">7 - 8 - 9</span></li>
</ul>
</body>
</html>

a dit le

damned :

@anthoid : Je dois avouer que j'avais réussi à récupérer la réponse sur un de mes livres mais c'est avec plaisir que j' ai vérifié avec ton petite exercice, merci :)

Effectivement le li#nav-rated ne sera effectif que s'il est englobé dans une balise li.

a dit le

Un très bon investissement, merci d'avoir partagé avec nous ce conseil. Bouquin très clair, facile à comprendre et à mettre en oeuvre et en plus plein d'humour ce qui en rend la lecture vraiment agréable. Merci

a dit le

une question d une grpahiste
est ce que c est tres orienté Techno? j suis pas hyper callé en integration donc savoir si j vais comprendre un peu le contenu!!??
merci

a dit le

Il existe en format numérique sur Kindle et pour l'iBooks d'Apple. Pour ce genre de bouquin je trouve ça vraiment pratique.