320, 768 et 1024. Ces chiffres signifient-ils quelque chose pour vous?

Non, ce n'est pas le code Da Vinci, ce sont les largeurs de pixels que de nombreux concepteurs associent aux largeurs des écrans mobiles, des tablettes et des ordinateurs de bureau.

Le problème que j'ai avec cela est que mon mobile n'a pas 320 pixels de large, ma tablette ne fait pas 768 pixels de large et mon écran de bureau ne fait certainement pas 1024 pixels de large. Il existe des centaines de tailles d’écran différentes sur différents appareils, mais nous pensons toujours à la conception Web réactive en 320, 768 et 1024.

Qu'advient-il de toutes les tailles d'écran entre les deux?

J'ai vu de nombreux sites qui utilisent ces trois points d'arrêt pour leurs conceptions et créent simplement 3 configurations statiques centrées sur la largeur la plus proche.

C’est mieux que d’avoir un site à l’ancienne, statique et de bureau seulement, car ils servent au moins une version simplifiée pour mobile et une version tactile pour tablette, mais alors pourquoi ne pas aliéner toutes les autres tailles considération?

Bien sûr, la conception fonctionnera toujours sur les autres tailles, mais que se passe-t-il lorsque votre tablette est inférieure à 768? Ils obtiendront l'expérience mobile sur une tablette! Et lors de la visualisation sur un écran d'ordinateur portable plus petit que 1024? Nous leur enverrons simplement la mise en page de la tablette et nous en moquerons pour ne pas avoir l'une des 3 tailles d'écran que nous avons jugées dignes.

Il s'agit de pourcentages et non de pixels

Lorsque vous créez vos mises en page réactives, vous devez toujours viser à définir autant de dimensions que possible en pourcentage. Cela permet de s'assurer que votre contenu va croître et diminuer uniformément à travers différentes tailles d'écran et le fera en proportion de l'appareil sur lequel il est affiché. Cette approche garantira également que votre contenu remplit toujours 90% (ou autant que vous déterminez) de l'écran au lieu de 50% de l'écran, car le contenu est centré sur une taille d'écran inférieure de quelques pixels à la taille de l'écran. point d'arrêt disponible.

Le contenu est roi

Lors du choix de vos points d'arrêt, vous devez toujours prendre vos décisions en fonction de l'emplacement du contenu et non de la largeur de l'écran de l'appareil. Au lieu de créer un design et de le modifier pour l'adapter facilement à l'écran de l'iPad, vous devez déterminer la largeur de votre contenu.

J'ai tendance à commencer par une conception large de 1400 et à rendre le navigateur plus petit jusqu'à ce qu'un élément de contenu brise la mise en page ou se rapproche de lui. Cela détermine alors mon prochain point d'arrêt. Peu importe que ce soit à 1200, 800 ou 673, si le contenu fonctionne toujours, alors pourquoi changer la mise en page?

Vous constaterez que vous allez vous retrouver avec des points d'arrêt étranges tels que 477 ou 982 et que vous pouvez avoir 2, 6 ou 10 points d'arrêt différents. Le point est que le contenu décidera plutôt que les tailles d'écran prévues sur lesquelles vous souhaitez qu'il soit affiché.

Avec la gamme de périphériques et de tailles d'écran différents lancés chaque mois, il est impossible de déterminer un ensemble de points d'arrêt définis pour nos projets réactifs. La vérité est que pendant que nous utilisons une variable telle que la largeur de l'écran pour déterminer nos mises en page réactives, nous nous efforcerons de proposer une mise en page parfaite à chaque taille, mais nous pouvons au moins assurer que le contenu est toujours affiché du mieux possible.

Quels points d'arrêt utilisez-vous habituellement? Evitez-vous les points d'arrêt? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, image de chargement large via Shutterstock.