Résolution de site Web recommandée (largeur et hauteur)? [fermé]

Existe-t-il une norme sur la résolution commune des sites Web?

Nous ciblons des moniteurs plus récents, peut-être au moins 1280px de large, mais la hauteur peut varier et chaque navigateur peut également avoir des hauteurs de barre d'outils différentes.

Y a-t-il une sorte de norme à cela?

Le conseil de nos jours est:

Optimiser pour 1024x768 . Pour la plupart des sites, cela couvrira la plupart des visiteurs. La plupart des journaux indiquent que 92 à 99% de vos visites auront une largeur supérieure à 1024. Alors que 1280 est de plus en plus courant, il y en a encore beaucoup à 1024 et certains en dessous. Optimisez pour cela mais n'ignorez pas les autres.

1024 = ~ 960 . La prise en compte des barres de défilement, des bords de fenêtre, etc. signifie que la largeur réelle d'un écran 1024x768 est d' environ 960 pixels . Certains outils sont basés sur une taille légèrement plus petite, environ 940 . Il s'agit de la largeur du conteneur par défaut dans le bootstrap de Twitter .

Ne concevez pas pour une taille unique . Les dimensions des fenêtres varient. Ne supposez pas que la taille de l'écran est égale à la taille des fenêtres. Concevez pour un minimum raisonnable, mais supposez qu'il s'adaptera.

Utilisez un design réactif et des mises en page liquides . Utilisez des dispositions qui s'ajustent lorsque la fenêtre est redimensionnée. Les gens font beaucoup cela, en particulier sur les gros moniteurs. C'est juste une bonne pratique CSS. Il existe plusieurs frameworks frontaux qui prennent en charge cela.

Traitez le mobile comme un citoyen de première classe . Vous obtenez en permanence plus de trafic sur les appareils mobiles. Ceux-ci introduisent encore plus de tailles d'écran. Vous pouvez toujours optimiser pour 960, mais l'utilisation de techniques de conception Web réactive signifie que votre page s'ajustera en fonction de la taille de l'écran.

Journal d'affichage des informations du navigateur . Vous pouvez obtenir des chiffres réels à ce sujet. J'ai trouvé quelques chiffres ici et ici et ici . Vous pouvez également truquer votre site pour collecter les mêmes données.

L'utilisateur défilera donc ne vous inquiétez pas beaucoup de la hauteur . L'ancien argument était que les utilisateurs ne feraient pas défiler et que tout ce qui était important devrait être «au-dessus du pli». Cela a été annulé il y a des années. Les utilisateurs font beaucoup défiler .

En savoir plus sur les résolutions d'écran:

• Résolution d'écran et mise en page
• Meilleure résolution d'écran pour concevoir des sites Web
• Conception pour la taille du navigateur - pas la taille de l'écran

En savoir plus sur le design réactif:

• Conception Web réactive (25 mai 2010), Ethan Marcotte, A List Apart.
• Conception Web réactive sur Wikipedia
• Modèles de disposition multi-appareils (2012, 14 mars) Luke Wroblewski. Catalogues les modèles les plus populaires pour les dispositions d'écran multi-appareils adaptables.

Outils et frameworks frontaux pour une conception réactive et des mises en page liquides:

• Bootstrap Twitter
• Fondation Zurb
• 50 outils fantastiques pour une conception Web réactive (24 avril 2012) Denise Jacobs & Peter Gasston

Mauvaise idée, je crois. Le but de séparer le contenu de la mise en page était de permettre à votre page Web d'être affichée sur n'importe quel type de navigateur.

Mettre en place des limitations artificielles telles qu'une taille d'écran minimale limitera votre marché.

Cela dit, je pense que chaque bureau devrait pouvoir afficher 1024x768. Mais qu'en est-il des navigateurs fonctionnant sur des iPhones ou d'autres appareils avec écran, ou même de ceux qui n'utilisent pas tout leur bureau pour le navigateur?

En réponse à votre question spécifique, non, je ne pense pas qu'il y ait de norme pour une zone d'affichage minimale ou commune dans les navigateurs.

Forcer votre utilisateur à faire défiler horizontalement est une grave transgression de l'interface utilisateur. À moins que vous ne construisiez spécifiquement un site Web pour une population avec une taille d'écran connue, vous êtes plus sûr de vous assurer que votre conception fonctionne avec des écrans aussi petits que 800 pixels de large (environ 8% de la population surfant sur le Web si ma mémoire est bonne). Il est sage de bien l'adapter à des écrans plus grands mais pas au détriment des gens qui surfent encore à 800x600.

Voici une autre chose à considérer: tout le monde n'exécute pas son navigateur en plein écran (je ne le fais pas). Donc, l'idée que si est correct de concevoir pour une "taille d'écran" spécifique (et grande) ne fonctionne vraiment pas pour un certain nombre de raisons.

Mise à jour du 15/12/2010: Lorsque j'ai répondu pour la première fois à cette question, 800 pixels était une réponse appropriée. Cependant, à ce stade, je recommanderais 1024 pixels de large (ou 960 comme quelqu'un d'autre le souligne). La technologie marche sur ...

Voici les statistiques de l'affichage du navigateur en 2008: http://www.w3schools.com/browsers/browsers_display.asp

Environ 50% des utilisateurs utilisent encore 1024x768. Si vous voulez que votre site soit beau en haute résolution, utilisez une mise en page flexible.

il existe en fait des normes de l'industrie pour les largeurs (enfin selon Yahoo au moins). Leurs largeurs prises en charge sont 750, 950, 974, 100%

Ces largeurs présentent des avantages pour leurs grilles prédéfinies (dispositions de colonnes) qui fonctionnent bien avec des dimensions standard pour les publicités si vous deviez en inclure.

Des discussions intéressantes valent aussi la peine d'être regardées.

voir YUI Base

Voici un outil génial: la taille du navigateur Google Labs

Je dirais que vous ne devriez vous attendre à ce que les utilisateurs aient un moniteur avec une résolution de 800x600. Le gouvernement canadien a des normes qui énumèrent cela comme l'une des exigences. Bien que cela puisse sembler faible à quelqu'un avec un écran large de fantaisie, rappelez-vous que tout le monde n'a pas un bon écran. Je connais encore beaucoup de gens fonctionnant en 1024x768. Et il n'est pas du tout rare de croiser quelqu'un qui tourne en 800x600, en particulier dans les cybercafés bon marché en voyage. En outre, il est agréable de devoir rendre la fenêtre de votre navigateur en plein écran si vous ne le souhaitez pas. Vous pouvez élargir le site sur des moniteurs plus larges, mais ne faites pas défiler l'utilisateur horizontalement. Déjà. Un autre avantage de la prise en charge de résolutions inférieures est que votre site fonctionnera beaucoup plus facilement sur les téléphones mobiles et sur Nintendo Wii.

Une note sur votre largeur d'au moins 1280, je dois dire que c'est bien exagéré. La plupart des moniteurs non larges 17 et même 19 pouces ne prennent en charge qu'une résolution maximale de 1280x1024. Et l'ordinateur portable à écran large de 14 pouces sur lequel je tape en ce moment ne mesure que 1280 pixels. Je dirais que la résolution minimale la plus élevée que vous devriez rechercher est 1024x768, mais 800x600 serait idéal.

Toutes les réponses jusqu'à présent parlent de moniteurs de bureau, mais j'utilise le débordement de pile sur mon iPhone et je ne pense pas que vous devriez exclure une plate-forme mobile en ciblant 1024 ou 1280 pixels horizontaux. Marquez votre page pour que le navigateur sache ce que tout cela signifie et le rendre utilisable sera gratuit, même sur les lecteurs d'écran et autres kits auxquels vous n'avez pas pensé.

Il est préférable de ne pas cibler une résolution spécifique, mais de s'adapter facilement à de nombreuses résolutions différentes.

Les lignes directrices que nous utilisons, qui semblent être assez largement utilisées et qui sont étayées par les chiffres que nous obtenons de Google Analytics, consistent à concevoir le site afin qu'il fonctionne sur un écran de 1024 pixels de large et 768 pixels de haut (1024x768 et 1280x800 sont les résolutions les plus courantes que nous voyons, représentant au moins 70% de tout le trafic).

C'est pourquoi vous voyez de nombreux sites (celui-ci inclus) qui utilisent une colonne centrale d'environ 1000 pixels de large et avec le contenu le plus important dans les 500 à 600 pixels supérieurs, donc au-dessus du pli lorsqu'ils sont visualisés sur des écrans de cette taille.

L'utilisation d'une mise en page de 1000 pixels de large fonctionne assez bien sur des tailles d'écran allant jusqu'à environ 1680 pixels de largeur (généralement aussi élevées que celles que vous verrez sur les ordinateurs portables, à l'exception des grands de 17 pouces) mais commencent à paraître un peu ridicules sur 1920 pixels larges (ordinateurs haut de gamme, généralement des postes de travail), mais ces très hautes résolutions ne représentent pas un pourcentage important du trafic sur Internet en général - 2% ou moins (en revanche, si vous avez un public spécialisé comme ce site , le chiffre avec des résolutions élevées peut être un peu plus élevé).

Bien que la meilleure largeur puisse être de 1024, vous devrez ajuster la hauteur pour tenir compte de divers paramètres du navigateur (barre d'outils de navigation, barre d'outils de signets, barre d'outils d'état, etc.) et tenir compte des paramètres de la barre des tâches. Cela réduira rapidement le 768 à environ 550.

Quelle que soit la taille de votre navigateur cible, assurez-vous d'inclure de l'espace pour les barres d'outils du navigateur, les barres d'état et les barres de défilement comme ci-dessus. Internet Explorer (IME) a ​​souvent plus de 100 pixels d'espace vertical dans les barres d'outils et les barres d'état. En règle générale, si je photographie pour 1024 x 768, j'essaierais de créer un design d'environ 960 - 980 px de large et 600 px de haut pour être sûr. De cette façon, vous pouvez faire défiler si nécessaire et un joli espace blanc (si la conception l'exige). Je recommande vivement les grilles YUI pour les instances où vous devez cibler des tailles spécifiques:

Grille YUI

Je reçois beaucoup de questions de la part des concepteurs non seulement sur la largeur, mais aussi sur la hauteur à utiliser pour «tout garder au-dessus du pli». Voici une réponse que j'ai donnée récemment -

Pour la largeur, je ne suis pas un concepteur, mais j'ai lu que la largeur de 960 pixels est la voie à suivre ces jours-ci, car elle se prête à être divisée en colonnes qui ont l'air bien et s'intègrent bien dans la plupart des écrans. Si vous le pouvez, concevez une mise en page liquide - mais ce n'est pas toujours pratique selon votre concepteur, vos compétences CSS, les images et la quantité de texte.

(vous voulez toujours qu'il y ait 65 à 80 caractères par ligne, avec une hauteur de ligne d'environ 1,15). Il s'agit de la largeur de colonne optimale pour le texte, et il a été prouvé qu'elle est beaucoup plus rapide et agréable à lire que les colonnes très larges ou étroites)

En ce qui concerne «au-dessus du pli», je dois juste mettre en garde contre l'utilisation d'un tel concept sur le Web. Le défilement horizontal peut et doit être évité, mais le défilement vertical est quelque chose que vous ne pouvez pas éviter à 100%. Tout ce que je peux vous dire, c'est que sur un écran 1024x768 (au moins 95% des utilisateurs l'ont ou plus), vous devriez être d'accord avec un bloc haut fixe de 600px. Mais il existe de nombreux formats d'affichage différents, le chrome du navigateur peut prendre beaucoup de place et tout le monde ne maximise pas la fenêtre du navigateur.

voici d'autres sites qui disent plus ou moins la même chose - mais planifier pour obtenir absolument tout `` au-dessus du pli '' pour tout le monde est difficile car alors vous pourriez avoir seulement 400px environ, selon les statistiques réelles.

Et enfin un bon long article qui rentre dans les détails (je posterais plus mais SO dit que je suis trop noob) - Comment concevoir pour les tailles de navigateur - baekdal.com

Personnellement, je suis toujours resté fidèle à une largeur maximale de 1000px, centrée au milieu de la page (via la marge gauche / droite: auto).

Si vous utilisez une résolution inférieure à 1024x768, il est temps de procéder à la mise à niveau. Sérieusement. Nous sommes presque 2010. Vous pouvez acheter des moniteurs LCD avec une résolution native de 1280x1024.

Je vous suggère de jeter un œil aux requêtes des médias. C'est un nouvel ajout utile au CSS qui a tellement de sens, vous vous demandez pourquoi cela n'a pas été implémenté plus tôt. Fondamentalement, il vous permet de cibler les attributs du navigateur (tels que les largeurs max et min) directement via CSS et de dériver votre code de mise en page à partir de là. Semblable à la création d'une feuille de style d'impression, vous pouvez créer vos mises en page de bureau et mobiles en parallèle dans le même fichier, ce qui déclenche le développement.

Les mises en page flexibles ou liquides réduisent un peu la conception, par exemple si vous utilisez des images d'arrière-plan qui doivent correspondre à l'image d'arrière-plan du corps.

Je préférerais créer différentes mises en page CSS pour le site et les faire appliquer en fonction de la résolution de l'utilisateur, ou si ce n'est pas possible (je n'ai pas encore creusé dans cela), en faire une option sélectionnable.

Très bien, je vois beaucoup de désinformation ici. Pour commencer, créer une page Web en utilisant une certaine résolution, disons 800x600 par exemple, rend cette page rendue correctement en utilisant uniquement cette résolution! Lorsque cette même page est affichée sur l'ordinateur portable de quelqu'un d'autre ou sur le moniteur de l'ordinateur personnel, la page sera affichée en utilisant la résolution actuelle de cet écran, PAS la résolution que vous avez utilisée lors de la conception de la page. Ne créez pas de pages Web pour une résolution spécifique! Il y a trop de rapports d'aspect et de résolutions d'écran différents pour s'attendre à un scénario «taille unique», qui avec la conception Web n'existe pas. Voici la solution: utilisez CSS3 Media Queries pour créer du code adaptable en résolution. Voici un exemple:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Vous voyez, ce que nous venons de faire, c'est de spécifier 3 ensembles de styles qui sont rendus à différentes résolutions. Dans le cas de notre exemple, si la résolution d'un écran est supérieure à 800px, le CSS pour 1024 sera exécuté à la place. De même, si l'écran affichant le contenu était de 1224px, le 1280 serait exécuté puisque 1224 est supérieur à 1024. Le site sur lequel je travaille maintenant fonctionne à toutes les résolutions de 800x600 à 1920x1080. Une autre chose à garder à l'esprit est que tous les moniteurs avec la même résolution n'ont pas la même taille d'écran. Vous pouvez mettre 15,4 ordinateurs portables côte à côte, alors que les deux se ressemblent, les deux peuvent avoir des résolutions radicalement différentes, car tous les pixels n'ont pas la même taille sur différents écrans LCD. Alors, utilisez des requêtes multimédias et commencez à créer votre site Web avec un écran d'ordinateur portable à haute résolution, en particulier 1280+. Aussi, créez chaque requête multimédia en utilisant une résolution différente sur votre ordinateur portable. Vous pouvez utiliser vos paramètres de résolution dans Windows pour réduire 800x600 et créer une requête multimédia à cette résolution, puis passer à 1024x768 et créer une autre requête multimédia à cette résolution. Je pourrais continuer encore et encore, mais je pense que vous devriez comprendre.

MISE À JOUR: Voici un lien vers l'utilisation des requêtes multimédias qui vous aidera à en expliquer davantage, Conception Web innovante pour les appareils mobiles avec requêtes multimédias

Ce tutoriel vous montrera comment concevoir pour tous les appareils. Il existe également des didacticiels pour les requêtes multimédias en particulier. J'ai développé l'intégralité du site pour effectuer un rendu sur tous les appareils, tous les écrans et toutes les résolutions en n'utilisant aucun sous-domaine, et uniquement CSS! Je travaille toujours sur le support des tablettes et des téléphones intelligents. Le site est parfaitement rendu sur n'importe quel ordinateur portable ou sur votre téléviseur LCD 50 pouces, et de nombreuses pages fonctionnent parfaitement sur tous les appareils mobiles. Si vous mettez tout votre code sur la page, vos pages se chargeront rapidement! Veillez également à prêter attention à la discussion dans cet article sur le CSS "background-size: cover;" ou "contiennent" des propriétés, elles rendront vos graphiques d'arrière-plan fluides et capables de rendre parfaitement à toutes les résolutions.

Suivez les tutoriels des sites et vous pouvez créer une seule page Web qui rend sur tout et n'importe quoi!

Essayez de cibler 1024 comme largeur minimale. Essayez à quoi il ressemble à 800, mais ne vous inquiétez pas trop pour que cela fonctionne. À 800x600, presque aucun des principaux sites Web ne fonctionnera, donc les personnes travaillant à cette résolution auront de toute façon des problèmes tout le temps.

Si vous optez pour une mise en page liquide, assurez-vous que le texte ne soit pas trop large , car lorsque les lignes sont trop longues, elles deviennent difficiles à lire. C'est la raison principale pour laquelle la plupart des sites Web ont une largeur fixe.

Je cible les moniteurs de 1024 pixels (mais n'utilise pas 100% de cet espace). J'ai abandonné ceux avec 800x600. Je préfère punir quelques-uns avec du matériel obsolète en les faisant défiler s'ils en ont besoin, plutôt que de punir tout le monde avec du nouvel équipement en gaspillant de l'espace.

Je suppose que cela dépend de votre public et de la nature de votre application.

En fin de compte, ce n'est pas une question de normes ou de bonnes pratiques en matière de balisage, mais plutôt de connaître votre public et de vous assurer que votre site Web fait ce que vous voulez qu'il fasse.

Il est plus important de prendre en compte la largeur de la fenêtre du navigateur plutôt que la résolution de l'écran - vous ne pouvez pas supposer que chaque pixel d'un écran sera alloué au navigateur (et même si c'est le cas, vous devez soustraire le chrome du navigateur). Si vous avez accès à des analyses qui rapportent la largeur du navigateur ( nb de largeur de navigateur, pas de résolution de l'écran), faites très attention.

C'est bien d'essayer d'accueillir la plus large gamme possible de fenêtres, mais il y a quelques limitations. Certains défis peuvent être traités avec les types de médias CSS , d'autres non. Certains peuvent être traités avec des mises en page fluides. Mais les mises en page fluides ne peuvent pas fonctionner dans toutes les situations, selon le type d'informations à afficher, la longueur de la ligne, le confort de lecture, etc. Certaines mises en page fluides ne fonctionnent pas dans les écrans larges. La plupart se cassent lorsqu'ils sont dimensionnés en dessous d'une certaine largeur, etc.

Même si j'aimerais personnellement concevoir des fenêtres d'environ 960 pixels et plus, vous ne pouvez pas toujours le faire. Ainsi, dans certains cas, il est toujours plus sûr de concevoir des fenêtres <= 760 pixels environ (affichage de 800 pixels de large, maximisé) - bien que nous puissions enfin rejeter cette limitation une fois pour toutes - pour le bureau au moins - approche très rapidement.

Là où les conversions sont un problème - et que vous avez une disposition de largeur fixe - vous feriez mieux d'avoir une bonne raison de mettre tout ce sur quoi l'utilisateur doit cliquer pour que la caisse enregistreuse passe "ka-ching" n'importe où à l'est du 760e pixel.

Idem pour la navigation principale.

Enfin, testez votre mise en page dans tout ce que vous pouvez mettre la main. Gros. Petit. Bureau. Portable. Les travaux. Il n'y a pas de substitut.

Je viens de prendre un échantillon des résolutions d'écran de tous les sites clients auxquels j'ai accès, cela comprend plus de 20 sites dans plus de 8 secteurs, voici les résultats:
texte alternatif http://unkwndesign.com/so/percentScreenResolutions.png
Sur cette base, je dirais que ça a l'air bien sur 1024x768 car c'est la majorité ici de loin. Ne vous inquiétez pas non plus de la hauteur, mais essayez d'éviter de faire plus de 1 à 2 pages imprimées avec votre taille de police par défaut, la plupart des gens ne liront pas une page aussi longtemps et si un utilisateur installe une barre d'outils qui prend espace vertical, ma préférence personnelle est que c'est leur problème, mais je ne pense pas que ce soit trop grave.

* notez que le pourcentage s'élève à 100,05% en raison de l'arrondissement.

Gardez à l'esprit que plus la résolution est élevée, moins le navigateur Internet sera optimisé.

Et certains navigateurs ont également des barres latérales.

Cela dépend de ce que vous voulez rendre, mais j'irais avec une disposition de largeur variable qui ne se brise pas à environ 800-900 largeur.

La hauteur n'est pas vraiment un problème.

sbeam a dit que «vous voulez toujours qu'il y ait 65 à 80 caractères par ligne». Ce n'est pas vrai. Wikipedia, par exemple, peut avoir 180 caractères par ligne. Ou était-ce censé être un site Web particulier?