Diseños líquidos con ancho 100% y pantallas WideScreen

Si te dedicas al desarrollo web, probablemente ya te hayas cruzado con este problema de querer hacer un sitio con 100% de ancho, pero que inevitablemente se va a ver horrible en pantallas muy anchas, como por ejemplo las pantallas widescreen que cada ves son más populares.

Para evitar este inconveniente, la mayoría de las veces optamos por hacer directamente el sitio con ancho fijo: 780px, 940px, 960px o el que sea. Y al ir tomando esta costumbre, poco a poco se han ido extinguiendo los sitios con ancho 100%.

Esto es una lástima, porque utilizar el 100% del ancho de la pantalla es algo formidable y nos permite aprovechar al máximo todos los pixeles de los que disponemos y ganar espacio, que siempre es muy importante aún cuando ese espacio quede en blanco (dado que aporta claridad y separación entre los elementos).

Entonces ¿Cómo hacemos para usar 100% de ancho, sin que quede feo en pantallas widescreen?

Muy simple, utilizamos la propiedad max-width en nuestro css, con un valor de 1004 aproximadamente. De esta forma, logramos utilizar el 100% del ancho en definiciones como 800x600 y 1024x780, mientras que al mismo tiempo definimos un ancho fijo para pantallas más anchas o de mayor resolución.

Podes ver esta técnica funcionando en este mismo sitio, o en el sitio del Ices.
Si tenes una resolución mayor a 1024 vas a notar el efecto al jugar un poco modificando el ancho del navegador.

Es una técnica bastante simple. Seguramente estaras pensando ¿Cómo no se me ocurrió antes? Y posiblemente ha alguien más se le haya ocurrido, pero por lo menos yo, no he visto ningún sitio que la utilice.

IE6 no sporta max-width y lo ignora, tal vez sea por eso, pero a mi personalmente no me importa demasiado. Las pantallas WideScreen son relativamente nuevas, por lo tanto podríamos suponer que quienes utilizen pantallas widscreen seguramente estan navegando con versiones nuevas de Internet Explorer. Con esto no quiero decir que haya que ignorar a IE6, todo lo contrario. Pero para este truco en particular, ignorar a IE6 no es demasiado grave.

Además, ya ha comenzado a caer en desuso y esta siendo reemplazado paulatinamente por la versión 7 y por otros navegadores como Firefox y Safari que son mejores y mucho más seguros.

De todos modos, si te gustaría que esto funcione también en IE6 estas de suerte. Porque con un poco de trabajo extra, podes implementar alguna de estas opciones y hacerlo funcionar también en ese pésimo navegador.

En resumen: Ahora podes volver a hacer sitios flexibles con ancho 100%, y tenes una técnica simple para evitar que se vean feos en las pantallas anchas.