Avant de passer trop de temps à considérer les résolutions exactes du moniteur pour votre conception, vous devez vous rappeler que toute conception Web moderne est réactive, ce qui signifie qu'elle est conçue pour s'adapter à divers résolutions d'écran. Avec une conception unique, vous devez tout prendre en charge, des plus petits écrans mobiles aux moniteurs de bureau ultra HD.
Avec site Web adaptatif, vous établissez des dispositions plus générales pour les mobiles, les tablettes et les ordinateurs de bureau. Quand et comment chaque élément de page se met en place pour ces mises en page est déterminé par des points d'arrêt spéciaux écrits dans votre CSS. Ces points d'arrêt sont déterminés par certaines résolutions d'écran courantes.
Bien que vous ne ciblez pas de résolutions spécifiques ou ne définissez pas de taille fixe pour vos conceptions, vous considérerez l'écran résolutions en établissant des points d'arrêt et en créant des transitions fluides afin que votre site soit beau sur tous les appareils et taille de l'écran.
Résolutions de bureau courantes
- HD standard 1280x720 - Vous connaissez peut-être mieux celui-ci en 720p. C'était la résolution HD standard lorsque la HD est devenue courante. Vous ne trouverez probablement pas beaucoup de nouveaux moniteurs utilisant cette résolution, mais il y en a encore beaucoup dans la nature depuis qu'ils étaient plus populaires.
- 1366x768 - C'est une résolution inhabituelle, mais elle est très populaire dans les petits ordinateurs portables et certaines tablettes. Si vous avez affaire à un bas de gamme Chromebooks, il y a de fortes chances que ce soit la résolution que vous ciblez.
- 1920x1080 Le plus commun - Lorsque vous pensez aux ordinateurs de bureau, vous avez probablement affaire à 1920x1080, mieux connu sous le nom de 1080p. Cette résolution est absolument partout. La plupart des moniteurs de bureau sont toujours en 1080p, et de nombreux ordinateurs portables de grande taille le sont également. Vous trouverez également une part décente de tablettes en 1080p dans le paysage.
- 2560x1440 - 1440p est un autre terrain d'entente étrange dans l'image de résolution du moniteur. C'est plus élevé que ce que vous considérez comme 2k, mais ce n'est pas tout à fait 4k. Cela dit, c'est une résolution courante sur le marché des moniteurs de jeu, et c'est une alternative abordable à la pleine 4k. Selon votre site, cela peut valoir la peine de prendre en charge 1440p.
- 3840x2160 Le futur proche - Il s'agit de 4k complet ou d'Ultra HD. Alors que la 4k est désormais réservée aux PC haut de gamme, les prix baissent, la technologie graphique s'améliore et la demande de 4k est tirée par le marché de la télévision, où elle est beaucoup plus courante. Il est prudent de supposer qu'au cours des prochaines années, le 4k dépassera facilement le 1080p en tant que norme de facto, il vaut donc vraiment la peine de prendre en compte le 4k maintenant.
Résolutions courantes pour les tablettes/paysages
Les tablettes ne sont peut-être plus aussi populaires qu'autrefois, et l'augmentation de la taille des téléphones associés aux ordinateurs portables convertibles semble avoir considérablement réduit leur part de marché. Même encore, la prise en compte des résolutions des tablettes chevauche considérablement avec les ordinateurs de bureau et les ordinateurs portables. Vous pourrez peut-être utiliser des points d'arrêt de tablette pour créer des points d'arrêt pour certains éléments gênants qui ne correspondent pas à certaines résolutions.
- Vous devez également absolument prendre en compte les résolutions de la tablette pour les appareils tenus en mode portrait. Tout le monde ne naviguera pas sur sa tablette en mode paysage, vous devez donc ajouter au moins un point d'arrêt pour une tablette courante en mode portrait.
- 1280x800 Une résolution autrefois courante - Les tablettes plus anciennes, les tablettes bas de gamme et les tablettes plus petites ont toutes généralement des tablettes Fire d'Amazon qui utilisent également 1280x800. C'est l'une des dernières résolutions véritablement mobiles sur tablettes.
- 1920x1200 Commun sur les tablettes 7" et 8" - En mode paysage, vous pouvez compter la plupart du temps sur les mêmes points d'arrêt qu'en 1080p. Cependant, lorsque vous en voyez un dans le paysage, la situation est bien différente. Cette résolution est courante parmi de nombreuses tablettes de 7 et 8 pouces, y compris Amazon Fire.
- Tablettes Pomme 2048x1536 -Il s'agit de la résolution de tablette la plus courante d'Apple. C'est assez similaire à 1440p pour faire très peu de différence, mais encore une fois, le portrait est inhabituel. Dans tous les cas, c'est une bonne idée de tester votre site à cette résolution pour vous assurer que rien d'étrange ne se passe sur les iPad.
Les tablettes à haute résolution commencent à entrer dans le territoire des ordinateurs de bureau. La plupart du temps, vous n'avez même pas besoin d'en tenir compte car la résolution se situe dans une plage que vous avez déjà prise en compte. C'est toujours une bonne idée de tester, cependant, pour être absolument sûr.
Résolutions mobiles courantes
Les appareils mobiles sont de loin les plus compliqués à manipuler. Il existe une telle diversité d'appareils, y compris les plus anciens encore en usage, qu'il n'est pas facile de tous les couvrir. C'est pourquoi la conception axée sur le mobile est si populaire. La philosophie est simple. Commencez par la conception mobile la plus simple et développez-la pour des écrans de plus en plus grands. De cette façon, même les appareils les plus anciens et les plus petits fonctionnent, mais avec moins de contenu et moins de fonctionnalités. Le site n'est pas paralysé, il affiche simplement en premier les informations les plus importantes et les plus couramment consultées.
Voici une astuce intéressante pour gérer les téléphones; tourner les résolutions du bureau de leur côté. Bien sûr, il existe des valeurs aberrantes inhabituelles, mais la plupart des téléphones actuels suivent ce modèle.
- 720x1280 commun sur les appareils plus anciens - pendant un certain nombre d'années, 720p tourné sur le côté était la norme la plus courante pour un appareil mobile. Dans ce cas, vous n'avez pas à vous soucier du mode paysage, car c'est le même que le 720p de bureau. Il suffit de couvrir la résolution portrait avec une largeur de 720 pixels.
- 1080x1920 le juste milieu - Le 1080p est la norme depuis très longtemps. C'est encore très courant sur les appareils de milieu de gamme. Si vous ne prenez en charge qu'une seule résolution mobile, c'est tout.
- 1440x2560 haut de gamme actuel - Les appareils mobiles ne cessent de s'agrandir et les écrans ne cessent d'avoir des résolutions de plus en plus élevées. 1440p est une norme intéressante car il existe une variété de largeurs d'écran - des longueurs dans ce cas - qui entrent dans cette plage. Sur les ordinateurs de bureau et les mobiles, le plus courant est 1440x2560. Cela donne à l'écran le rapport d'aspect commun 16:9. Sur mobile, cela compte un peu moins que sur les ordinateurs de bureau, car la longueur de l'appareil n'a pas beaucoup d'impact sur vos conceptions.
Avant de ne prendre en charge que trois résolutions mobiles, vous devez également réaliser que certaines personnes utilisent des téléphones ridiculement vieux avec de petits écrans. Vous devez toujours intégrer une résolution minimale pour vous assurer que votre site a fière allure, même pour quelqu'un qui utilise un téléphone depuis plusieurs années.
Conseils simples à garder à l'esprit
Il est facile de prendre un tas de faits sur les résolutions d'écran, le ruissellement et de commencer à créer des maquettes, et c'est exactement à ce moment-là que vous avez des ennuis. Il y a quelques idées clés à garder à l'esprit lorsque vous concevez un site Web, et elles sont vraies dans la plupart des situations, sinon toutes.
- La conception réactive est fluide - Vous pouvez avoir envie de créer une vaste gamme de points d'arrêt dans votre CSS pour tenir compte de toutes les tailles et situations d'écran possibles. C'est un excellent moyen de vous rendre fou. La conception Web réactive est censée être suffisamment flexible pour combler les lacunes et les irrégularités. Si vous vous retrouvez à définir trop de nombres statiques, qu'ils soient dans les requêtes média ou pour les éléments eux-mêmes, vous vous êtes probablement engagé sur la mauvaise voie.
- Les gens n'optimisent pas toujours leur navigateur - Cela va de pair avec le point précédent. Vous pouvez conception pour les tailles d'écran, mais quand quelqu'un ne maximise pas la fenêtre de son navigateur, tout cela part en fumée. En gardant les choses dans votre conception fluide, vous pouvez éviter les problèmes avec les différentes tailles de fenêtre de navigateur.
- Tout tester - Essayez de casser votre site. C'est la seule façon de trouver tous les bugs et incohérences qui gâcheront l'expérience d'un visiteur. Chrome dispose d'outils intégrés pour tester les résolutions des appareils avec une liste complète des appareils populaires avec lesquels travailler. Vous avez toujours la possibilité de faire glisser vous-même la fenêtre de votre navigateur dans différentes tailles pour voir à la fois comment le site ressemble à différentes tailles et comment il s'adapte et se brise.
- Ne vous attendez pas à ce que vos utilisateurs aient les dernières et les meilleures - Cela revient au point précédent concernant les téléphones plus anciens et les petites résolutions. Vous ne pouvez pas vous attendre à ce que les gens aient de nouveaux appareils. Cela s'applique à la fois à la résolution de l'écran et à la puissance de traitement. Chargement d'un site avec trop de graphismes et trop JavaScript est un bon moyen d'amener les personnes avec un appareil lent à partir et à ne jamais revenir.