[Article] Comprendre le méta tag viewport

[FirePrawn]

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.

[Torgar]

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

Merci pour la trad

[thelvin]

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.

[Muchos]

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 !)

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

[thelvin]

Envoyé par Muchos

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.

Envoyé par Muchos

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.

Envoyé par Muchos

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.

[Muchos]

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]…)