Résolution d'écran commune?
Je développe une application Web qui contient beaucoup d'informations. Cela signifie que chaque pixel disponible sur l'écran pour l'affichage aide beaucoup, pour éviter que l'interface utilisateur ne soit trop encombrée et pour afficher les données pertinentes.
Je me demandais: quelle est la résolution d'écran "courante"? Il y a des années, c'était quelque chose comme 1024 × 768, mais aujourd'hui, ce doit être quelque chose de beaucoup plus élevé. Je ne peux pas compter sur ce que j'utilise en tant que développeur et j'ai probablement des écrans et une résolution plus grands que l'utilisateur Joe moyen.
Alors, où puis-je trouver la résolution actuellement recommandée pour les applications Web?
Cela dépend vraiment de l'endroit où vous vous trouvez dans le monde. Dans le monde 1366x768 est toujours le plus courant, cependant 1920x1080 est la seule résolution qui est en fait en augmentation en utilisation (probablement parce que cela semble être le grand écran standard pour les ordinateurs portables modernes).
Le site Web StatCounter.com devrait vous aider à approfondir vos connaissances à ce sujet.
[~ # ~] cependant [~ # ~] , gardez à l'esprit que ce n'est pas vraiment parce que certaines résolutions sont plus courantes que d'autres que cela en tenant compte de l'étendue de la fenêtre de navigation de l'utilisateur. Malheureusement, il existe peu de mesures connues pour cette statistique (Google Analytics l'a utilisée auparavant, mais a cessé de la soutenir).
Gardez à l'esprit que les ordinateurs portables et les ordinateurs de bureau ne sont plus les seuls appareils compatibles Web. L'iPad a une résolution de 1024x768, l'iPhone 4 a une résolution de 960x640, en supposant que vous les utilisez en mode paysage.
Le choix de la résolution d'écran minimale se résume au nombre d'utilisateurs que vous souhaitez exclure.
Si vous n'avez pas d'historique de données de résolution pour vos utilisateurs spécifiques, une option consiste à utiliser statistiques d'utilisation publiques et globales comme guide. En utilisant une telle source de données globales, j'ai créé le graphique suivant pour aider à transmettre l'état des largeurs d'écran du bureau en un coup d'œil.
"mais de nos jours ce doit être quelque chose de beaucoup plus élevé"
Chaque réponse ici semble ignorer le monde mobile entier.
Bien sûr, les écrans de bureau s'agrandissent. Mais tout le monde utilise également des appareils mobiles. Une grande partie du Web est désormais accessible sur les téléphones et les tablettes.
La conception adaptative est vraiment la voie à suivre.
Pourquoi ne concevez-vous pas de manière adaptative pour "tout ce dont vous disposez"?
Avec javascript, vous pouvez connaître la taille de la fenêtre du navigateur et apporter des modifications à la feuille de style. par exemple, si vous avez un arrière-plan de grande image graphiquement riche avec une colonne de 960 px, l'image d'arrière-plan n'est pas nécessaire pour ceux qui exécutent 1024-768, vous n'avez donc pas à la charger. Vous pouvez également modifier la taille de votre police pour tirer le meilleur parti de l'immobilier disponible à l'écran.
La résolution la plus populaire en 2011 est 1280x800. 18,09% des utilisateurs d'Internet l'utilisent.
Voici les 10 meilleures résolutions pour 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/
Je suis d'accord avec Jon qu'il faut faire attention à utiliser la résolution plein écran comme base lors de la conception d'applications Web. Il a également raison lorsqu'il déclare que la variante grand écran du 768 est très courante de nos jours.
J'ai récemment rencontré, cependant, de très bonnes raisons de diminuer ma propre politique de résolution d'écran. Les téléviseurs et les ordinateurs portables multimédias utilisent désormais la norme HD comme résolution. Cela signifie que c'est une bonne chance que plusieurs utilisateurs aient 1280 × 720 comme résolution. Cibler 768 comme hauteur peut être un peu trop pour de nombreux utilisateurs.
Voir aussi: http://en.wikipedia.org/wiki/Screen_resolution
Si vous voulez être en sécurité avec des écrans de bureau/ordinateur portable utilisant une disposition statique, continuez à utiliser un minimum de 1024x768. Mais la meilleure option est de concevoir une disposition fluide (flexible).
Microsoft a récemment publié leurs données de télémétrie dans cette zone pour les utilisateurs de Windows 7 :
Vous pouvez voir que (au moins pour les utilisateurs qui sont encore sur le cycle de mise à niveau), il y a une énorme quantité d'utilisateurs exécutant des écrans 16: 9 et 16:10 au lieu de 4: 3 (et la pluralité d'entre eux s'exécutent à 1366 × 768) .
Oui, essayez d'envisager une mise en page flexible. Si vous prévoyez d'utiliser tous les pixels disponibles, couvrir le plein écran est la meilleure solution, avec la nécessité d'utiliser javascript. Vous devriez passer par le Responsive Web Design d'ALA et jeter un oeil au exemple . Lorsque vous consultez cet exemple, essayez de redimensionner votre navigateur et voyez comment le contenu réagit. De cette façon, votre site Web peut avoir fière allure sur n'importe quel écran, qu'il s'agisse d'un ordinateur de bureau, d'un ordinateur portable ou d'une tablette de téléphone.
Je visais 1280 X 1024, avec une mise en page qui sera adaptative si les contraintes mobiles sont un facteur.
Sinon, je m'en remets généralement à l'analyse et j'essaie de garder à l'esprit les meilleures résolutions pour le site donné.
Quelques points à considérer:
- À qui s'adresse cette application? S'il s'agit d'une orientation interne (c'est-à-dire un environnement d'entreprise), parlez au service informatique et voyez à quelle résolution les écrans des employés sont définis. Regardez en particulier les employés qui travailleraient le plus dans l'application.
- S'il s'agit d'une application accessible au public, pensez aux données dont vous disposez sur les résolutions de vos utilisateurs. Si vous modifiez la conception, vérifiez les analyses sur le site actuel et obtenez une idée des résolutions que vos utilisateurs exécutent. Vous remarquerez peut-être un modèle ici (c'est-à-dire que les gens ont tendance à avoir des résolutions très élevées car ils sont des utilisateurs avancés, etc.), mais il est probable que ce sera partout.
- Pensez aux données que vous présentez. Si c'est beaucoup de grilles, une disposition fluide est peut-être la meilleure. L'utilisateur peut ensuite étirer son écran pour afficher davantage de données dont il a besoin.
Concevoir pour 1024 est un itinéraire sûr pour le Web, mais c'est paresseux si vous n'essayez pas d'en savoir plus sur vos utilisateurs avant de prendre une décision.
Le 1024 * 768 devrait toujours rester un bon sens. Sinon, cela dépend vraiment de votre public. Si vous créez un site Web ou une application pour les concepteurs par exemple, vous devez optimiser pour une résolution beaucoup plus élevée comme 1680 * 1050.
Vous devriez le tester ou demander au public souhaité, mais 1024 * 768 est toujours un must!
Dans un monde idéal, il y aurait différents styles (CSS) pour différentes résolutions et différents appareils. :)
Résolutions courantes du projecteur:
- XGA = 1024 x 768 pixels
- WXGA = 1280 x 800 pixels
- HD = 1920 x 1080 pixels
- 4K = résolution 4096 x 2160