Quelle est la largeur optimale de la page Web?

Concevoir un site Web et définir la largeur de la page Web sur une largeur optimale est une conversation qui vaut la peine d'être menée. Beaucoup d'entre vous ont remarqué que j'ai récemment modifié la largeur du design de mon blog. J'ai poussé la largeur de page à 1048 pixels. Certains d'entre vous sont peut-être en désaccord avec le mouvement - mais je voulais partager quelques statistiques et raisons pour lesquelles j'ai poussé la largeur du thème si large.

Cependant, 1048 pixels n'était pas un nombre aléatoire.

Il y a eu deux facteurs clés dans l'élargissement de la largeur de ma page:

  • Changer la largeur YoutubeYoutube propose désormais des tailles d'intégration plus grandes. Si vous cliquez sur le petit engrenage dans la barre latérale de la page vidéo Youtube, des options vous sont proposées pour des tailles plus grandes ainsi que le thème. Étant donné que les vidéos en haute définition deviennent monnaie courante sur Youtube, je voulais incorporer ces vidéos dans mon blog et les afficher avec autant de détails que possible (sans consommer toute la largeur de la page).
  • La publicité typique est disponible en largeurs de 125, 250 et 300 pixels. 300 pixels semblent apparaître de plus en plus sur les sites de revenus publicitaires et je voulais les incorporer parfaitement dans ma barre latérale.

Et bien sûr, il y a un peu de remplissage à gauche et à droite de la page, le contenu et la barre latérale ... donc le nombre magique était de 1048 pixels pour mon thème:

Largeur optimale du site Web

Ai-je vérifié les statistiques de mes lecteurs?

Oui bien sûr! Si une majorité de mes visiteurs utilisaient des écrans de résolution inférieure, j'aurais certainement eu des doutes sur l'agrandissement de ma page. Largeur et pourcentageAprès avoir sorti les résolutions d'écran de mon package Analytics (dans Google, c'est Visiteurs> Capacités du navigateur> Résolutions d'écran), j'ai construit une feuille de calcul Excel des résultats et analysé la largeur du champ de résolution.

Google fournit une résolution de 1600 × 1200, vous devez donc tout prendre à gauche du "x", le multiplier par 1 pour en faire un résultat numérique afin que vous puissiez trier par ordre décroissant, puis faire un SUMIF et voir combien de visites sont supérieurs ou inférieurs à la largeur du motif que vous regardez.

= GAUCHE (A2, TROUVE ("x", A2,1) -1) * 1

Ai-je abandonné les 22% de lecteurs qui utilisent une résolution plus petite? Bien sûr que non! L'avantage d'une mise en page avec votre contenu à gauche et votre barre latérale à droite est que vous pouvez vous assurer que votre contenu est toujours dans la largeur de la majorité des navigateurs. Dans ce cas, 99% de mes lecteurs ont une largeur supérieure à 640 pixels, donc ça va! Je ne veux pas qu'ils manquent totalement la barre latérale, mais c'est secondaire au contenu.

9 Commentaires

  1. 1

    Je suggère une mise en page hybride et une largeur de conteneur CSS de 100%. Tant que vous avez une largeur fixe pour la barre latérale, l'en-tête, le pied de page et les zones de contenu principal s'ajusteront pour s'adapter à la largeur restante de l'écran. Remplit 100% de la fenêtre du navigateur de tout le monde, quelle que soit la résolution du moniteur de l'utilisateur. Vous n'avez plus besoin de compter les pixels ni de suivre les statistiques des utilisateurs concernant les résolutions du moniteur.

    • 2

      J'aime beaucoup les mises en page hybrides, Bob - mais malheureusement, elles ne fonctionnent parfois pas bien avec le contenu réel. Peut-être que je suis paresseux, mais il m'est plus facile de savoir que max et min sont 640px dans mon site. Les étirements sont difficiles à concevoir lorsque j'écris les articles.

      Juste une préférence personnelle je suppose!

  2. 3

    Essentiellement, je suis d'accord avec votre conclusion, mais si j'utilise une configuration de largeur fixe, je limite la largeur à 960 pixels.

    Il faut tenir compte des barres de défilement verticales et d'autres barres de raccourcis du navigateur qui prennent une largeur supplémentaire. En restant à moins de 960 pixels, on est assuré qu'il n'y a pas de défilement de gauche à droite sur une résolution d'écran de 1024 pixels de largeur.

    Andy Ebon

  3. 4
  4. 5

    très étrange. Dans Firefox, votre site a une barre de défilement horiz à 1048, et n'a pas un look propre jusqu'à ce que vous sortiez à 1090.

    Merci pour les excellentes statistiques des résolutions Google

  5. 6

    Puisque vous avez votre défini sur 1048px, votre site provoque des barres de défilement horizontales sur un écran de 1024. Je pense qu'il aurait été préférable de parcourir un 100px sur la largeur (et le remplissage) de votre barre latérale et de votre zone de contenu pour qu'il s'adapte à un 728 × 1024. C'est ce qui est la meilleure pratique aujourd'hui.

    Le seul cas contre cela serait si les chiffres d'analyse le soutiennent… mais puisque vous n'avez pas fourni ces données dans votre article, je dirais que la conception de votre page est défectueuse.

  6. 7
  7. 8

    Homme idiot
    Tout le monde n'utilise pas toutes les fenêtres en plein écran - en fait, je parierais que peu le font. 

    J'ai votre blog dans un windo à 80%… et voilà, une barre de défilement horizontale

    Et ce qui est hors de l'écran… permet de voir… rien.

    Votre barre de défilement est donc inutile.

    Un moyen simple de perdre des lecteurs !!

    • 9

      Le contenu est centré dans la page @ heenan73: disqus, fournissant au lecteur exactement ce dont il a besoin. Si je perds des lecteurs parce qu'ils peuvent à la fois voir le contenu ET voir une barre de défilement horizontale… je ne suis pas sûr qu'ils soient les lecteurs que je recherche. Il y a certainement quelque chose d'unique dans notre contenu qui le pousse à 1217 pixels, je vais donc le localiser et le réparer. Ce message a en fait été écrit sur un thème précédent. Merci de l'avoir porté à mon attention!

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..