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 habitué
    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é
    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

    Très bon article
    Cette signature n'a pas pu être affichée car elle comporte des erreurs.

  4. #4
    Modérateur

    Super article, vraiment impeccable rien à redire
    # Dans la Création, tout est permis mais tout n'est pas utile...

  5. #5
    Futur Membre du Club
    Merci pour ce travail, je diffuse!

  6. #6
    Membre expérimenté
    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

    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
    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 habitué
    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 habitué
    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 habitué
    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 habitué
    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

    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 habitué
    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 chevronné
    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 chat / clavardage, on y trouve quelques perles entre deux sessions d'entraides.

  16. #16
    Candidat au Club
    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 ...

  17. #17
    Expert confirmé
    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
    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é
    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
    Bon article, il très intéressant, très bien illustré, merci !