Quelle largeur de navigateur dois-je utiliser pour concevoir un site Web?

Je travaille sur la partie graphique du site Web et on m'a demandé de concevoir un site Web dans Photoshop. Je me demande quelles sont les dimensions moyennes et les largeurs de navigateur pour un site Web afin que je puisse créer ma maquette avec ces dimensions.

À l'ère moderne de la conception Web, la largeur du navigateur n'est pas pertinente. Il existe tellement d'appareils différents que vous avez besoin de rendre vos conceptions réactives , en ce sens qu'elles fonctionnent pour n'importe quel écran.

Pour ce faire, vous devez utiliser une sorte de système de grille de largeur de fluide et cibler des périphériques spécifiques à l'aide de requêtes @media .

Les requêtes multimédias sont simplement différents ensembles de règles CSS pour différentes tailles de port d'affichage. Les requêtes multimédias répondent également à la modification dynamique de la largeur de votre navigateur. Lorsque vous réduisez la taille de votre navigateur, la page répond en supprimant les flottants ou en passant de 12 colonnes à 1 ou 2. La réactivité réagit également aux utilisateurs sur les appareils mobiles et les tables lorsqu'ils changent l'orientation de portrait en paysage ou vice versa.

Tailles ciblées:

• Appareil mobile 320 x 480 en mode portrait
• 480 x 640 petites tablettes ou un iPhone en mode paysage
• Tablette 768 x 1024 en mode portrait
• Tablette 1024 x 768 en mode paysage
• 1200 + navigateurs de bureau
• 2900 ++ grands écrans ou conférences médiatiques (ce n'est pas un must mais que faire si quelqu'un regarde votre site sur un très grand écran.

Pour voir cela en action, jetez un œil à la grille Frameless . Ce n'est pas vraiment fluide, mais lorsque vous ajustez votre navigateur, il passe de 14 colonnes à 1

Twitter Bootstrap , un simple framework CSS, HTML et JS construit avec des composants d'interface utilisateur populaires, est également un bon exemple de pratiques de conception réactives modernes.

Une autre chose que vous voudrez peut-être également prendre en compte est la densité de pixels . L'iPhone 4 et le nouvel iPad ont des écrans rétine qui sont 2 fois plus nets que les écrans normaux. Cela rend la pratique de servir des sprites et des images au lieu de texte presque obsolète. Sur un iPad, les images avec du texte sont horribles.

Donc, la réponse à la question est qu'il n'y a pas de largeur de navigateur standard pour laquelle vous devriez concevoir. Vous devez prendre vos décisions de conception en fonction de vos utilisateurs et les rendre là où c'est le plus accessible au plus grand nombre.

De nombreux modèles de mise en page utilisent une largeur de 960 pixels, car ils s'inscrivent dans la résolution d'écran large courante de 1024 pixels, offrent un espace pour la barre de défilement et sont facilement divisibles par 2, 3, 4, 5, 6, 8, 10, 12 et 16 - idéal pour la colonne la disposition.

Voir http://960.gs pour un exemple.

D'autres frameworks comme bootstrap utilisent 940px pour prendre en compte certaines marges entre les colonnes.

Si vous ciblez les navigateurs de bureau, vous pouvez facilement atteindre environ 1000 pixels de large, si vous en avez besoin.

Résolution d'écran StatCounter

Pourquoi environ 1000 pixels alors que les écrans les plus typiques sont 1024 pixels ou plus? Parce que vous devez autoriser les barres de défilement et le chrome de la fenêtre.

Si vous ciblez spécifiquement les navigateurs mobiles, une largeur de 320 pixels peut être un bon choix, bien que les navigateurs mobiles mettent généralement à l'échelle le contenu pour l'adapter à la largeur de la vue, donc une largeur de 950 ou 960 pixels peut être excellente. Veuillez noter que 320 pixels CSS / HTML équivalent à 640 pixels d'appareil sur les appareils à haute résolution comme l'iPhone.

Résolution d'écran mobile StatCounter

Votre marché cible peut également changer les choses. Si vous ciblez un public averti en technologie, vous pouvez vous attendre à ce que les choses soient biaisées vers des appareils plus modernes. Si vous construisez un site gouvernemental, vous devrez répondre à un éventail plus large.

Aussi, comment construisez-vous le site? Si vous utilisez un système de grille, comme Blueprint CSS ou le système de grille 960, cela peut également dicter la taille (la plupart des systèmes de grille peuvent également être modifiés en d'autres tailles).

Vous voudrez peut-être également vous pencher sur la conception réactive si vous essayez de bien travailler sur mobile ainsi que sur ordinateur.

à cette époque, la taille du bureau calomnié dans le monde entier est de 1024x768, il est bon de créer un site Web au format 1003px ...