Quelle est la largeur et la hauteur les plus courantes pour lesquelles les sites Web sont conçus ces jours-ci?

Je travaille sur un projet de groupe et j'essaie d'amener mes collègues à soumettre un dessin concernant leur vision d'une candidature en ligne; cette application sera visualisée sur un PC. Bien que je soupçonne qu'il n'y a pas de norme industrielle, je suis certain qu'il doit y avoir des approches communes pour les sites avec des dispositions à largeur fixe. J'ai besoin de connaître le sens des proportions le plus courant dans l'industrie.

Nous allons garder ce prototype simple, et par conséquent, nous ne détecterons pas les navigateurs, les largeurs d'écran, etc. Donc, je me suis dit que je poserais cette question de manière simple dans l'espoir d'obtenir une réponse simple:

Quelle est la largeur et la hauteur les plus courantes pour lesquelles les pages Web sont conçues le plus récemment. Il serait très utile que je puisse trouver une source lorsque je dis à mes collègues pourquoi j'ai choisi un sens spécifique des proportions sur lequel baser leurs dessins.

Veuillez noter comment j'ai posé cette question:

Je ne demande pas les résolutions d'écran les plus courantes.
Je ne demande pas les navigateurs les plus courants.

Je veux savoir quelles dimensions la plupart des sites Web optent pour les mises en page de taille fixe. Je sais que les gens défilent normalement et donc la hauteur peut ne pas faire partie d'un ~ 'standard'; dans ce cas, je me contenterai de la largeur la plus courante.

website-design

— John R
source

Réponses:

Comme vous l'avez dit, il n'y a pas de hauteur standard car elle est extrêmement fluide, utilisez donc tout ce qui vous aide à visualiser votre conception au mieux.

Pour une largeur de 960 pixels, la largeur semble être la «norme» actuelle pour les conceptions à largeur fixe. Il est assez courant qu'un site Web soit dédié à l'exploration de mises en page à cette largeur .

(Je suppose que vous ne voulez pas que quiconque se lamente sur l'utilisation d'une conception fluide?)

— John Conde
source

Il n'y a vraiment pas de largeur standard à définir. Le nombre de personnes utilisant un moniteur 1024x768 a considérablement chuté ces dernières années, donc une largeur de 960 a moins d'importance. Avec l'émergence de tant de nouveaux appareils (téléphones intelligents, tablettes, ordinateurs portables et ordinateurs de bureau), vous devez créer un certain nombre de feuilles de style pour chaque cas.

Les requêtes multimédia CSS vous permettent de modifier les styles en fonction de la résolution d'écran de l'utilisateur. J'ai tendance à créer des sites avec une feuille de style générale qui gère tous les styles visuels, puis des sites séparés pour les mobiles, les tablettes, les ordinateurs de bureau / portables standard et les écrans extra larges qui structurent la page.

Consultez cette page sur W3.org pour quelques exemples - http://www.w3.org/TR/css3-mediaqueries/

C'est plus de travail, mais permettra à l'utilisateur d'obtenir la meilleure expérience possible, peu importe ce qu'il utilise pour naviguer sur son site.

— Carson
source

Ce que @John Conde a dit. En plus de cela, vous devez prendre en compte qui est votre public cible. Par exemple, si mon site Web est un blog technologique ou un blog de gadgets, il est probable que mon public cible soit un peu plus technophile que le public normal, donc je peux tirer pour une mise en page de 1200+ px. Ou si je me concentrais sur un site / blog / forum pour les webmasters, j'irais un peu plus loin.

À la fin de la journée, déterminez vos données démographiques de masse et suivez ce qui fonctionnerait finalement pour eux.

Deux choses TRÈS importantes à garder à l'esprit ...

1) Si votre conception peut fonctionner avec plus de 900 px, il n'y a aucune raison de l'étirer à 1200+ px même si vos données démographiques peuvent vous le permettre.

2) Assurez-vous que vous avez une structure appropriée en place qui peut accueillir les utilisateurs qui peuvent ne pas avoir votre résolution cible.

— Adil
source

Je ne suis pas d'accord avec le point # 2. Avec un écran large de 1366 pixels, sans doute la largeur la plus courante sur la plupart des ordinateurs portables vendus au cours des deux dernières années, vous ne pouvez pas installer deux fenêtres de 900 pixels l'une à côté de l'autre et voir les deux en même temps. Si vous n'avez qu'une seule disposition de 900 pixels, vous gaspillez 34% de votre espace horizontal avec des espaces. Dans ce cas, 1200px serait une largeur idéale . Alors oui, il y a une raison de l'étirer.

— nhinkle

@nhinkle: Je ne pense pas que vous ayez réellement lu le point n ° 2 ... quel rapport votre réponse a-t-elle à voir avec le montage de deux fenêtres 900 pixels côte à côte? De plus, veuillez lire la question correctement pour comprendre ce que John R demande. Ce n'est pas une discussion sur des cas d'utilisation extrêmes tels que vous voulez avoir 2 fenêtres 900px côte à côte ou dans mon cas, vouloir un moniteur 1600px (2 d'entre eux) pour faire une conception. Il s'agit plutôt de la grande majorité des utilisateurs qui ne sont ni vous ni moi ..

— Adil

Mes excuses, je voulais répondre à votre 1er point, pas à votre 2e. Je suis désolé si cela a causé de la confusion. Mon argument est toujours valable: la grande majorité des utilisateurs ont des écrans suffisamment larges pour qu'une disposition de 900 pixels gaspille beaucoup d'espace. Je suis d'accord avec la plupart de ce que vous avez dit dans votre réponse, mais votre première "chose à garder à l'esprit" n'est pas vraiment vraie. Si vos données démographiques peuvent vous offrir 1 200 pixels, vous devez utiliser ces 1 200 pixels, sinon vous perdez 300 de leurs pixels.

— nhinkle

@nhinkle: Vous avez mal interprété mon point # 1. Si ma conception peut facilement montrer le site dans un 900px pourquoi devrais-je l'étirer pour en faire 1200px? De plus, 13% des utilisateurs ont toujours une résolution d'écran de 1024x768.C'est un petit nombre mais c'est assez grand pour les gêner et perdre des ventes, des clics sur les annonces, des prospects ou quel que soit votre modèle commercial .... (données citées de: w3schools .com / Browsers / Browsers_display.asp )

— Adil

Je comprends ton point de vue. Mon point est que si vos utilisateurs ont généralement des écrans suffisamment larges pour utiliser une disposition de 1200 pixels, vous devriez. Par exemple, les sites d'échange de pile sont optimisés pour environ 1000 pixels de large, mais de nombreux utilisateurs ont demandé une option pour afficher côte à côte la source de la publication et l'aperçu du marquage, ce qui utiliserait plus d'espace horizontal. w3schools n'est pas un échantillon représentatif d'internautes, mais à part cela, cette discussion était pour les sites où 1200 serait logique si cela correspondait à la conception.

— nhinkle