Pregunta

Suponiendo que un diseño fluido no es una opción (dado que es una discusión diferente en conjunto), ¿cuál es el ancho recomendado para un diseño de sitio? ¿Cuáles son los pros y los contras de diferentes tamaños?

¿Fue útil?

Solución

Siempre he mantenido con 960px , ya que es visible en 1024x768 , y es fácilmente divisible por 2, 3, 4, 5, 6, 8, 10, 12 , 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480 ... para que pueda dividir el diseño de mi sitio ( usando la regla de los tercios) limpiamente.

EDITAR después de unos años: Considere usar Consultas de medios CSS para que su contenido responda a la miríada de dispositivos existentes ahora si no puedes usar un diseño fluido. No estoy seguro de que se pueda reclamar un ancho de píxel para gobernarlos a todos en 2012.

Otros consejos

Consulte http://browsersize.com para obtener algunas estadísticas rápidas sobre las resoluciones de pantalla que los usuarios usan hoy en día. Puede usar http://setmy.browsersize.com para cambiar rápidamente el tamaño de su navegador para emular la visualización de su sitio web en una resolución de pantalla particular. Asegúrese de que su diseño satisfaga al menos la resolución de pantalla más utilizada (1024 x 768).

Además, no necesariamente intentes ocupar el máximo espacio horizontal. El ancho del texto (número de palabras por línea) idealmente no debería exceder un cierto umbral de facilidad de uso:

  

En la pantalla muy común de 1024 × 768   resolución, la mayoría de los sitios web de diseño fijo   no use todo el espacio disponible para   izquierda y derecha de su contenido.   Los diseños flexibles hacen un mejor uso de   espacio horizontal, pero lucha por   mantener longitudes de línea utilizables.   Los expertos en usabilidad nos han dicho que   hay tantas palabras que   debería poner en una línea. Entre 8 y 12   las palabras parecen ser la línea ideal   longitud. Medios impresos, especialmente   periódicos, no dudes en usar incluso   líneas más cortas ¿Por qué? Porque ellos pueden,   colocando texto en varios   columnas.

http://www.alistapart.com/articles/css3multicolumn

Si usa un ancho fijo que sea más ancho que la pantalla más pequeña probable para visitar su sitio, molestará y frustrará a los usuarios que tienen que desplazarse hacia los lados para acceder al resto de su contenido.

También uso un diseño entre 950 y 980px y siempre centrado a menos que el cliente exija lo contrario :)

  1. Tenga en cuenta que la resolución del monitor que se cita a menudo en las estadísticas no es necesariamente lo mismo que ancho interior de la ventana del navegador . Los usuarios pueden tener barras laterales / barras de herramientas adicionales, usar una ventana del navegador no maximizada. Cuanto más grande sea la pantalla, es menos probable que desee usarlo todo en una sola página.

  2. Las líneas de texto muy largas son más difíciles de leer. El nivel óptimo es 25-30em (depende de muchos factores, pero no debe simplemente ir por el máximo).

  3. Los navegadores móviles tienen " virtual " resolución de pantalla que usan para el zoom y es ~ 960px en Opera Mini / Mobile y Mobile Safari.

Voto para dividir la moción aquí. El hecho de que los tamaños de pantalla sean X no significa que X o cualquier cosa cercana sea el mejor diseño para su sitio web.

El propósito de su sitio web tiene mucho que ver con el ancho que elija.

Muchos expertos en marketing piensan que una columna más estrecha " convierte " Más visitas a las ventas. Quizás esto se deba a que es más fácil dirigir la atención de las personas si la página es estrecha.

Por otro lado, un sitio dedicado a imágenes debería mostrar la mejor resolución disponible para cada navegador visitante.

En un momento fue 800px ; sin embargo, cada vez más sitios están empezando a usar 1000px . Esto se debe al hecho de que, en la mayoría de los casos, las resoluciones de gama baja de los visitantes se encuentran en 1024x768 . Los 24 píxeles adicionales dejan espacio para el navegador, el relleno y los márgenes que puede querer manipular, etc.

Solo para dar una perspectiva, incluso la nueva ola de netbooks con su pequeña pantalla tiene resoluciones de 1024x768 .

Pero, sobre todo, conozca a su audiencia como sugiere @warren y aproveche eso.

Podrías intentar desarrollar múltiples diseños y usar Javascript para cambiar entre ellos dependiendo de la ventana del visitante.

Dicho esto, generalmente uso algo entre 950px y 980px.

El ancho máximo del sitio web para un rendimiento óptimo y compatibilidad con monitores cruzados es de 960 píxeles cuando se relaciona con computadoras de escritorio y portátiles.

Para obtener más detalles sobre cómo y por qué, consulte el siguiente artículo:

Tamaño de pantalla y resolución

De acuerdo con estas estadísticas, un mínimo de 1024 píxeles de ancho cubrirá la mayoría de los usuarios .

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top