Cal é o ancho da páxina web óptimo?

Deseñar un sitio web e axustar o ancho da páxina web ao ancho óptimo é unha conversa que paga a pena ter. Moitos de vós notaron que recentemente cambiei o ancho do deseño do meu blog. Pasei o ancho da páxina a 1048 píxeles. É posible que algúns de vostedes non estean de acordo coa mudanza, pero quería compartir algunhas estatísticas e razóns polas que ampliei o tema tan ancho.

Non obstante, 1048 píxeles non era un número aleatorio.

Houbo dúas influencias clave para ampliar o ancho da miña páxina:

  • Cambia o ancho de YouTubeYoutube ofrece tamaños de incrustación máis grandes agora. Se fas clic na pequena engrenaxe da barra lateral da páxina de vídeo de YouTube, ofrécesche opcións para tamaños máis grandes e tamén para o tema. Dado que os vídeos de alta definición están a ser un lugar habitual en Youtube, quería incorporar eses vídeos ao meu blog e amosalos co maior detalle posible (sen consumir todo o ancho da páxina).
  • A publicidade típica ten anchos de 125, 250 e 300 píxeles. 300 píxeles parecen aparecer cada vez máis nos sitios de ingresos publicitarios e quería incorporalos ordenadamente á miña barra lateral.

E, por suposto, hai algún recheo á esquerda e á dereita da páxina, o contido e a barra lateral ... polo que o número máxico foi de 1048 píxeles para o meu tema:

Ancho óptimo do sitio web

Comprobei as estatísticas dos meus lectores?

Si, por suposto! Se a maioría dos meus visitantes estivesen a executar pantallas de menor resolución, definitivamente tería pensado en expandir a miña páxina. Ancho e porcentaxeDespois de emitir as resolucións de pantalla do meu paquete de Analytics (en Google son Visitantes> Capacidades do navegador> Resolucións de pantalla), constrúe unha folla de cálculo de Excel dos resultados e analicei o ancho do campo de resolución.

Google ofrece unha resolución de 1600 × 1200, polo que cómpre tomar todo desde a esquerda do "x", multiplicalo por 1 para que sexa un resultado numérico para que poida ordenalo descendente nel, despois faga un SUMIF e vexa cantas visitas son maiores ou inferiores ao ancho de deseño que está a ver.

= ESQUERDA (A2, FIND ("x", A2,1) -1) * 1

Abandonei o 22% dos lectores que están executando unha resolución menor? Por suposto que non! O bo dun deseño co contido á esquerda e á barra lateral á dereita é que podes asegurarte de que o teu contido segue dentro do ancho da maioría dos navegadores. Neste caso, o 99% dos meus lectores executan máis de 640 píxeles de ancho, así que estou ben. Non quero que perdan totalmente a barra lateral, pero iso é secundario ao contido.

9 Comentarios

  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 pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.