Résolution de site Web recommandée (largeur et hauteur)?
Existe-t-il une norme sur la résolution commune des sites Web?
Nous ciblons des moniteurs plus récents, d’une largeur d’au moins 1280px, mais la hauteur peut varier, et chaque navigateur peut également avoir des hauteurs de barre d’outils différentes.
Y at-il une sorte de norme à cela?
Le conseil ces jours-ci 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 de plus de 1024. Bien que 1280 soit de plus en plus commun, il reste encore beaucoup à 1024 et d’autres en dessous. Optimiser pour cela mais ne pas ignorer les autres.
1024 = ~ 960 . La comptabilisation des barres de défilement, des bords de la fenêtre, etc. signifie que la largeur réelle d'un écran 1024x768 est environ 960 pixels . Certains outils sont basés sur une taille légèrement plus petite, environ 940 . C'est la largeur du conteneur par défaut dans Twitter bootstrap .
Ne concevez pas pour une taille . La taille des fenêtres varie. Ne présumez pas que la taille de l'écran est égale à la taille de Windows. Concevez pour un minimum raisonnable, mais supposez qu'il va s'ajuster.
Utilisez des schémas réactifs de conception et de liquide . Utilisez des dispositions qui s’ajusteront lorsque la fenêtre sera redimensionnée. Les gens font ça souvent, surtout sur les gros écrans. Ceci est juste une bonne pratique CSS. Plusieurs frameworks frontaux supportent cela.
Traitez le mobile comme un citoyen de première classe . Vous obtenez plus de trafic de périphériques mobiles tout le temps. Ceux-ci introduisent encore plus de tailles d'écran. Vous pouvez toujours optimiser pour 960, mais l'utilisation de techniques de conception Web réactives signifie que votre page s'ajustera en fonction de la taille de l'écran.
Journal informations d'affichage du navigateur . Vous pouvez obtenir des chiffres réels à ce sujet. J'ai trouvé des nombres ici et ici et ici . Vous pouvez également utiliser votre site pour collecter les mêmes données.
L'utilisateur défilera donc ne vous inquiétez pas trop de la hauteur . L'ancien argument était que les utilisateurs ne défileraient pas et que tout ce qui importait devait être placé au-dessus du pli. Cela a été renversé il y a des années. Les utilisateurs défilent beaucoup .
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 responsive design:
- Responsive Web Design (25 mai 2010), Ethan Marcotte, A List Apart.
- Responsive Web Design sur Wikipedia
- Modèles de disposition multi-périphériques (2012, 14 mars) Luke Wroblewski. Catalogue les modèles les plus populaires pour des dispositions d'écran multi-périphériques adaptables.
Outils et cadres frontaux pour une conception réactive et des dispositions liquides:
- Twitter Bootstrap
- Fondation Zurb
- 50 outils fantastiques pour une conception Web réactive (24 avril 2012) Denise Jacobs & Peter Gasston
Mauvaise idée, je crois. La séparation du contenu de la présentation visait essentiellement à permettre à votre page Web d’être affichée sur n’importe quel navigateur.
L'installation de limitations artificielles telles qu'une taille d'écran minimale limitera votre marché.
Cela dit, je pense que chaque poste de travail devrait pouvoir afficher le format 1024x768. Mais qu'en est-il des navigateurs fonctionnant sur des iPhones ou d'autres appareils à écran de veille, 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. Sauf si vous construisez spécifiquement un site Web pour une population avec une taille d'écran connue, vous êtes le plus sûr en vous assurant que votre conception fonctionne avec des écrans d'une largeur allant jusqu'à 800 pixels (environ 8% de la population surfant sur le Web, si ma mémoire est bonne). Il est sage de le faire bien s’adapter aux écrans plus grands, mais pas au détriment des gens qui surfent toujours à 800x600.
Voici une autre chose à prendre en compte: tout le monde n’exécute pas son navigateur en plein écran (pas moi). Donc, l'idée que si Ok soit conçu pour une "taille d'écran" spécifique (et large) ne fonctionne vraiment pas pour plusieurs raisons.
Mise à jour du 15/12/2010: Lorsque j'ai répondu à cette question pour la première fois, 800 pixels était une réponse appropriée. Cependant, à ce stade, je recommanderais une largeur de 1024 pixels (ou 960, comme le souligne une autre personne). La technologie marche sur ...
Voici les statistiques d'affichage du navigateur en 2008: http://www.w3schools.com/browsers/browsers_display.asp
Environ 50% des utilisateurs utilisent encore le format 1024x768. Si vous souhaitez que votre site ait une belle apparence en haute résolution, utilisez une mise en page flexible.
Voici un outil génial: taille du navigateur de Google Labs
il existe en fait des normes de l’industrie pour les largeurs (du moins selon Yahoo). Leurs largeurs supportées sont 750, 950, 974, 100%
Il existe des avantages de ces largeurs pour leurs grilles prédéfinies (dispositions de colonne) qui fonctionnent bien avec les dimensions standard des annonces si vous deviez en inclure.
Causer intéressant aussi mérite d'être regardé.
voir YUI Base
Je dirais que vous ne devez vous attendre à ce que les utilisateurs disposent d'un moniteur avec une résolution de 800x600. Le gouvernement canadien a des normes qui en font une des exigences. Bien que cela puisse sembler dérisoire à quelqu'un qui possède un moniteur grand écran sophistiqué, n’oubliez pas que tout le monde n’a pas un moniteur Nice. Je connais encore beaucoup de gens qui courent à 1024x768. Et il n’est pas rare de rencontrer quelqu'un qui court en 800x600, en particulier dans les cybercafés bon marché lors de ses voyages. En outre, il est agréable de devoir afficher la fenêtre de votre navigateur en plein écran si vous ne le souhaitez pas. Vous pouvez élargir le site sur des écrans plus larges, mais ne faites pas défiler l'utilisateur horizontalement. Déjà. Un autre avantage de prendre en charge des résolutions plus basses est que votre site fonctionnera sur les téléphones mobiles et que Nintendo Wii sera beaucoup plus facile.
Une note sur votre au moins 1280 de large, je dois dire que c'est beaucoup trop loin. La plupart des moniteurs non panoramiques 17 et même 19 pouces ne prennent en charge qu'une résolution maximale de 1280x1024. Et l'ordinateur portable panoramique de 14 pouces sur lequel je tape en ce moment ne fait que 1280 pixels de large. Je dirais que la résolution minimale la plus large que vous devriez rechercher est 1024x768, mais 800x600 serait idéale.
Jusqu'à présent, toutes les réponses 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 rende utilisable gratuitement, même sur des lecteurs d'écran et autres kits auxquels vous n'avez pas pensé.
Les schémas flexibles ou liquides conservent toutefois un peu le design, 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 faire différentes mises en page CSS pour le site et les appliquer en fonction de la résolution de l'utilisateur, ou si ce n'est pas possible (je n'ai pas encore fouillé dans cela), en faire une option à choisir.
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 directives que nous utilisons, qui semblent être assez utilisées et qui sont corroborées par les chiffres fournis par Google Analytics, consistent à concevoir le site de manière à ce qu'il fonctionne sur un écran de 1024 pixels de large et 768 pixels de haut (1024x768 pixels). et 1280x800 sont les résolutions les plus courantes (représentant au moins 70% du trafic total).
C’est la raison pour laquelle de nombreux sites (y compris celui-ci) utilisent une colonne centrale d’environ 1 000 pixels de large et dont le contenu le plus important se situe dans la partie supérieure de 500 à 600 pixels.
L'utilisation d'une disposition de 1 000 pixels de large fonctionne assez bien avec des écrans allant jusqu'à environ 1 680 pixels de largeur (généralement aussi hauts que ceux que l'on voit sur les ordinateurs portables, à l'exception des grands 17 "), mais commencent à paraître un peu ridicules en 1920 pixels Larges (ordinateurs haut de gamme, généralement des postes de travail), mais ces résolutions très élevées ne représentent pas un pourcentage important du trafic sur Internet général - 2% ou moins (par contre, si vous avez un public spécialisé comme ce site , le chiffre avec des résolutions élevées peut être légèrement supérieur).
Bien que la meilleure largeur puisse atteindre 1024, vous devrez régler la hauteur du compte pour divers paramètres du navigateur (barre de navigation, barre de favoris, barre de statut, etc.) et prendre en compte les paramètres de la barre des tâches. La 768 sera rapidement ramenée à environ 550.
Quelle que soit la taille de votre navigateur cible, veillez à inclure un espace pour les barres d'outils, les barres d'état et les barres de défilement du navigateur, comme ci-dessus. Internet Explorer (IME) dispose souvent de 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 au format 1024 x 768, j'essaierais de créer un design d'environ 960 à 980 pixels de large et 600 pixels de haut pour plus de sécurité. De cette façon, vous pourrez faire défiler si nécessaire et un bel espace blanc (si le design l’exige). Je recommande fortement les grilles YUI dans les cas où vous devez cibler des tailles spécifiques:
Personnellement, je suis toujours resté à une largeur maximale de 1000 pixels, centré au milieu de la page (via la marge gauche/droite: auto).
Si vous utilisez moins de 1024x768, il est temps de procéder à la mise à niveau. Sérieusement. Nous sommes presque en 2010. Vous pouvez acheter des moniteurs LCD à bas prix avec une résolution native de 1280x1024.
Je vous suggère de jeter un coup d'œil aux requêtes des médias. Ceci est une nouvelle addition utile à CSS qui a tellement de sens, vous vous demanderiez pourquoi cela n’a pas été implémenté waaay 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 présentation à 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 constitue un atout majeur pour le développement.
Bon, je vois beaucoup de désinformation ici. Pour commencer, créer une page Web avec une résolution donnée, par exemple 800x600, rendra le rendu de cette page correctement en utilisant cette résolution uniquement! Lorsque cette même page est affichée sur l'ordinateur portable ou le moniteur d'un autre 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 existe trop de formats d’affichage et de résolutions d’écran différents pour que l’on puisse s’attendre à un scénario "taille unique", qui n’existe pas avec la conception Web. Voici la solution: Utilisez CSS3 Media Queries pour créer un code adaptable à la 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 était de spécifier 3 ensembles de styles qui s'affichent à différentes résolutions. Dans le cas de notre exemple, si la résolution d'un écran est supérieure à 800 pixels, le code CSS pour 1024 sera exécuté à la place. De même, si l'écran affichant le contenu était de 1224 pixels, le 1280 serait exécuté, car 1224 était plus grand que 1024. Le site sur lequel je travaille fonctionne maintenant à toutes les résolutions 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 placer 15.4 ordinateurs portables côte à côte, alors que les deux se ressemblent, ils pourraient avoir des résolutions radicalement différentes, car tous les pixels ne sont pas de la même taille sur des écrans LCD différents. Alors, utilisez les requêtes des médias et commencez à créer votre site Web avec un écran d'ordinateur portable haute résolution, en particulier 1280+. Créez également 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 ajuster le format 800x600 et créer une requête multimédia à cette résolution, puis basculer vers 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 de requêtes multimédia qui vous aidera à mieux comprendre Conception Web innovante pour les appareils mobiles avec requêtes multimédia
Ce tutoriel va vous montrer comment concevoir pour tous les appareils. Il existe également des tutoriels pour les requêtes multimédias. J'ai développé l'ensemble du site pour qu'il rende tous les appareils, tous les écrans et toutes les résolutions sans sous-domaines, et uniquement en CSS! Je travaille toujours sur le support des tablettes et des téléphones intelligents. Le site s'affiche parfaitement sur tout ordinateur portable ou votre téléviseur 50 pouces LCD. De nombreuses pages fonctionnent parfaitement sur tous les appareils mobiles. Si vous mettez tout votre code sur la page, vos pages se chargeront rapidement! Assurez-vous également de prêter attention à la discussion dans cet article sur le CSS "background-size: cover;" ou "contenir" des propriétés, ils rendront vos graphiques d'arrière-plan fluide et capable de rendre parfaitement à toutes les résolutions.
Suivez les didacticiels des sites et vous pouvez créer une seule page Web qui affiche tout et n'importe quoi!
Les concepteurs me posent souvent des questions sur la largeur, mais aussi sur la hauteur à utiliser pour "tout conserver au-dessus du pli". Voici une réponse que j'ai donnée récemment -
Pour ce qui est de la largeur, je ne suis pas un concepteur, mais j’ai lu que la largeur de 960px est ce qu’il faut faire ces jours-ci, car elle se prête à être divisée en colonnes qui ont l’air agréable et qui s’intègre bien dans la plupart des affichages. Si vous le pouvez, concevez une mise en page liquide, mais cela n’est pas toujours pratique, en fonction de votre concepteur, de vos compétences en CSS, des images et de 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). C'est la largeur de colonne optimale pour le texte, et il s'est avéré qu'il était 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 simplement 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 au-dessus), vous devriez pouvoir utiliser un bloc fixe de 600 pixels de haut. Mais il existe de nombreux formats d'affichage, le navigateur chrome 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 il est difficile de tout mettre au-dessus du pli pour tout le monde, car il se peut que vous n'ayez que 400 pixels environ, selon les statistiques réelles.
Et enfin un bon long article qui va dans les détails (je posterais plus mais SO dit que je suis trop noob) - Comment concevoir pour les tailles de navigateur - baekdal.com
Je viens de prendre un échantillon des résolutions d'écran de tous les sites clients auxquels j'ai accès. Cela inclut plus de 20 sites dans plus de 8 industries. Voici les résultats:
alt text http://unkwndesign.com/so/percentScreenResolutions.png
Sur cette base, je dirais que cela va bien sur 1024x768 car c'est la majorité ici à long terme. Ne vous inquiétez pas non plus autant de la hauteur. Toutefois, évitez de créer plus de pages imprimées avec plus de 1 à 2 pages à la taille de police par défaut. La plupart des gens ne liront pas une page aussi longue. Si un utilisateur installe une barre l’espace vertical, ma préférence personnelle est que c’est leur problème, mais je ne pense pas que ce soit trop grave.
* À noter que les pourcentages ont été arrondis à 100,05%.
Essayez de cibler 1024 comme largeur minimale. Essayez d’avoir une apparence 800, mais ne vous inquiétez pas trop pour que cela fonctionne. À 800x600, pratiquement aucun des principaux sites Web ne fonctionnera. Les personnes qui travaillent à cette résolution auront donc toujours des problèmes.
Si vous envisagez 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érerais punir les quelques-uns avec du matériel obsolète en les faisant défiler s'ils le souhaitent, plutôt que de punir tout le monde avec du nouveau matériel en gaspillant de l'espace.
Je suppose que cela dépend de votre public et de la nature de votre application.
sbeam a déclaré: "vous voulez toujours qu'il y ait entre 65 et 80 caractères par ligne". Ce n'est pas vrai. Wikipedia, par exemple, peut comporter 180 caractères par ligne. Ou était-ce censé être un site Web particulier?
En fin de compte, il ne s'agit pas de normes ni de meilleures pratiques en matière de marquage, mais de connaître votre public et de vous assurer que votre site Web fait ce que vous souhaitez qu'il fasse. .
Il est plus important de considérer 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 affichage sera attribué au navigateur (et même si c'est le cas, vous devez soustraire le chrome du navigateur). Si vous avez accès à des analyses indiquant la largeur du navigateur ( n.b. , pas la résolution de l'écran), faites très attention.
Il est agréable d'essayer de prendre en charge la plus grande gamme possible de fenêtres, mais il existe certaines limitations. Certains défis peuvent être résolus avec types de média CSS , d'autres non. Certains peuvent être manipulés avec des dispositions fluides. Cependant, les présentations fluides ne peuvent pas fonctionner dans toutes les situations, en fonction du type d’information à afficher, de la longueur de ligne, du confort de lecture, , etc. t travailler dans des écrans larges. La plupart se cassent lorsqu'ils sont dimensionnés en dessous d'une certaine largeur, , etc.
Bien que personnellement, j’aimerais concevoir des vues 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 (écran large de 800 pixels, maximisé) - bien que nous puissions enfin lever cette limitation une fois pour toutes - du moins pour le bureau - approche très vite.
Lorsque les conversions posent problème - et que vous avez une disposition de largeur fixe -, vous feriez bien de mettre tout ce sur quoi l'utilisateur doit cliquer pour que la caisse enregistreuse puisse "ka-ching" n'importe où à l'est de la 760e. pixel.
Idem pour la navigation principale.
Enfin, testez votre mise en page dans tout ce que vous pouvez mettre la main sur. Gros. Petit. Bureau. Ordinateur de poche. Les travaux. Il n'y a pas de substitut.
N'oubliez pas que plus la résolution est élevée, moins le navigateur Internet sera optimisé.
Et certains navigateurs ont aussi des barres latérales.
Cela dépend de ce que vous voulez rendre, mais je choisirais une disposition à largeur variable qui ne se casse pas à une largeur d'environ 800 à 900.
La hauteur n'est pas vraiment un problème.