¿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 sobre 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 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

      Realmente me gustan los diseños híbridos, Bob, pero desafortunadamente a veces no funcionan bien con el contenido real. Quizás soy vago, pero es más fácil para mí saber que max y min son 640px en mi sitio. Estirar es difícil de concebir cuando estoy escribiendo las publicaciones.

      ¡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 ébano

  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

    Desde que tienes tu configurado en 1048px, su sitio genera barras de desplazamiento horizontales en una pantalla de 1024. Creo que hubiera sido mejor quitar 100 píxeles del ancho (y el relleno) de la barra lateral y el área de contenido para que quepa en un 728 × 1024. Esa es la mejor práctica actual.

    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.