Quelle est la largeur standard d'un site Web en pixels ou où sont les statistiques?

Il n'y a pas de norme, bien que la plupart des développeurs supposent la norme 1024x768.

Il existe un système de grille CSS nommé 960grid qui suppose que la largeur du corps est de 960px, puis casse les colonnes en 96 colonnes avec 10px, ou 80 avec 12px.

Le problème est le suivant: les écrans PC deviennent de plus en plus grands toujours, lentement dans certaines régions, mais le sont.

En revanche, chez tech-tops, les écrans des appareils mobiles et des netbooks sont plus petits.

Faire face à cette réalité peut être douloureux. Il y a des requêtes CSS Media à la rescousse. Alternativement, vous pouvez utiliser le lien de balise (avec un ordinateur de poche rel) 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-website/
• 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 chaque appareil, quelle que soit sa largeur en pixels. Cela implique généralement l'utilisation de requêtes multimédias pour fournir différents styles pour différentes plages de tailles d'écran. Les gammes réelles utilisées importent moins que la conception étant cohérente entre les tailles et que le site conserve la fonctionnalité entre les tailles.

Les utilisateurs sont très susceptibles de voir différentes tailles d'écran sans y penser beaucoup, donc vous voulez minimiser la quantité de surprise lorsqu'ils font glisser une fenêtre pour l'ancrer sur la moitié de leur écran, ou se trouvent incliner leur téléphone.

Certaines plages de largeur courantes utilisées sont:

• très petit : 0-480
• petit : 480- 768
• moyen : 768-1024
• grand : 1024-1200
• très grand : 1200+

Ces gammes sont si courantes que je dirais qu'elles sont pratiquement standard. Il n'est pas nécessaire d'utiliser toutes les plages, par exemple un site peut avoir une largeur fluide pour tout ce qui est inférieur à 768, puis une largeur fixe et centrée pour 768+.

Cela dit, sachez que les chiffres que vous utilisez n'ont pas d'importance tant que le site est fonctionnel sur l'appareil 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 repensez un site, les seules données qui comptent sont les vôtres. Ce que Wikipédia ou Stack Overflow, ou Google, ou tout autre site Web de grande taille qui pourrait énumérer des données analytiques dit n'est pas pertinent pour vos données pour votre site.

Si vos statistiques montrent que la plupart des utilisateurs utilisent principalement une plage particulière de largeurs de périphérique, vous devez probablement vous concentrer sur le service à ces utilisateurs en premier. Cela dit, si votre design est bien réactif, vous n'aurez pas besoin de vous concentrer sur une taille particulière.

Pour les nouveaux sites Web ou les sites qui ne disposaient pas auparavant d'analyses, envisagez sérieusement d'utiliser une approche axée sur le mobile et assurez-vous d'utiliser des analyses afin de pouvoir 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 la taille du navigateur par google .

Quant aux normes:

80% des téléspectateurs peuvent gérer jusqu'à 1000 pixels de largeur, mais ceux qui peuvent gérer plus de 1000 pixels de largeur ne le font pas souvent. Avec les moniteurs à écran large, de nombreuses personnes 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 pour l'utilisateur est 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 sont prêts et capables de faire défiler.

Si vous souhaitez aller au-delà de 1000 pixels, je recommande fortement une mise en page fluide afin que les utilisateurs de netbooks et d'écrans plus petits puissent toujours voir le contenu correctement.

~ 960 px a tendance à être une largeur standardisée, mais cela dépend vraiment du contenu et du style.

J'ai fait un petit test l'année dernière en utilisant Google Analytics pour savoir quelles sont les largeurs et hauteurs 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. Cependant, voici quelques conseils qui permettront de créer ou de freiner votre site Web:

J'ai toujours utilisé des pourcentages ou une construction dans le pire des cas: la plus petite résolution d'écran que vous rencontrerez généralement est 800x600, et même cela est rare. Tout ce qui se trouve en dessous se trouve probablement sur un appareil mobile. La largeur de 775 pixels est un bon moyen à utiliser, ou tout simplement 80% si vous savez pertinemment que votre site Web aura toujours un attrait lorsqu'il sera mis à l'échelle sur un écran plus grand. Les problèmes les plus courants sont que le contenu du texte (lorsqu'il est mis à l'échelle à des largeurs de 1600 pixels) semble vide et court. Avoir votre site Web à une largeur de 775 pixels corrigera cela, mais il pourrait ne pas sembler bon avec un espace ouvert massif de chaque côté.

Ne faites JAMAIS défiler vos 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.

Ayez 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 sur le contenu; avoir des graphiques élevés / peu d'informations ou des informations élevées / faibles graphiques. Essayer de combiner les deux semble toujours terrible.

La norme serait "aussi large / hauteur que possible". Cela dépend de l'écran des utilisateurs:

http://www.w3schools.com/browsers/browsers_display.asp

Il est utile de connaître la popularité des résolutions d'écran, puis de baser votre modèle sur une utilisation générale par la majorité ... Personnellement, je recommande d'utiliser Responsive Design - de cette façon, votre site fonctionne pour tous les appareils et toutes les résolutions.

À partir de janvier 2013.

1. 1366x768 25,4%

2. 1920x1080 11,0%

3. 1280x1024 9,7%

4. 1440x900 7,3%

5. 1280x800 8,2%

6. 1680x1050 5,7%

7. 1600x900 5,0%

8. 1920 x 1200 2,9%

9. 1360x768 2,1%

10. 2560x1440 1,1%

11. 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) de 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 qu'il reçoit, donc concevez en conséquence. Je préfère moi-même les conceptions fluides avec un pourcentage de largeur, 1000 pixels min-widthet un raisonnable max-width.

Il n'y a pas vraiment de standard, et les statistiques dépendent entièrement de la démographie cible. Le fait de viser les techniciens se traduira généralement par un meilleur matériel et des résolutions plus élevées, moins techniques à l'inverse. Mais il y a aussi 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 généralement un minimum de 1024x768 maintenant.

En tout cas, voici quelques exemples : http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php

Je pense que cela dépend du contenu du site Web.

Par exemple, si vous n'avez pas besoin de barre latérale, etc., et si vous aimez les conceptions minimales, vous pouvez définir la largeur des pages Web à 500 pixels.

Donc, je ne crois pas (et je n'aime pas) le standart sur les tailles de 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, et fonctionne également sur un iPhone en mode paysage (car ce pixel double son écran 480x320 en un 960x640 efficace et n'a pas de barre de défilement).

Étant donné que la plupart des moniteurs à écran large d'aujourd'hui ont une résolution de «1440x900» ou plus large, je pense qu'une largeur de 1280 pixels devient de plus en plus la «norme», surtout quand il s'agit d'afficher des images.

REMARQUE: la largeur de 1280 pixels était la largeur de nombreux écrans plus anciens de 17 et 19 pouces au rapport 4: 3.

960 pixels est la meilleure largeur pour les sites