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 ancho do tema.

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

    Suxiro un deseño híbrido e un ancho de contedor CSS do 100%. Sempre que teña un ancho fixo para a barra lateral, a cabeceira, o pé de páxina e as áreas de contido principal axustaranse para axustarse ao ancho restante da pantalla. Enche o 100% da xanela do navegador de todos, independentemente da resolución do monitor do usuario. Daquela xa non terás que contar píxeles nin facer un seguimento das estatísticas dos usuarios relativas ás resolucións dos monitores.

    • 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.

      Supoño que só unha preferencia persoal.

  2. 3

    Esencialmente, estou de acordo coa túa conclusión, pero se uso unha configuración de ancho fixo, limito o ancho a 960 píxeles.

    Hai que ter en conta as barras de desprazamento verticais e outras barras de atallo do navegador que ocupan un ancho adicional. Manténdose dentro de 960 píxeles, asegúrase que non hai desprazamento de esquerda a dereita nunha resolución de pantalla de 1024 píxeles de ancho.

    Andy Ebon

  3. 4
  4. 5

    moi raro. En Firefox, o seu sitio ten unha barra de desprazamento horizontal en 1048 e non ten un aspecto limpo ata que non chega a 1090.

    Grazas polas excelentes estatísticas das resolucións de Google

  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.

    O único caso contra isto sería se os números de análises o apoian ... pero dado que non proporcionou eses datos no seu artigo, diría que o deseño da súa páxina é defectuoso.

  6. 7
  7. 8

    Home parvo
    Non todos usan todas as xanelas en pantalla completa; de feito, apostaría que poucos o fan. 

    Teño o teu blog nun 80% windo ... e aí está, unha barra de desprazamento horizontal

    E o que está fóra da pantalla ... imos ver ... nada.

    Polo tanto, a barra de desprazamento non ten sentido.

    Un xeito doado de perder lectores !!

    • 9

      O contido céntrase na páxina @ heenan73: disqus, proporcionando ao lector exactamente o que precisa. Se perdo lectores porque ambos poden ver o contido E ver unha barra de desprazamento horizontal ... non estou seguro de que fosen os lectores que estou a buscar. Definitivamente, hai algo único no noso contido que o empuxa a 1217 píxeles, así que vou rastrexalo e solucionalo. Esta publicación escribiuse sobre un tema anterior. Grazas por chamalo á miña atención.

¿Que pensas?

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