Existe-t-il une taille standard pour la largeur d'un site Web dans une maquette? Quelle est cette taille? Pourquoi?

Je démarre la plupart de mes maquettes à une largeur de 1200 pixels, même si je conçois pour une résolution de 1024 pixels. J'ai mis en place des guides dans la maquette pour 1000px. La hauteur peut varier. La raison pour laquelle j'agrandis mon fichier de maquette est de voir comment le design se sent avec une marge de manœuvre autour. La plupart des gens utilisent plus de 1024 pixels ces jours-ci.

Existe-t-il une largeur standard pour la conception de maquettes de pages Web?

Oui Non peut-être?

Il était une fois (voir ci-dessous) la conception Web a largement tenté de créer une vue unique qui conviendrait assez bien sur la plupart des écrans. Au cours des cinq dernières années, cela a radicalement changé avec l'adoption du Responsive Web Design (RWD).

RWD est un principe de conception consistant à créer des conceptions d'une manière qui leur permet de s'adapter raisonnablement bien à n'importe quel appareil, quelle que soit la taille de l'appareil.

Dans le développement Web, les requêtes multimédias sont souvent utilisées pour appliquer différents ensembles de styles aux pages Web en fonction d'un certain nombre de facteurs. Certains facteurs communs incluent:

• largeur d'écran actuelle
• hauteur d'écran actuelle
• largeur de l'appareil
• hauteur de l'appareil
• orientation de l'appareil

Étant donné que les styles peuvent être ciblés sur des tailles d'écran spécifiques, il n'est pas rare de créer plusieurs ensembles de conceptions qui ciblent des plages spécifiques.

Pour être clair, il n'y a pas de «normes» établies. Il n'y a pas d'organe directeur ou d'organisation qui dit que "les concepteurs devraient faire des conceptions en suivant ces directives de dimensionnement", car en fin de compte, c'est un jugement.

Cela dit, l'industrie du développement Web a organiquement trouvé un ensemble de points d'arrêt communs qui se produisent encore et encore.

Les points d'arrêt typiques concernent la largeur d'écran actuelle et sont généralement:

_{unités en px}

• 320
• 480
• 768
• 1024
• 1200
• 1600

La raison de ces chiffres spécifiques est assez banale. L'iPhone d'origine avait un écran avec des dimensions de 320 × 480; l'iPad d'origine avait un écran de 768 × 1024; 1600 × 1200 sont courants pour les résolutions d'écran plus grandes.

Bien qu'il soit courant de voir des maquettes à certains ou à tous ces points d'arrêt, il est également courant de devoir fournir plusieurs rendus d'une page particulière montrant les points d'inflexion de conception intermédiaires.

Une composition de largeur fluide qui montre des éléments empilés à une largeur de 768 pixels peut devoir inclure une conception pour 900 pixels où les articles sont passés à deux colonnes. Si vous constatez que vous devez fournir de nombreux ensembles de conceptions pour ces points d'arrêt intermédiaires, je vous recommande fortement de concevoir des composants individuels et d'afficher les points d'arrêt où un composant change pour chaque composant, sans inclure le reste de la page dans la maquette.

Cela permet également d'éviter les pièges de conception courants lorsque des composants d'interface utilisateur spécifiques manquent ou ne sont pas conformes entre les points d'arrêt.

Ce qui suit est l'ancienne version de cette réponse que je garde pour la postérité, mais elle n'est plus pertinente depuis un certain temps

Je suis surpris que personne ne l'ait encore mentionné:

Google a un bel outil de développement appelé

Taille du navigateur

Cela devrait à peu près répondre à votre question seul.

J'ai quelques notes sur les tendances actuelles:

Actuellement, la grande majorité des utilisateurs ont des résolutions de 1024x600 (tablette / netbook) ou plus. Vous devez vous rappeler de supprimer environ 24pxles barres de défilement, ce qui laisse une belle largeur de 1000 pixels. Quant à la hauteur: les utilisateurs Web sont très bons pour faire défiler verticalement, car ils se sont habitués à faire défiler les roues sur les souris. La hauteur initiale est importante surtout pour les premières impressions.

Les utilisateurs ne sont pas aussi doués pour faire défiler horizontalement, il n'est donc pas recommandé de créer des dispositions plus larges que 1000 pixels.

De nombreux utilisateurs avec des écrans plus grands n'utilisent pas non plus l'intégralité de leur écran pour leur navigateur Web. Surtout maintenant que Windows 7 comprend une simple fonctionnalité glisser-n-dock pour déposer une fenêtre sur la moitié de l'écran.

En résumé:

• éviter les largeurs statiques supérieures à 1000 pixels
• assurez-vous que votre première impression est agréable à 1024x600
• n'ayez pas peur de déposer du contenu sous le pli.

Réponse courte: 775x400 pour 800x600 et pour 1024x768, utilisez 1000x500.

Réponse longue: vous ne pouvez jamais être sûr que votre présentation sera bonne sur votre ordinateur client (elle pourrait avoir un système d'exploitation différent, des navigateurs, un moniteur calibré différent ou une résolution inférieure avec une grande police réglée pour une meilleure lecture). Pour cette raison, j'ai tendance à toujours montrer la présentation sur mon ordinateur si je le peux.

Si je ne peux pas le montrer sur mon PC sur la taille, j'utilise ces règles personnelles (ne prenez pas mes mesures comme des saints, tout le monde a les siennes):

En tant que taille sûre, il est bon d'optimiser pour 800x600 (en supprimant la barre de défilement et la barre supérieure, j'utilise 775x400 comme "au-dessus de la ligne"). Mais de nos jours avec un écran moins cher avec une norme plus large, j'ai commencé à concevoir pour 1024x768 (1000x500)

L'important est d'optimiser non pas la hauteur mais la largeur. Hauteur, il est résoluble avec un simple défilement d'une souris, avec la largeur si vous n'avez pas de souris mac, vous ne pouvez pas faire défiler horizontalement pour afficher plus d'informations. Il est cependant bon de savoir où pourrait se positionner plus ou moins la ligne du bas de l'écran, même s'il est impossible de déterminer avec précision.

REMARQUE: j'utilise une telle hauteur même sur 1000 pixels car les gens ont tendance à avoir beaucoup de barres de défilement supplémentaires sur le navigateur de base (comme GoogleRank par exemple ou des signets, et bien d'autres), donc j'aime toujours concevoir pour la pire situation possible.

Ps désolé pour mon mauvais anglais :)

Nous avons un programme de suivi qui nous donne des informations sur nos utilisateurs. Plus de la moitié sont en 1024x768. Je l'utilise donc comme taille de moniteur "standard".

Cependant, ce n'est pas votre espace en direct pour votre site - les gens ont des barres latérales, ils n'ouvrent pas toujours la fenêtre du navigateur sur toute sa largeur, etc.

J'aime le système de grille 960 . Les chiffres sont flexibles et le site Web propose de nombreux modèles à télécharger. Je l'utilise pour mes maquettes, et tout le monde a été assez content jusqu'à présent.

Je devrais chercher des statistiques pour me soutenir (comme ce billet de blog SO ), mais 1024x768 a pris ou prend le relais comme dénominateur commun standard pour la résolution d'écran. Je conçois des maquettes web pour un public général avec une largeur de 1000 px pour tenir compte des barres de défilement et des bordures de fenêtre avec une résolution d'une largeur de 1024 px. Pour des publics plus spécifiques, Pekka a raison dans son commentaire. Découvrez quelle est la norme pour le public cible.

La taille du navigateur est aujourd'hui une question délicate car les gens utilisent deux types d'appareils, des ordinateurs avec des résolutions de plus en plus élevées et des téléphones avec des résolutions relativement faibles.

Si vous créez un site pour être un site, la plupart des ordinateurs d'aujourd'hui (la plupart étant à 90% ou plus) ont une résolution minimale de 1024. Si vous voulez un peu moins d'ordinateurs mais un bon pourcentage de 1200, c'est également dans cette plage.

Si vous créez un site mobile, la plupart des téléphones ont une résolution maximale de 480 pixels pour la navigation horizontale, mais la plupart d'entre eux ont également une sorte de système de rendu pour les sites plus grands.

La question de la taille concerne votre propre public, si votre cible est un groupe de designers, vous pouvez avoir un site plus grand, si ce sont des gens d'âge moyen à la recherche d'une nouvelle assurance automobile que vous devriez travailler un peu plus petit, et si c'est pour le téléphone les utilisateurs à regarder sur leur téléphone, encore plus petit.

Cela dépend totalement de votre site Web, en règle générale, j'aurais tendance à ne pas dépasser 1000 pour ces clients sur d'anciennes machines. Cependant, des études montrent maintenant que la conception pour 1200 est maintenant acceptable dans le monde du design, c'est donc certainement matière à réflexion.

Votre plan devrait être d'atteindre le plus petit dénominateur commun et si cela se trouve être Joe Dinosaur sur une machine Windows 95 800x600, c'est à qui vous devriez vous adresser.

Cela dépend aussi totalement de la conception de votre site Web. Je suis en train de concevoir un site Web pour mon agence et il va être de 800 de large, c'est de préférence, pour ne pas répondre à toute personne spécifique.

Malheureusement, il n'y a pas de taille standard, car les pages Web sont désormais accessibles sur plusieurs écrans. Bien que pour être plus sûr, veuillez rechercher les résolutions les plus populaires (par exemple, 1024x768) et la conception en fonction de la popularité.

La réponse est: non, il n'y a pas de «standard».

Je recommande d'utiliser 960px pour la largeur de votre modèle, car la plupart de la résolution d'écran est de 1028px, donc la barre de défilement n'apparaîtra pas et vous verrez l'arrière-plan que vous avez également utilisé.

Je vous suggère d'utiliser 1024px pour une largeur standard. Parce que, le nombre maximum de PC construits avec un moniteur crt et la résolution de ce moniteur est 1024 * 768px.