¿Cuál es el ancho óptimo de una página web?

Diseñar un sitio web y establecer el ancho de la página web en un ancho óptimo es una conversación que vale la pena tener. Muchos de ustedes notaron que recientemente cambié el ancho del diseño de mi blog. Empujé el ancho de la página a 1048 píxeles. Algunos de ustedes pueden no estar de acuerdo con el movimiento, pero quería compartir algunas estadísticas y razones de por qué amplié tanto el ancho del tema.

Sin embargo, 1048 píxeles no era un número aleatorio.

Hubo dos influencias clave en la expansión del ancho de mi página:

  • Cambiar el ancho de YoutubeYoutube ofrece ahora tamaños de inserción más grandes. Si hace clic en el engranaje pequeño en la barra lateral de la página de video de Youtube, se le ofrecen opciones para tamaños más grandes, así como el tema. Dado que los videos de alta definición se están convirtiendo en un lugar común en Youtube, quería incorporar esos videos en mi blog y mostrarlos con el mayor detalle posible (sin consumir todo el ancho de la página).
  • La publicidad típica viene en anchos de 125, 250 y 300 píxeles. 300 píxeles parecen estar apareciendo cada vez más en los sitios de ingresos por publicidad y quería incorporarlos perfectamente en mi barra lateral.

Y, por supuesto, hay algo de relleno a la izquierda y a la derecha de la página, el contenido y la barra lateral ... así que el número mágico fue de 1048 píxeles para mi tema:

Ancho óptimo del sitio web

¿Revisé las estadísticas de mis lectores?

¡Sí, por supuesto! Si la mayoría de mis visitantes estuvieran ejecutando pantallas de menor resolución, definitivamente habría tenido dudas acerca de expandir mi página. Ancho y porcentajeDespués de generar las resoluciones de pantalla de mi paquete de análisis (en Google es Visitantes> Capacidades del navegador> Resoluciones de pantalla), construí una hoja de cálculo de Excel con los resultados y analicé el ancho del campo de resolución.

Google proporciona una resolución de 1600 × 1200, por lo que debe tomar todo de la izquierda de la "x", multiplicarlo por 1 para convertirlo en un resultado numérico para que pueda ordenar en orden descendente, luego haga un SUMIF y vea cuántas visitas son mayores o menores que el ancho de diseño que está viendo.

= IZQUIERDA (A2, ENCONTRAR ("x", A2,1) -1) * 1

¿Abandoné al 22% de los lectores que tienen una resolución menor? ¡Por supuesto que no! Lo bueno de un diseño con su contenido a la izquierda y su barra lateral a la derecha es que puede asegurarse de que su contenido aún se encuentre dentro del ancho de la mayoría de los navegadores. En este caso, el 99% de mis lectores tienen más de 640 píxeles de ancho, ¡así que estoy bien! No quiero que se pierdan por completo la barra lateral, pero eso es secundario al contenido.

9 Comentarios

  1. 1

    Sugiero un diseño híbrido y un ancho de contenedor CSS del 100%. Siempre que tenga un ancho fijo para la barra lateral, el encabezado, el pie de página y las áreas de contenido principal se ajustarán para adaptarse al ancho restante de la pantalla. Ocupa el 100% de la ventana del navegador de todos, independientemente de la resolución del monitor del usuario. Entonces ya no tendrá que contar píxeles ni realizar un seguimiento de las estadísticas del usuario con respecto a las resoluciones del monitor.

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

      ¡Supongo que es una preferencia personal!

  2. 3

    Básicamente, estoy de acuerdo con su conclusión, pero si estoy usando una configuración de ancho fijo, limito el ancho a 960 píxeles.

    Hay que tener en cuenta las barras de desplazamiento verticales y otras barras de acceso directo del navegador que ocupan un ancho adicional. Al permanecer dentro de los 960 píxeles, uno está seguro de que no hay desplazamiento de izquierda a derecha en una resolución de pantalla de 1024 píxeles de ancho.

    Andy Ebon

  3. 4
  4. 5

    muy raro. En Firefox, su sitio tiene una barra de desplazamiento horizontal en 1048 y no tiene una apariencia limpia hasta que llega a 1090.

    Gracias por las excelentes estadísticas de las resoluciones 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.

    El único caso en contra sería si los números de análisis lo respaldan ... pero como no proporcionó esos datos en su artículo, diría que el diseño de su página es defectuoso.

  6. 7
  7. 8

    Hombre tonto
    No todo el mundo utiliza todas las ventanas a pantalla completa; de hecho, apuesto a que pocos lo hacen. 

    Tengo tu blog en una ventana al 80% ... y ahí está, una barra de desplazamiento horizontal

    Y lo que está fuera de la pantalla ... veamos ... nada.

    Entonces su barra de desplazamiento no tiene sentido.

    ¡Una forma fácil de perder lectores!

    • 9

      El contenido se centra en la página @ heenan73: disqus, proporcionando al lector exactamente lo que necesita. Si estoy perdiendo lectores porque ambos pueden ver el contenido Y ver una barra de desplazamiento horizontal ... no estoy seguro de que sean los lectores que estoy buscando. Definitivamente hay algo único dentro de nuestro contenido que lo empuja a 1217px, así que voy a rastrearlo y solucionarlo. En realidad, esta publicación se escribió sobre un tema anterior. ¡Gracias por avisarme!

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.