Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous

Identifiant
Mot de passe

Mot de passe oublié ?

Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Les fondamentaux du Responsive Web Design

Par Julien Roche

Le 29 mars 2013 à 13:07, par roche.jul

21 commentaires

10PARTAGES

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

Une erreur dans cette actualité ? Signalez-nous-la !

Votre nom : Votre e-mail :

Décrivez l'erreur que vous souhaitez porter à notre connaissance :

21 commentaires

Commenter Signaler un problème

SylvainPV

Rédacteur/Modérateur

Le 03/04/2013 à 20:50

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.

xelab

Membre expérimenté

Le 03/04/2013 à 17:56

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

Rédacteur/Modérateur

Le 05/04/2013 à 17:19

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

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.

rodolphebrd

Expert confirmé

Le 29/03/2013 à 13:19

Merci pour le partage je le lis ce soir.

kOrt3x

Modérateur

Le 01/04/2013 à 11:02

Très bon article

rawsrc

Expert éminent sénior

Le 02/04/2013 à 9:30

Super article, vraiment impeccable rien à redire

Rubedo

Futur Membre du Club

Le 02/04/2013 à 10:12

Merci pour ce travail, je diffuse!

Kaamo

Membre émérite

Le 04/04/2013 à 10:55

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

Membre averti

Le 04/04/2013 à 19:19

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

Membre averti

Le 04/04/2013 à 19:22

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.

Commenter Signaler un problème

Identifiez-vous

Créer un compte

Les fondamentaux du Responsive Web Design Par Julien Roche

Les fondamentaux du Responsive Web Design

Par Julien Roche