Últimamente he estado pensando mucho sobre la resolución de pantalla y cómo el uso de sitios web de ancho fluido es la mejor manera de acomodar las resoluciones de pantalla de todos los visitantes. Los sitios web alternativos de ancho estático tienen que elegir. Puede optimizar para un ancho de 800 px, el mínimo común denominador, y renunciar al uso de varios cientos de píxeles de ancho para usuarios con pantallas más grandes. O bien, puede optimizar para 1024 px y simplemente hacer que sus visitantes de 800 px se desplacen horizontalmente. Cualquier cosa más ancha que 1024px es demasiado para sitios de ancho estático, en mi opinión.
creo que el mejor escenario posible es hacer un sitio de ancho fluido que acomode a todos. Esto es lo que creo que sería el diseño de ancho fluido “Perfecto”:
- Funciona en todos los navegadores principales
- se encoge a 780px
¡Esto acomoda a los usuarios con una resolución de 800 × 600, sin desplazamiento horizontal! - crece a 1260px
Esto acomoda a los usuarios con una resolución de 1280 × 768 y todo lo demás. - Esto acomoda a más del 90% de todos los usuarios de Internet. Puede hacer que este diseño crezca fácilmente, pero tenga en cuenta cómo la longitud de línea afecta la legibilidad. Nadie quiere leer una línea de texto de 1980px de largo.
- Las barras laterales son de “igual altura” que el contenido principal
- El contenido de la página está centrado para usuarios con resoluciones aún más altas.
Me puse a trabajar y no lo sabrías, creo que lo tengo =)
Estoy bastante nervioso llamándolo “Perfecto”, porque estoy seguro de que algunos genios van a hacerle algunos agujeros y me llamarán la atención sobre algunas cosas. Eso está bien, espero que eso suceda porque estoy a la altura de la tarea de asegurarme de que esté a la altura y lo mejor que pueda ser. Lo probé en Firefox, Safari, Opera e Internet Explorer 6 y funciona en todos ellos, así que cruzaré los dedos y publicaré esto. Como de costumbre, siéntete libre de descargar y hacer lo que quieras. Los enlaces siempre son geniales.
[LIVE EXAMPLE]
[DOWNLOAD EXAMPLE]