Diseño web: Revisar nuestra web para diferentes resoluciones de monitor

Uno de los temas más importantes que debemos tener en cuenta en el momento de diseñar una página web es comprobar cómo se verá dicha página en función de la pantalla que esté utilizando cada uno de nuestros visitantes.

Una petición común por parte de muchos de nuestros clientes es la de “me gustaría que casi todo se viera en la pantalla inicial, con un scroll mínimo”.  La respuesta es siempre la misma:  ¿En mi netbook de 10’’ o en mi monitor de 27’’? (Por no hablar ya de dispositivos móviles).

Una tendencia muy habitual es limitar el ancho de nuestras páginas a unos 960 ó 980 píxeles de anchura, de forma que se visualice correctamente en resoluciones de 1024 píxeles de ancho (que es el mínimo de cualquier netbook o monitor que haya sido fabricado en este siglo…).

Otra opción es la de usar diseños líquidos que se ajusten al ancho de la pantalla (o a un porcentaje de la misma), pero este tipo de diseños suelen verse terriblemente mal en monitores panorámicos de alta resolución.

Una última opción más elaborada (y que no soportarán los navegadores más antiguos) es la de crear diferentes estilos para las distintas resoluciones de la página y cargar uno u otro en función del tamaño de la ventana en la que estamos visualizando la web.

Sea cual sea la solución, en muchas ocasiones nos interesa redimensionar la ventana de nuestro navegador para comprobar cómo se visualiza una página web en una resolución menor a la nuestra.  Una gran alternativa para ajustar la ventana al tamaño exacto que buscamos es resizeMyBrowser.  Se trata de una herramienta web sumamente sencilla pero que nos permite acomodar nuestra ventana  a las resoluciones justas más habituales en las que se visualizará nuestro sitio.

Simple pero tremendamente útil.