IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Les fondamentaux du Responsive Web Design


Sujet :

Publications (X)HTML et CSS

  1. #1
    Membre averti

    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2006
    Messages : 27
    Points : 320
    Points
    320
    Par défaut Les fondamentaux du Responsive Web Design
    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

  2. #2
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Merci pour le partage je le lis ce soir.
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  3. #3
    Modérateur

    Avatar de kOrt3x
    Homme Profil pro
    Technicien Informatique/Webmaster
    Inscrit en
    Septembre 2006
    Messages
    3 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Technicien Informatique/Webmaster
    Secteur : Santé

    Informations forums :
    Inscription : Septembre 2006
    Messages : 3 650
    Points : 15 771
    Points
    15 771
    Par défaut
    Très bon article
    La rubrique Mac
    Les cours & tutoriels Mac
    Critiques de Livres Mac & iOS
    FAQ Mac & iOS

    ________________________________________________________________________
    QuickEvent : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore)
    Mon Livre sur AppleScript : AppleScript: L'essentiel du langage et de ses applications

  4. #4
    Expert éminent sénior
    Avatar de rawsrc
    Homme Profil pro
    Dev indep
    Inscrit en
    Mars 2004
    Messages
    6 142
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Dev indep

    Informations forums :
    Inscription : Mars 2004
    Messages : 6 142
    Points : 16 545
    Points
    16 545
    Billets dans le blog
    12
    Par défaut
    Super article, vraiment impeccable rien à redire

  5. #5
    Futur Membre du Club
    Profil pro
    Editeur
    Inscrit en
    Mars 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Editeur
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mars 2013
    Messages : 5
    Points : 7
    Points
    7
    Par défaut
    Merci pour ce travail, je diffuse!

  6. #6
    Membre expérimenté
    Profil pro
    Développeur informatique
    Inscrit en
    Avril 2009
    Messages
    527
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2009
    Messages : 527
    Points : 1 523
    Points
    1 523
    Par défaut
    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 )

  7. #7
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    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.
    One Web to rule them all

  8. #8
    Membre émérite
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Points : 2 778
    Points
    2 778
    Par défaut
    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.

  9. #9
    Membre averti

    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2006
    Messages : 27
    Points : 320
    Points
    320
    Par défaut
    Citation Envoyé par xelab Voir le message
    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 !

  10. #10
    Membre averti

    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2006
    Messages : 27
    Points : 320
    Points
    320
    Par défaut
    Citation Envoyé par Kaamo Voir le message
    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

  11. #11
    Membre averti

    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2006
    Messages : 27
    Points : 320
    Points
    320
    Par défaut
    Citation Envoyé par SylvainPV Voir le message
    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).

  12. #12
    Membre averti

    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2006
    Messages : 27
    Points : 320
    Points
    320
    Par défaut
    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

  13. #13
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Citation Envoyé par roche.jul Voir le message
    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.

    Citation Envoyé par roche.jul Voir le message
    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.
    One Web to rule them all

  14. #14
    Membre averti

    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2006
    Messages : 27
    Points : 320
    Points
    320
    Par défaut
    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

  15. #15
    Membre émérite
    Avatar de Daïmanu
    Homme Profil pro
    Développeur touche à tout
    Inscrit en
    Janvier 2011
    Messages
    693
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur touche à tout

    Informations forums :
    Inscription : Janvier 2011
    Messages : 693
    Points : 2 422
    Points
    2 422
    Par défaut Coquille
    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
    Je fais appel aux esprits de Ritchie, Kernighan, Stroustrup et Alexandrescu
    Donnez moi la force, donnez moi le courage de coder proprement !

    « Ça marche pas » n'est PAS une réponse convenable, merci de détailler le souci en fournissant l’environnement, le code source, les commandes et les messages d'erreur.

    Ce club possède également un clavardage, on y trouve quelques perles entre deux sessions d'entraides.

  16. #16
    Candidat au Club
    Homme Profil pro
    Inscrit en
    Février 2013
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2013
    Messages : 6
    Points : 2
    Points
    2
    Par défaut Un grand bravo !!!
    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 ...
    Images attachées Images attachées    

  17. #17
    Expert confirmé
    Avatar de shenron666
    Homme Profil pro
    avancé
    Inscrit en
    Avril 2005
    Messages
    2 519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : avancé

    Informations forums :
    Inscription : Avril 2005
    Messages : 2 519
    Points : 5 167
    Points
    5 167
    Par défaut
    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.

    Citation Envoyé par roche.jul Voir le message
    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"
    Tutoriels OpenGL
    Je ne répondrai à aucune question en MP
    - Si c'est simple tu dis que c'est compliqué et tu le fait
    - Si c'est compliqué tu dis que c'est simple et tu le sous-traite ou le fait faire par un stagiaire.

  18. #18
    Membre régulier
    Profil pro
    Inscrit en
    Février 2007
    Messages
    229
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 229
    Points : 87
    Points
    87
    Par défaut
    Citation Envoyé par shenron666 Voir le message
    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

  19. #19
    Expert confirmé
    Avatar de shenron666
    Homme Profil pro
    avancé
    Inscrit en
    Avril 2005
    Messages
    2 519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : avancé

    Informations forums :
    Inscription : Avril 2005
    Messages : 2 519
    Points : 5 167
    Points
    5 167
    Par défaut
    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%;"
    Tutoriels OpenGL
    Je ne répondrai à aucune question en MP
    - Si c'est simple tu dis que c'est compliqué et tu le fait
    - Si c'est compliqué tu dis que c'est simple et tu le sous-traite ou le fait faire par un stagiaire.

  20. #20
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Mai 2011
    Messages : 3
    Points : 3
    Points
    3
    Par défaut
    Bon article, il très intéressant, très bien illustré, merci !

Discussions similaires

  1. [Livre] Responsive Web design
    Par Macmillenium dans le forum Webdesign & Ergonomie
    Réponses: 2
    Dernier message: 15/09/2016, 19h16
  2. Responsive Web Design et mobile
    Par okoweb dans le forum Webdesign & Ergonomie
    Réponses: 8
    Dernier message: 02/05/2013, 17h54
  3. [CSS 3] Les fondamentaux du Responsive Web Design
    Par roche.jul dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 29/03/2013, 14h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo