Résolution décran commune?

Je développe une application Web qui est assez riche en informations. Cela signifie que chaque pixel disponible à lécran pour laffichage aide beaucoup, pour éviter linterface utilisateur lair trop encombré et pour afficher des données pertinentes.

Je me demandais: quelle est la résolution décran « commune »? Il y a des années, cétait quelque chose comme 1024 × 768, mais de nos jours, il doit être quelque chose de beaucoup plus élevé. Je ne peux pas me fier à ce que jutilise en tant que développeur et jai probablement des écrans et une résolution plus grands que lutilisateur moyen de Joe.

Alors, où puis-je trouver la résolution actuellement recommandée pour les applications Web?

Commentaires

  • Voir cette question sur le site Webmasters – webmasters.stackexchange.com/questions/2494/…
  • Vous ne devriez pas ‘ utiliser résolution décran pour guider vos décisions; vous devez connaître la taille des fenêtres du navigateur. Vous ne pouvez pas supposer que les utilisateurs utiliseront un navigateur en plein écran; ce serait trop volumineux pour lire la plupart des sites.
  • Voir également cette question concernant la mise en page à largeur fixe ou fluide .
  • Penser en termes de résolution décran, comme sil sagissait dun paramètre statique, semble anachronique. @MonicaCellio a bien compris. Lallocation immobilière pour une application est dynamique et est entre les mains de lutilisateur.
  • Remarque: avec la conception réactive à la hausse, de nombreuses personnes se sont rendu compte quil est également important de considérer ce quest un bonne largeur maximale de colonne , et que la lisibilité du texte peut souvent être assurée en approchant la largeur du contenu propre à la taille de la police, soit 35-40em pour une largeur de texte solide.

Réponse

Cela dépend vraiment de lendroit où vous vous trouvez dans le monde. Dans le monde entier, 1366×768 est toujours le plus courant, cependant 1920 x 1080 est la seule résolution dont la prise en charge augmente réellement (probablement parce que cela semble être le grand écran standard des ordinateurs portables modernes).

Le site Web StatCounter.com devrait vous aider à en savoir plus à ce sujet.

CEPENDANT , gardez à lesprit que ce nest pas parce que certaines résolutions sont plus courantes que dautres que cela ne prend pas en compte la largeur de leur navigateur. Malheureusement, il existe peu de mesures connues pour cette statistique (Google Analytics avait lhabitude de fournir cela, mais a cessé de la prendre en charge).

Commentaires

  • De plus, les moyennes mondiales pour ce type de données peuvent (ne seront) pas être les mêmes que celles de votre base dutilisateurs. Tant que vous navez pas échantillonné vos utilisateurs ACTUELS, vous ne ‘ Je ne sais pas ce quils ‘ utilisent. Par conséquent, votre meilleur pari est de concevoir votre mise en page pour quelle fonctionne à des résolutions multiples (et variables).
  • Pour obtenir des données sur la répartition de la résolution décran entre les smartphones et tablettes Android et iOS, consultez le Résolution ‘ section vers la fin de opensignalmaps.com/reports/fragmentation.php . Ici, la résolution de lécran est plus susceptible de se rapprocher des dimensions de la fenêtre daffichage / du navigateur sur les smartphones et les tablettes que sur les ordinateurs portables et les ordinateurs de bureau. Ce qui nest pas pratique pour Android, la fragmentation de la plate-forme ‘ se reflète assez nettement dans la large distribution des résolutions décran. Cela rendrait probablement une mise en page fluide pour les appareils mobiles une bonne idée.
  • Tout comme une mise à jour, 1366×768 a dépassé de loin 1024×768 depuis que cette réponse a été publiée.
  • @DangerZone Bon point . Malheureusement, StatCounter noffre pas ‘ des liens vers ‘ ‘ actuel car ils nécessitent toujours un suffixe plage de dates (doù plusieurs modifications sur cette réponse au fil des ans!). Jai modifié la réponse avec des statistiques à jour. Je suppose que je ‘ devra faire de même dans un an environ!

Réponse

Gardez à lesprit que les ordinateurs portables et les ordinateurs de bureau ne sont plus les seuls appareils compatibles avec le Web. LiPad a une résolution de 1024×768, liPhone 4 a une résolution de 960×640, en supposant que vous les utilisez en mode paysage.

Commentaires

  • Afaik the LiPhone 4 rend les pages comme sil avait lancienne résolution 480 * 320. Les pages sur mes 4 ne sont ‘ que deux fois moins grandes que sur un 3GS. La résolution supplémentaire nest utilisée que pour le rendu des polices / images, cest ce à quoi je ‘ veux arriver.
  • Point absolument valable. La largeur de lécran de 960 pixels reste pertinente même avec laugmentation de la taille des écrans de bureau, car de nombreux appareils portables peuvent également afficher cette taille.Sans parler du fait que les sites Web sont simplement illisibles lorsquils sont très larges (1600+).

Réponse

Le choix de la résolution décran minimale dépend du nombre dutilisateurs que vous êtes prêt à exclure.

Si vous ne disposez pas dun historique des données de résolution pour vos utilisateurs spécifiques, une option consiste à utiliser les statistiques dutilisation publiques et globales comme ligne directrice. En utilisant lune de ces sources de données globales, jai créé le graphique suivant pour aider à donner un aperçu de létat de la largeur de lécran du bureau.

entrez la description de limage ici

Réponse

« mais de nos jours ça doit être quelque chose de beaucoup plus élevé »

Chaque réponse ici semble ignorer tout le monde mobile.

Bien sûr, les écrans de bureau sont de plus en plus grands. 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.

Commentaires

  • OUI. Cest le point clé. La conception Web fluide est vitale car de nos jours, de nombreuses personnes accèdent à des sites Web à partir de téléphones et de tablettes. La tendance de résolution est la fragmentation, pas lexpansion.

Réponse

Pourquoi ne pas concevoir de manière adaptative pour « quoi que ce soit you have available « ?

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 graphique riche en grandes images avec une colonne de 960 px, limage darrière-plan nest pas nécessaire pour ceux exécutant 1024-768, vous navez donc pas à le charger. Vous pouvez également modifier la taille de votre police pour tirer le meilleur parti de lespace disponible à lécran.

Réponse

Résolution la plus populaire en 2011, cest 1280×800. 18,09% des utilisateurs dInternet lutilisent.

Voici les 10 meilleures résolutions pour 2011: http://www.superiorwebsys.com/blog/93/Most_Common_Screen_Resolutions_in_2011/

Commentaires

  • +1 pour la référence, mais avec 1024×768 juste derrière et étant la plus faible des deux résolutions supérieures, cela devrait peut-être avoir une considération plus élevée malgré un pourcentage légèrement inférieur.
  • 1024 sera là pendant un certain temps + nouveaux appareils mobiles. Je recommanderais donc de concevoir des sites pour cette résolution, si vous ne prévoyez pas de faire de la conception extensible.

Réponse

Je suis daccord avec Jon quil faut faire attention à utiliser la résolution plein écran comme base lors de la conception dapplications Web. Il a également raison lorsquil déclare que la variante grand écran du 768 est très courante ces jours-ci.

Jai récemment expérimenté, cependant, de très bonnes raisons de réduire 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 quil est fort probable que plusieurs utilisateurs aient 1280 × 720 comme résolution. Cibler 768 en tant que hauteur peut être un peu trop pour de nombreux utilisateurs.

Voir aussi: http://en.wikipedia.org/wiki/Screen_resolution

Réponse

Si vous voulez être en sécurité avec les écrans de bureau / ordinateur portable utilisant une disposition statique, continuez à utiliser un minimum de 1024×768. Mais la meilleure option est de concevoir une mise en page fluide (flexible).

Réponse

Microsoft a récemment publié leurs données de télémétrie dans cette zone pour les utilisateurs de Windows 7 :

Tableau des résolutions décran de Windows 7

Vous pouvez voir que (du moins pour les utilisateurs qui sont encore sur le cycle de mise à niveau), il y a « une énorme quantité dutilisateurs exécutant des écrans 16: 9 et 16:10 au lieu de 4: 3 (et la pluralité dentre eux tourne à 1366 × 768).

Commentaires

  • Il semble que même en interne, Microsoft ignore le paysage mobile.;)

Réponse

Oui, essayez denvisager une mise en page flexible. Si vous prévoyez dutiliser chaque pixel disponible, couvrir le plein écran est la meilleure solution, avec le vous devez utiliser javascript. Vous devez passer par la Responsive Web Design dALA et jeter un œil à la exemple . Quand en regardant cet exemple, essayez de redimensionner votre navigateur et voyez comment le contenu réagit. De cette façon, votre site Web peut être superbe sur nimporte quel écran, que ce soit un ordinateur de bureau, un ordinateur portable, une tablette ou un téléphone.

Commentaires

  • veuillez noter si vous y allez en utilisant chaque pixel disponible, cela peut rendre votre texte plus difficile à lire par vos lecteurs.

Réponse

Jai ciblé 1280 X 1024, avec une mise en page qui sera adaptative si les contraintes mobiles sont un facteur.

Sinon, je men remets généralement à lanalyse et jessaie de garder à lesprit les meilleures résolutions pour le site donné.

Réponse

Quelques éléments à prendre en compte:

  1. À qui cette application est-elle destinée? Sil sagit de la face interne (cest-à-dire de lenvironnement dentreprise), parlez-en 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 lapplication.
  2. Si cest le cas  » est une application publique, pensez aux données dont vous disposez sur les résolutions de vos utilisateurs. Si vous procédez à une refonte, vérifiez les analyses sur le site actuel et obtenez une idée des résolutions exécutées par vos utilisateurs. Vous remarquerez peut-être un modèle ici (cest-à-dire que les gens ont tendance à avoir des résolutions très élevées car ils sont des utilisateurs expérimentés, etc.), mais il y a de fortes chances que ce soit partout.
  3. Pensez aux données que vous « re en présentant. Sil sagit dun grand nombre de grilles, peut-être quune mise en page fluide est préférable. Ensuite, lutilisateur peut étirer son écran pour afficher davantage de données dont il a besoin.

Concevoir pour 1024 est un moyen sûr pour sur le Web, mais c « est paresseux si vous n » essayez pas d « en savoir plus sur vos utilisateurs avant de prendre une décision.

Réponse

Le 1024 * 768 doit rester un simple bon sens. Sinon, cela dépend vraiment de votre public. Si vous faites un site Web ou application pour les concepteurs par exemple, vous devriez optimiser pour une résolution beaucoup plus élevée comme 1680 * 1050.

Vous devriez le tester ou demander à votre 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 appareils. 🙂

Commentaires

  •  » Si vous créez un site Web ou une application pour les concepteurs par exemple, vous devriez op timize pour une résolution beaucoup plus élevée, comme 1680 * 1050.  » La plupart des ‘ designers ‘ ont des iPhones .
  • @ DA01 – Ainsi, les différents CSS pour différents appareils.
  • Cela aide, mais je parlais principalement du ‘ optimisé pour ‘. Idéalement, ‘ optimisez pour ‘ tous les appareils.

Réponse

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

Commentaires

  • Pourriez-vous nous en dire plus? Et quentendez-vous par résolutions de projecteur?
  • Exemple: si vous avez un projecteur LCD PT-EX600U, lorsque vous le branchez sur votre ordinateur, la résolution de votre écran passe à: 1028 x 768 pixels.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *