Les fondamentaux du Responsive Web Design

**roche.jul** · 29/03/2013, 13h07

Bonjour,

Je viens de publier un article qui traite du responsive design: Les fondamentaux du Responsive Web Design.

J'espère qu'il vous plaira.

Cordialement

**rodolphebrd** · 29/03/2013, 13h19

Merci pour le partage je le lis ce soir.

**kOrt3x** · 01/04/2013, 11h02

Très bon article

**rawsrc** · 02/04/2013, 09h30

Super article, vraiment impeccable rien à redire

**Rubedo** · 02/04/2013, 10h12

Merci pour ce travail, je diffuse!

**xelab** · 03/04/2013, 17h56

Très bon article!

Juste une remarque:
l'image représentant la résolution 320 * 480 pixels est la même que celle juste au dessus (problème de copier-coller du lien a priori

)

**SylvainPV** · 03/04/2013, 20h50

Article très complet, mais y'a quand même des trucs avec lesquels je ne suis pas d'accord.

Par exemple la technique des images compressées.

Comment une image plus grande et non compressée pourrait être plus légère qu'une plus petite compressée à 80% ? ça n'a pas de sens !
Il y a sans doute confusion, peut-être qu'il ne s'agit pas 0% de compression mais un indice 0 en qualité, d'après l'algo JPEG. Mais voilà ce que ça me donne quand j'enregistre une image avec une qualité à 0% :

C'est insipide, même en lui mettant une taille 16 fois plus petite sur navigateur. Je ne vois pas en quoi les algos de redimensionnement des images des navigateurs donneraient un meilleur résultat que celui de Photoshop.

Aussi, je suis complètement contre le principe du Responsive Server-Side qui va selon moi à l'encontre du principe-même du Web responsive. Le Web Responsive c'est une méthodologie et des techniques qui visent à afficher un même contenu web de la manière la plus adéquate selon le contexte d'utilisation. Or là on commence à faire de l'User Agent Detection côté serveur dans le but d'envoyer un contenu différent. A l'extrême cette pratique ne vaut pas mieux que celle de faire une version mobile du site, m.monsite.com à la mode 2005...

Comme le scandent tous les auteurs cités, il n'y a qu'un seul Web (One Web Approach). Il faut donc que ce qui sorte des serveurs soit identique qu'importe le type de périphérique qui le demande. Sinon ça équivaut à discriminer les devices.

Attention, je ne dis pas qu'il faut afficher le même contenu sur tous les devices ! Le responsive content est très important, peut-être l'aspect le plus impactant du Web responsive d'ailleurs. Seulement dans la démarche, il faut que ce soit le client qui réclame un contenu différent, et non le serveur qui lui serve un contenu différent sans lui demander son avis.. Le chargement de CSS selon le résultat d'une media query est un bon exemple, et on peut facilement adapter ce principe pour charger des JS et des données sérialisées en AJAX selon le match de media queries.

**Kaamo** · 04/04/2013, 10h55

Bonjour !
Très bon

, article clair et pertinent qui pose les fondamentaux du Responsive Design.

Concernant les images, j'ai pour habitude d'utiliser la même approche avec ce polyfill : Picturefill

Du coup, je vais comparer avec Retina.js.
Merci !

A+

ps : j'adopte aussi la même approche que @SylvainPV concernant cette philosophie : il faut que ce soit le client qui réclame un contenu différent [note : en fonction du "match de media queries" ], et non le serveur qui lui serve un contenu différent sans lui demander son avis.

**roche.jul** · 04/04/2013, 19h19

Envoyé par xelab

Très bon article!

Juste une remarque:
l'image représentant la résolution 320 * 480 pixels est la même que celle juste au dessus (problème de copier-coller du lien a priori

)

En effet, il faudra que je la remplace :/

Je le ferai dès que j'aurai un petit moment

Merci !

**roche.jul** · 04/04/2013, 19h22

Envoyé par Kaamo

Bonjour !
il faut que ce soit le client qui réclame un contenu différent [note : en fonction du "match de media queries" ], et non le serveur qui lui serve un contenu différent sans lui demander son avis.

Bonsoir,

Tout dépend notre stratégie, mais l'intérêt de déléguer une partie de cela sur le serveur est de limiter des appels "inutiles" avec le serveur et de réduire la bande passante.

Après, nous pouvons faire comme nous voulons: nous pouvons tout faire côté client, serveur ou faire un mixe des deux ! Tout dépend du temps et de ce que vous voulez faire

**roche.jul** · 04/04/2013, 19h26

Envoyé par SylvainPV

Comment une image plus grande et non compressée pourrait être plus légère qu'une plus petite compressée à 80% ? ça n'a pas de sens !

Il est vrai que je me suis mal exprimé.

En fait, ce que je veux dire, c'est une image de taille X, compressé normalement, s'affiche quasi de la même façon qu'une image 2X, compressé plus fortement, mais que nous affichons en taille X.

Cela permettant de réduire la bande passante (très intéressant pour la mobilité donc).

**roche.jul** · 04/04/2013, 19h26

Merci pour vos tous vos retours !

Je vais en prendre note et améliorer mon article afin de rectifier certains de mes propos et de corriger également certains petit soucis d'édition.

Merci encore

**SylvainPV** · 05/04/2013, 17h19

Envoyé par roche.jul

Bonsoir,

Tout dépend notre stratégie, mais l'intérêt de déléguer une partie de cela sur le serveur est de limiter des appels "inutiles" avec le serveur et de réduire la bande passante.

Après, nous pouvons faire comme nous voulons: nous pouvons tout faire côté client, serveur ou faire un mixe des deux ! Tout dépend du temps et de ce que vous voulez faire

Pour réduire la bande passante, la tendance est aux sites full-AJAX: lorsque l'on charge le site, on charge la page principale (souvent index.html) qui est une sorte de coquille vide avec les librairies, scripts, CSS et le DOM correspondant à la structure de base (header, footer, menu de navigation etc...). Puis tout le contenu est chargé en AJAX ensuite.

Au lieu de retélécharger tout le DOM structurant et d'aller chercher des scripts et CSS en cache, on charge uniquement le nouveau contenu HTML. Pour aller encore plus loin, on peut également charger uniquement la data sérialisée (bien souvent en JSON) et déléguer le rendu de la page au Javascript. Là on atteint le maximum en optimisation de bande passante, au prix d'un chargement au démarrage un peu plus long (mais qui peut se faire en tâche de fond)

Avec ce mode de fonctionnement, on peut donc passer des arguments aux requêtes AJAX et ne pas avoir besoin d'UA sniffing côté serveur.

Envoyé par roche.jul

En fait, ce que je veux dire, c'est une image de taille X, compressé normalement, s'affiche quasi de la même façon qu'une image 2X, compressé plus fortement, mais que nous affichons en taille X.

Cela permettant de réduire la bande passante (très intéressant pour la mobilité donc).

Donc on gagne réellement en rapport qualité/poids en prenant des images plus grandes et une compression plus élevée ? Est-ce que si on prend l'image de taille X et qu'on la compresse autant que l'image 2X, on ne peut pas arriver au même ratio qualité/poids ?

Une technique que j'utilisais pour les images de résolution différentes en web responsive, était de modifier directement l'attribut src de mes images en Javascript

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<img src="img/monimage.png?w=240"/>
ou
<img src="img/monimage_240.png"/>
ou encore
<img src="img/phone/monimage.png"/>

pour une image de 240 pixels de large

Je peux ajouter facilement ces arguments selon la deviceWidth puisque je repose presque entièrement sur du templating Javascript dans mes sites. L'inconvénient est qu'on doit disposer côté serveur des images en différentes tailles, ou d'une fonction de retaillage à la volée.

**roche.jul** · 08/04/2013, 17h06

Pour les images, il y a un très bon article sur les images sur html5rocks: http://www.html5rocks.com/en/mobile/...gh-dpi-images/

Et pour tu sites les site full-ajax. Certes, je suis d'accord, c'est juste que souvent, beaucoup de gens ont tendance à mettre toutes les CSS / Js dans le header, et ne font pas la vérification de la nécessité.

Après, comme je le dis, ce n'est pas une obligation, l'aspect RESS: c'est un supplément qui est à mon sens intéressant, mais pas indispensable.

Cordialement

**Daïmanu** · 23/08/2013, 02h25

Très bon article, si seulement plus de site pouvaient en bénéficier…

Petite question, pourquoi toujours utiliser le query screen and (max/min-width) au lieu de simplement max/min-width ? Même si quasiment tout le monde utilise le média screen, celui qui en utilisera un autre n'affichera rien du tout non ?

PS: Attention il y a une image répétée deux fois juste avant le chapitre VI. Faisons un exemple, j'imagine que le rendu mobile ne ressemble pas à ça

**gauthier.67** · 31/01/2014, 19h14

Et bien voilà, je ne sais quoi vous dire ...

J'ai lu votre article sur le responsive design il y a deux jours, et je suis débutant en html, php, css et autres.

Malgré quelques petits soucis de mise au point, le résultat est le suivant (voir les images jointes), j'ai pu réaliser mon premier site RD grâce à vos conseils.

Donc un grand MERCI et un grand BRAVO !!!

Vous avez des vrais dons de pédagogue, franchement top ...

**shenron666** · 13/03/2014, 17h01

Bonjour,

Article intéressant.
Je me permet de signaler un bug rencontré sous Chrome :
- dans les sources du css la ligne 39 est héritée et, lorsque je réduit la largeur de ma fenêtre de manière à avoir le menu à l'horizontale, le menu prend toute la hauteur de la page comme lorsqu'il est à la verticale
Supprimer cette ligne corrige le problème.

Envoyé par roche.jul

l'intérêt de déléguer une partie de cela sur le serveur est de limiter des appels "inutiles" avec le serveur et de réduire la bande passante.

J'imagine que tu voulais dire "limiter la consommation de bande passante"

**Nemesis007** · 11/04/2014, 14h57

Envoyé par shenron666

Bonjour,

Article intéressant.
Je me permet de signaler un bug rencontré sous Chrome :
- dans les sources du css la ligne 39 est héritée et, lorsque je réduit la largeur de ma fenêtre de manière à avoir le menu à l'horizontale, le menu prend toute la hauteur de la page comme lorsqu'il est à la verticale
Supprimer cette ligne corrige le problème.

J'imagine que tu voulais dire "limiter la consommation de bande passante"

Je rencontre le même problème sous Chrome mais en supprimant la ligne 39, cela ne résout pas le problème. Peux-tu spécifier la ligne que tu as enlevé ?

Merci

**shenron666** · 11/04/2014, 15h43

J'ai fait la modification dans le block css suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.layout-menu, .layout-content, .layout-adv {
	display: inline-block;
	height: 100%;
	min-height: 100%; /* Cette ligne */
	vertical-align: top;
}

en supprimant la ligne 39 correspondant à "min-height: 100%;"