Cada vez que nos enfrentamos a la realización de un nuevo diseño surge la misma pregunta: ¿a que resolución lo vamos a optimizar? Hoy en día la mayoría de usuarios utiliza al menos una “resolución de pantalla de 1024×768″:http://www.w3schools.com/browsers/browsers_stats.asp, pero todavía hay muchos que navegan a 800×600. Olvidarse de ellos a la hora de planificar un diseño significa que 2 de cada 10 usuarios van a encontrarse con barras de scroll horinzontales, sin duda un escenario nada apetecible.
Sin embargo renunciar a ese espacio de pantalla extra que disponemos a 1024×768, se me antoja un crimen para según que proyectos.
La solución nos llega de la mano del javascript. Tal y como presenta Cameron Adams en su artículo “Resolution dependent layout”:http://www.themaninblue.com/writing/perspective/2004/09/21/ podemos utilizar una hoja de estilos _base_ y mediante javascript añadirle la funcionalidad de tener hojas alternativas que cambien nuestro layout. Depende de la resolución de nuestro navegador, tendremos unas u otras. Obviamente para sacar partido a esto debemos tener separada la estructura de la presentación, ¿pero esto ya lo hacemos, verdad? 
Otra buena noticia es que si nuestro usuario utiliza un agente que no soporta javascript, seguirá con el layout original, con lo que accesibilidad no se ve comprometida.
Podéir “ver un ejemplo”:http://www.nordic-design.net/articulos/layout_resolucion/ de como funciona, o bien “descargar el código”:http://www.nordic-design.net/articulos/layout_resolucion.zip. Su uso es muy simple: en la cabecera del html llamamos a una hoja de estilos alternativa:
<link rel='alternate stylesheet' href='layout_1024.css' type='text/css' title='1024' />
Y en el fichero resolution.js le decimos a que resolución debemos añadirla:
if (theWidth > 990)
{
setStylesheet("1024");
document.cookie = "tmib_res_layout=" + escape("1024");
}
A partir de ahí queda a la imaginación de cada uno utilizar este código para salvar las situaciones que se encuentre en sus diseños. Buen provecho.