Responsive Web Design

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

Commandé ! :-)

Acheté il y'a une semaine !

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.

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.

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

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

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 !

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 !

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

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

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

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,

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.

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

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.

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

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

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