Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 20 sur 20
  1. #1
    Membre actif

    Homme Profil pro Julien Roche
    Développeur Web
    Inscrit en
    février 2006
    Messages
    26
    Détails du profil
    Informations personnelles :
    Nom : Homme Julien Roche
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2006
    Messages : 26
    Points : 154
    Points
    154

    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
    Modérateur
    Avatar de rodolphebrd
    Homme Profil pro Rodolphe brd
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 294
    Détails du profil
    Informations personnelles :
    Nom : Homme Rodolphe brd
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 294
    Points : 5 041
    Points
    5 041

    Par défaut

    Merci pour le partage je le lis ce soir.

  3. #3
    Responsable Mac & iOS

    Avatar de kOrt3x
    Homme Profil pro Aurélien Gaymay
    Technicien Informatique/Webmaster
    Inscrit en
    septembre 2006
    Messages
    3 620
    Détails du profil
    Informations personnelles :
    Nom : Homme Aurélien Gaymay
    Âge : 31
    Localisation : France, Nord (Nord Pas de Calais)

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

    Informations forums :
    Inscription : septembre 2006
    Messages : 3 620
    Points : 14 194
    Points
    14 194

    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
    Modérateur
    Avatar de rawsrc
    Homme Profil pro Martin
    Dev indep
    Inscrit en
    mars 2004
    Messages
    3 410
    Détails du profil
    Informations personnelles :
    Nom : Homme Martin
    Âge : 38
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Dev indep

    Informations forums :
    Inscription : mars 2004
    Messages : 3 410
    Points : 7 751
    Points
    7 751

    Par défaut

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

  5. #5
    Invité de passage
    Profil pro
    Editeur
    Inscrit en
    mars 2013
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France, Hauts de Seine (Île de France)

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

    Informations forums :
    Inscription : mars 2013
    Messages : 4
    Points : 3
    Points
    3

    Par défaut

    Merci pour ce travail, je diffuse!

  6. #6
    Membre Expert
    Développeur informatique
    Inscrit en
    avril 2009
    Messages
    459
    Détails du profil
    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : avril 2009
    Messages : 459
    Points : 1 027
    Points
    1 027

    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
    Expert Confirmé
    Avatar de SylvainPV
    Profil pro Sylvain Pollet-Villard
    Inscrit en
    novembre 2012
    Messages
    1 547
    Détails du profil
    Informations personnelles :
    Nom : Sylvain Pollet-Villard

    Informations forums :
    Inscription : novembre 2012
    Messages : 1 547
    Points : 3 125
    Points
    3 125

    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.

  8. #8
    Expert Confirmé
    Avatar de Kaamo
    Homme Profil pro Cyril
    Ingénieur développement logiciels
    Inscrit en
    avril 2007
    Messages
    1 110
    Détails du profil
    Informations personnelles :
    Nom : Homme Cyril
    Âge : 27
    Localisation : France

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

    Informations forums :
    Inscription : avril 2007
    Messages : 1 110
    Points : 2 591
    Points
    2 591

    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 actif

    Homme Profil pro Julien Roche
    Développeur Web
    Inscrit en
    février 2006
    Messages
    26
    Détails du profil
    Informations personnelles :
    Nom : Homme Julien Roche
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2006
    Messages : 26
    Points : 154
    Points
    154

    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 actif

    Homme Profil pro Julien Roche
    Développeur Web
    Inscrit en
    février 2006
    Messages
    26
    Détails du profil
    Informations personnelles :
    Nom : Homme Julien Roche
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2006
    Messages : 26
    Points : 154
    Points
    154

    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 actif

    Homme Profil pro Julien Roche
    Développeur Web
    Inscrit en
    février 2006
    Messages
    26
    Détails du profil
    Informations personnelles :
    Nom : Homme Julien Roche
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2006
    Messages : 26
    Points : 154
    Points
    154

    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 actif

    Homme Profil pro Julien Roche
    Développeur Web
    Inscrit en
    février 2006
    Messages
    26
    Détails du profil
    Informations personnelles :
    Nom : Homme Julien Roche
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2006
    Messages : 26
    Points : 154
    Points
    154

    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
    Expert Confirmé
    Avatar de SylvainPV
    Profil pro Sylvain Pollet-Villard
    Inscrit en
    novembre 2012
    Messages
    1 547
    Détails du profil
    Informations personnelles :
    Nom : Sylvain Pollet-Villard

    Informations forums :
    Inscription : novembre 2012
    Messages : 1 547
    Points : 3 125
    Points
    3 125

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

  14. #14
    Membre actif

    Homme Profil pro Julien Roche
    Développeur Web
    Inscrit en
    février 2006
    Messages
    26
    Détails du profil
    Informations personnelles :
    Nom : Homme Julien Roche
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2006
    Messages : 26
    Points : 154
    Points
    154

    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 éclairé
    Avatar de manudiclemente
    Homme Profil pro Emmanuel DI CLEMENTE
    Développeur informatique
    Inscrit en
    janvier 2011
    Messages
    146
    Détails du profil
    Informations personnelles :
    Nom : Homme Emmanuel DI CLEMENTE
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : janvier 2011
    Messages : 146
    Points : 338
    Points
    338

    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

  16. #16
    Invité de passage
    Homme Profil pro
    Inscrit en
    février 2013
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : février 2013
    Messages : 6
    Points : 1
    Points
    1

    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é Sénior
    Avatar de shenron666
    Homme Profil pro Tony BAYART
    Ingénieur développement logiciels
    Inscrit en
    avril 2005
    Messages
    2 316
    Détails du profil
    Informations personnelles :
    Nom : Homme Tony BAYART
    Âge : 37
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : avril 2005
    Messages : 2 316
    Points : 4 511
    Points
    4 511

    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 du Club
    Inscrit en
    février 2007
    Messages
    230
    Détails du profil
    Informations forums :
    Inscription : février 2007
    Messages : 230
    Points : 52
    Points
    52

    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é Sénior
    Avatar de shenron666
    Homme Profil pro Tony BAYART
    Ingénieur développement logiciels
    Inscrit en
    avril 2005
    Messages
    2 316
    Détails du profil
    Informations personnelles :
    Nom : Homme Tony BAYART
    Âge : 37
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : avril 2005
    Messages : 2 316
    Points : 4 511
    Points
    4 511

    Par défaut

    J'ai fait la modification dans le block css suivant :
    Code css :
    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
    Invité de passage
    Homme Profil pro lebnani Rami
    Étudiant
    Inscrit en
    mai 2011
    Messages
    2
    Détails du profil
    Informations personnelles :
    Nom : Homme lebnani Rami
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2011
    Messages : 2
    Points : 1
    Points
    1

    Par défaut

    Bon article, il très intéressant, très bien illustré, merci !

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •