Quelle est la largeur standard d'un site Web en pixels?
Quelle est la largeur standard pour un site Web en pixels ou où sont les statistiques?
Il n'y a pas de standard, bien que la plupart des développeurs supposent le standard 1024x768.
Il existe un système de grille CSS nommé 960grid qui prend la largeur du corps à 960px, puis divise les colonnes en 96 colonnes de 10px ou 80 de 12px.
Le problème est le suivant: les écrans des ordinateurs deviennent de plus en plus grands, lentement, mais dans certaines régions.
D'autre part, chez Tech-Top, vous avez des écrans plus petits dans les appareils mobiles et les netbooks.
Faire face à cette réalité peut être douloureux. CSS Media Queries est à la rescousse. Alternativement, vous pouvez utiliser le lien tag (avec rel ordinateur de poche) pour fournir une version alternative aux appareils mobiles.
Suivez quelques liens de référence pour vous
- http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-webwebsite/ =
- http://www.alistapart.com/articles/responsive-web-design/
- http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-alternate
- http://dev.w3.org/csswg/css3-mediaqueries/
Quelle est la largeur standard d'un site Web en pixels?
Tout nombre supérieur à 0 et inférieur à l'infini.
Les meilleures pratiques actuelles en matière de Responsive Web Design (RWD) consistent à prendre en charge tous les périphériques, quelle que soit leur largeur en pixels. Cela implique généralement l’utilisation de requêtes multimédia pour fournir différents styles pour différentes gammes de tailles d’écran. Les gammes réelles utilisées importent moins que la conception étant cohérente pour toutes les tailles et que le site conserve les fonctionnalités pour toutes les tailles.
Les utilisateurs sont très susceptibles de voir différentes tailles d'écran sans trop y penser. Vous souhaitez donc minimiser les surprises lorsque vous faites glisser une fenêtre vers la moitié de leur écran ou que vous inclinez leur téléphone.
Certaines plages de largeur couramment utilisées sont:
- très petit : 0-480
- petit : 480- 768
- moyen : 768-1024
- large : 1024-1200
- extra large : 1200+
Ces gammes sont si courantes que je dirais qu'elles sont pratiquement une norme. Toutes les plages ne doivent pas nécessairement être utilisées, par exemple, un site peut avoir une largeur de fluide inférieure à 768, puis une largeur fixe et centrée pour 768+.
Cela dit, sachez que les numéros que vous utilisez n'ont pas d'importance, tant que le site est fonctionnel, quel que soit le périphérique sur lequel un utilisateur choisit de le consulter.
où sont les statistiques?
Passons maintenant à la partie délicate, les données réelles. Si vous modifiez un site, les seules données qui importent sont les vôtres. Ce que Wikipedia ou Stack Overflow, ou Google, ou n'importe quel autre site dit-analytique-data dit-grand-pourrait-liste-pourrait ne pas avoir de pertinence pour vos données pour votre site.
Si vos statistiques montrent que la plupart des utilisateurs utilisent principalement une plage de largeurs de périphérique particulière, vous devriez probablement vous concentrer sur la priorité. Cela dit, si votre conception réagit correctement, vous n’avez pas besoin de vous concentrer sur une taille particulière.
Pour les nouveaux sites Web ou les sites qui n'avaient pas d'analyse auparavant, envisagez fortement d'utiliser une approche mobile d'abord et veillez à utiliser l'analyse afin que vous puissiez vous adapter correctement à votre base d'utilisateurs.
Ancienne version pré-RWD obsolète pour la postérité
Je suis surpris que personne d'autre n'ait pensé à mentionner taille du navigateur par Google .
En ce qui concerne les normes:
80% des téléspectateurs peuvent gérer une largeur maximale de 1000 pixels, mais ceux qui peuvent gérer une largeur supérieure à 1000 pixels ne le sont souvent pas. Avec les écrans larges, beaucoup de gens aligneront leurs fenêtres sur la moitié de l'écran. Maintenant que Win7 prend en charge le drag-n-dock, il est probable qu'il deviendra encore plus populaire.
En ce qui concerne la hauteur: votre première impression auprès de l'utilisateur se situe en haut de la page, jusqu'à environ 600 pixels. Cependant, la plupart des utilisateurs savent et s'attendent à ce que le contenu tombe "en dessous du pli" et soient disposés et capables de faire défiler.
Si vous voulez aller au-delà de 1000 pixels, je vous recommande vivement une disposition fluide afin que les utilisateurs de netbooks et d'écrans plus petits puissent toujours voir le contenu correctement.
~ 960px a tendance à être une largeur normalisée, mais cela dépend vraiment du contenu et du style.
L’an dernier, j’ai fait un petit test en utilisant Google Analytics pour savoir ce que sont largeur et hauteur moyennes du navigateur interne (ce que les utilisateurs voient réellement).
Comme d'autres l'ont dit, il n'y a pas de norme pour ce genre de chose. Bien que, voici quelques conseils qui feront ou freineront votre site Web:
J'ai toujours utilisé soit des pourcentages, soit un scénario dans le pire des cas: la résolution d'écran la plus petite que vous rencontriez couramment est de 800 x 600, et même cela est rare. Tout ce qui se trouve en dessous se trouve probablement sur un appareil mobile. Une largeur de 775 pixels est un bon moyen d’utilisation, ou tout simplement 80% si vous savez que votre site Web aura toujours un attrait s’il est étendu à un écran plus grand. Les problèmes les plus courants sont que le contenu du texte (lorsqu'il est réduit à 1600px) semble vide et court. Avoir votre site Web à une largeur de 775px résoudra ce problème, mais il pourrait ne pas sembler bien avec un espace ouvert énorme de chaque côté.
Ne faites jamais défiler les utilisateurs vers la gauche ou la droite. Couper le contenu des côtés est le moyen le plus rapide de perdre des clients ou des lecteurs potentiels.
Avoir votre navigation quelque part vers le haut ou dans un endroit où les utilisateurs n'ont pas besoin de faire défiler pour la trouver.
Et juste un conseil de contenu; soit avoir des graphiques élevés/peu d'informations, soit des informations élevées/peu graphiques. Essayer de combiner les deux semble toujours terrible.
Il est utile de connaître la popularité des résolutions d'écran et de baser votre modèle en fonction de son utilisation générale ... Personnellement, je vous recommande d'utiliser Responsive Design - ainsi votre site fonctionnera pour tous les appareils et toutes les résolutions.
à partir de janvier 2013.
1366x768 25,4%
1920x1080 11,0%
1280x1024 9,7%
1440x900 7,3%
1280x800 8,2%
1680x1050 5,7%
1600x900 5,0%
1920x1200 2,9%
1360x768 2.1%
2560x1440 1,1%
Autres 11,6%
Google Analytics enregistre les résolutions d'écran du visiteur. Vous pouvez facilement créer un rapport personnalisé pour vérifier quelles sont les tailles d'écran courantes de vos visiteurs . Voici les statistiques (top 15) pour mon site web pour mai 2013:
Rank Resolution % of Visits
---- ---------- -----------
1 1366x768 23.0%
2 1920x1080 17.7%
3 1440x900 8.4%
4 1280x1024 8.4%
5 1680x1050 7.1%
6 1280x800 6.9%
7 1600x900 6.0%
8 1920x1200 4.7%
9 1024x768 4.4%
10 2560x1440 2.3%
11 1360x768 2.1%
12 1280x768 1.0%
13 1600x1200 0.7%
14 1280x720 0.7%
15 1152x864 0.5%
Les statistiques varient d'un site à l'autre en fonction du type de trafic reçu. Je préfère moi-même les conceptions fluides avec un pourcentage de largeur, 1000px min-width et un max-width raisonnable.
La norme serait "aussi large/hauteur que possible". Cela dépend de l'écran de l'utilisateur:
Je pense que cela dépend du contenu du site.
Par exemple, si vous n'avez pas besoin de barre latérale, etc., et si vous aimez les conceptions minimales, vous pouvez définir une largeur de page Web de 500 pixels.
Donc, je ne crois pas (et je n'aime pas) la standardisation de la taille de la mise en page Web.
960 pixels est le plus sûr, car il fonctionne sur un écran 1024x768 et laisse de la place pour la barre de défilement. Il fonctionne également sur un iPhone en mode paysage (car il double son écran de 480x320 à un format effectif de 960x640 et ne possède pas de barre de défilement).
Étant donné que la plupart des moniteurs à écran large actuels ont une résolution de "1440x900" ou plus large, je penserais qu'un 1280 pixels de large devient de plus en plus la "norme", en particulier pour l'affichage d'images.
REMARQUE: La largeur de nombreux écrans plus anciens de 17 et 19 pouces au format 4: 3 était de 1280 pixels de large.
La norme n'existe pas vraiment et les statistiques dépendent entièrement des données démographiques de la cible. Viser le personnel technique se traduira généralement par un meilleur matériel et des résolutions plus élevées, le moins technique étant l’inverse. Mais ensuite, il existe des téléphones, des netbooks, etc. qui ont des résolutions nettement inférieures à la norme dans la plupart des cas.
Pour référence, je suppose habituellement un minimum de 1024x768 maintenant.
En tout cas, voici quelques exemples: http://www.w3schools.com/browsers/browsers_display.asphttp://www.w3counter.com/globalstats.php