+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut Comprendre le méta tag viewport



    Je vous propose une traduction de l'article anglophone Understanding The Viewport Meta Tag par Paul Underwood : Comprendre le méta tag viewport.

    N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

    Comprendre le méta tag viewport.

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Recherche emploi
    Inscrit en
    août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Recherche emploi

    Informations forums :
    Inscription : août 2007
    Messages : 2 334
    Points : 8 094
    Points
    8 094

    Par défaut

    Je n'en ai pour le moment pas l'utilité, mais je garde cet article au chaud dans mes favoris

    Merci pour la trad
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  3. #3
    Modérateur

    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 252
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 252
    Points : 19 047
    Points
    19 047

    Par défaut

    Merci pour cet article explicatif. Qui d'ailleurs est splendide pour faire des bonnes pages pour mobiles.

    Mais du coup il y a quelque chose qui me chiffonne : plus j'en apprends sur le « responsive design, » plus ça m'a tout l'air d'être un gros cargo cult.

    Je veux bien croire qu'il existe des cas simplistes où s'adapter aux petites tailles d'écran, ne soit qu'une question de style.

    Mais dans le cas général, ce sera une question de données présentes sur la page. Si l'écran est trop petit, une (grosse) partie des données doit être déportée sur une ou plusieurs autres pages. Cela n'est pas une question de style, mais de contenu du document envoyé au navigateur. Et donc, un autre document doit être envoyé aux écrans plus petits, idéalement à base de HTTP (voire de SPDY.) Ça a peut-être pas l'air idéal, mais c'est plus réaliste que de croire que tout n'est question que de style.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  4. #4
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Sans emploi
    Inscrit en
    décembre 2011
    Messages
    1 699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Sans emploi
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 699
    Points : 3 832
    Points
    3 832
    Billets dans le blog
    6

    Par défaut

    Citation Envoyé par thelvin
    plus j'en apprends sur le « responsive design, » plus ça m'a tout l'air d'être un gros cargo cult.
    Je ne sais pas ce que tu en apprends, mais ça ne me paraît pas concluant ! Le principe est encore assez jeune, en constante évolution (par ex. l'article sur la meta viewport est intéressant parce que @viewport est encore mal supportée), et pas assez systématique dans les développements de site, d'après moi. Tout le contraire d'un « cargo cult » (merci de m'avoir fait découvrir ce concept, que je trouve très émouvant !)

    Citation Envoyé par thelvin
    Si l'écran est trop petit, une (grosse) partie des données doit être déportée sur une ou plusieurs autres pages.
    Pourquoi tu dis ça ? Dans l'absolu, l'écran n'est jamais trop petit puisqu'il ne "finit" jamais

    ---
    Debug the Web together!

  5. #5
    Modérateur

    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 252
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 252
    Points : 19 047
    Points
    19 047

    Par défaut

    Citation Envoyé par Muchos Voir le message
    Je ne sais pas ce que tu en apprends, mais ça ne me paraît pas concluant ! Le principe est encore assez jeune, en constante évolution (par ex. l'article sur la meta viewport est intéressant parce que @viewport est encore mal supportée), et pas assez systématique dans les développements de site, d'après moi.
    Dans le cas de viewport, il peut toujours servir aux mobiles, pour leur dire qu'on a fait cette page pour qu'elle s'affiche sur eux, et qu'ils ont pas besoin de faire leurs réadaptations à deux ronds comme sur les sites "prévus pour ordinateurs." C'est bien. Mais ça ne se limite pas au responsive design, puisqu'on peut se contenter de faire des pages uniquement destinées aux mobiles, et de leur mettre ça en place pour qu'ils les affichent bien.

    Citation Envoyé par Muchos Voir le message
    Tout le contraire d'un « cargo cult » (merci de m'avoir fait découvrir ce concept, que je trouve très émouvant !)
    C'est la notion de responsive design, faire ses pages web de sorte qu'elles s'affichent convenablement quel que soit l'appareil qui les affichent, au lieu de prévoir des versions alternatives des pages et de rediriger vers telle ou telle en fonction des capacités de l'appareil.

    Ça a l'air cool dit comme ça et ça donne envie de s'y mettre plutôt que d'éclater en plein de copies. Seulement, faire des trucs cools, c'est moins important que faire des trucs qui marchent. Si on considère que faire du responsive design pour tous les appareils, c'est plus important que faire que le site soit effectivement utilisable pour tous ces mêmes appareils, ben ça c'est du cargo cult.

    Citation Envoyé par Muchos Voir le message
    Pourquoi tu dis ça ? Dans l'absolu, l'écran n'est jamais trop petit puisqu'il ne "finit" jamais
    Mais si on en met trop sur une page, ce n'est pas utilisable, pas exploitable, et aussi ça demande un temps de chargement bien trop important.

    Les limites en quantité d'information affichable sur une page web, ne sont pas du tout les mêmes sur un ordinateur que sur un téléphone. Sur une assez grande tablette, je ne dis pas... Mais sur les assez grandes tablettes, on avait déjà pas vraiment de problème, ça ne fait qu'un léger mieux.

    Sur un ordi ou une grande tablette, on peut mettre plein de trucs dans les marges, en haut de page, en bas de page, et on peut aller assez loin sans que ça fasse de la surcharge et sans que ça soit trop long à récupérer ou à mettre en page. Sur un téléphone ou une minitablette, les limitations sont bien plus importantes. Et un display: none ne résout guère le problème du temps de chargement, ni d'ailleurs ne dédouanera de déporter l'information manquante sur une page adaptée.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  6. #6
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Sans emploi
    Inscrit en
    décembre 2011
    Messages
    1 699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Sans emploi
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 699
    Points : 3 832
    Points
    3 832
    Billets dans le blog
    6

    Par défaut

    Je trouve ta vision du responsive design particulièrement tranchée.

    Ce n'est pas une technique exclusive (elle peut être couplée à d'autres techniques), mais elle permet déjà, et assez facilement, d'utiliser une même page sur plusieurs supports sans avoir à faire plusieurs versions. On peut faire du mobile-first ou cibler principalement le desktop ; peu importe, ça a son intérêt.

    Ce n'est pas non plus une technique « cool ». C'est une bonne pratique, logique. L'utilisateur y gagne, mais l'intégrateur aussi (une seule version du site, plus simple à faire évoluer, éventuellement moins de css [avec @media]…)

    ---
    Debug the Web together!

Discussions similaires

  1. Comprendre le méta tag viewport
    Par FirePrawn dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 19/11/2012, 20h43
  2. Générateur automatique de méta tag
    Par waldo2188 dans le forum Référencement
    Réponses: 1
    Dernier message: 06/12/2006, 14h20
  3. [débutante] problème de validation des méta-tags
    Par silversky dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 13/09/2005, 18h26

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