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 font plus de 640 pixels de large, 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

    I suggest a hybrid layout and a CSS container width of 100%. As long as you’ve got a fixed width for the sidebar, the header, footer, and main content areas will adjust to fit the remaining width of the screen. Fills 100% of everyone’s browser window, regardless of the user’s monitor resolution. Then you don’t have to count pixels any more or keep track of user statistics regarding monitor resolutions.

    • 2

      I really like hybrid layouts, Bob – but unfortunately they don’t play well sometimes with the actual content. Maybe I’m lazy, but it’s easier for me to know that max and min are 640px in my site. Stretching is difficult to conceive when I’m writing the posts.

      Just a personal preference I guess!

  2. 3

    Essentially, I agree with your conclusion, but if I’m using a fixed width set-up, I limit the width to 960 pixels.

    One has to account for vertical scroll bars and other browser shortcut bars that take up additional width. By staying within 960 pixels, one is assured that there is no left-to-right scrolling on a 1024 pixel-width screen resolution.

    Andy Ebon

  3. 4
  4. 5
  5. 6

    Since you've got your <div id="page"> set to 1048px, your site causes horizontal scroll bars on a 1024 screen. I think it would have been better to skim a 100px off the width (and padding) of your sidebar and content area so it fits on a 728×1024. That's what is best practice today.

    The only case against this would be if the analytics numbers support it… but since you didn't provide that data in your article, I'd say that you're page design is flawed.

  6. 7
  7. 8

    Silly man
    Not everyone uses every window at full screen – in fact, I’d wager that few do. 

    I have your blog in an 80% windo … and there it is, a horizontal scroll bar

    And what’s off the screen … lets see … nothing.

    So your scroll bar is pointless.

    One easy way to lose readers!!

    • 9

      The content is centered within the page @heenan73:disqus , providing the reader with exactly what they need. If I’m losing readers because they can both see the content AND see a horizontal scrollbar… not sure they were the readers I’m looking for. There’s definitely something unique within our content that pushes it out to 1217px so I am going to track that down and fix it.  This post was actually written about a previous theme.  Thanks for bringing it to my 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..