1485 sujets

Web Mobile et responsive web design

[Résolu] Tailles de viewport ?

Bonjour,
Sur un site qui en traduisait un autre, j'ai trouvé cette proposition de breakpoints (visiblement inspirés de tailwindcss). Est-ce qu'elles vous paraissent judicieuses ? Merci.

- portrait mobile: moins de 640 pixels
- paysage mobile:> 640px
- portrait de la tablette:> 768px
- paysage de la tablette:> 1024px
- ordinateur portable:> 1280px
Administrateur
Hello,

Pour moi la réponse est "non", les valeurs de viewport sont multiples et les frontières entre les devices très/trop floues.

Voir par exemple https://www.mydevice.io/

Notre job quand on intègre en Responsive n'est pas de tenter de cibler des devices, mais de faire en sorte que notre design s'adapte à toutes les valeurs. Donc faire du fluide systématiquement, et ajouter des breakpoints "quand c'est cassé".

Traduit autrement : les valeurs de breakpoints que tu dois utiliser ne dépendent pas d'un framework mais de ton projet en cours.
Modifié par Raphael (13 Apr 2022 - 19:38)
Merci. J'ai encore du mal avec ça notamment quand il faut maquetter le site. Est-ce qu'il ne faut pas au moins donner une width maximale à la zone de contenu ?
Modifié par jlba (13 Apr 2022 - 23:59)
Administrateur
Il n'y a aucune obligation et ça dépendra là aussi du design.

Au moment du maquettage (donc après l'étape de zoning / wireframes) l'idée est globalement de proposer au minimum deux vues de chaque page : mobile et desktop.

Sachant que ces vues (et les width) ne sont qu'indicatives car tout doit être fluide au final.

Ensuite la ressource la plus importante est l'UI-Kit (ou styleguide) qui fait la passerelle entre le webdesign et l'intégration : c'est ici que sont indiquées si certaines zones ou certains composants ont des dimensions maximales sur desktop par exemple.

Il est effectivement courant que le contenu ait une taille maximum sur desktop pour ne pas être trop large sur grand écran : un grand classique étant un "max-width: 1200px" (environ, selon le design) et centré dans la page.

Bonne journée !
Meilleure solution
Merci pour cette réponse.

Mais dans le cas du maquettage, quelle largeur mini peut-on prendre pour les mobiles (sur le principe qu'il n'y en a pas avec une résolution plus petite) ?
Sujet clos
Aller à