Quizás una de las primeras premisas de diseño que se encuentra quien se enfrenta a hacer una nueva página o proyecto web es la resolución a la que se va a presentar esta al usuario. Es problemático hacer la página con unas dimensiones fijas debido a la gran variedad de resoluciones que existen, lo que provoca que en la resolución escogida se vea bien pero en otras mas pequeñas no quepa y en mayores quede demasiado espacio libre.

Esta forma de diseñar era la usada antes cuando todo se maquetaba en tablas, aunque todavía hay algunos que montan las páginas de esta manera y ciertos programas lo hacen cuando se elabora el diseño en forma gráfica (aptos para vagos, y ya sabemos que el perezoso trabaja doble y mal). En cambio ahora el uso de los divs o cajas ha permitido usar bloques de objetos que se acomodan a la ventana en la que se presentan, ya sea por medidas en porcentajes, superposición de capas o por el uso de floats sin restricción.

Aunque la resolución más usada ahora es la 1024×768 como lo podemos comprobar aquí, aquí, aquí y aquí, nos encontramos con un mercado creciente tanto de portatiles con pantallas panorámicas como de grandes pantallas -panorámicas también- que se pueden usar como televisores, en ambos casos con posibilidad de mostrar altas resoluciones, y por otro lado del boom de los ultraportálies o netbooks que en gran medida regresan a resoluciones de 800×600 u 800×480.

El debate ahora está abierto entre usar un diseño líquido o uno elástico (términos, muy descriptivos por cierto, que trataré en otro artículo). El uso de los divs y la versatilidad que puede plantearse en el diseño de cajas móviles nos dan mas libertad a la hora de maquetar nuestras páginas pero nos obliga a tener en consideración lo que se incluirá en cada caja y la relación con las demás, esto es algo que requerirá un análisis mas sesudo (en todo se puede profundizar tanto como se quiera).

Para mi lo primordial para poder controlar el aspecto es poder tener un sistema que permita comprobar el diseño en diferentes resoluciones, así podemos corregir errores y comportamientos extraños (lease IE), para lo cual disponemos de varias herramientas. En mi caso uso, y recomiendo, tres gratuitas:

• ToggleRes nos permite un cambio rápido entre dos resoluciones que se pueden configurar.
• MultiRes nos permite cambiar la resolución a escoger entre una amplísima variedad incluyendo la tasa de refresco. Hay que configurar la pantalla para que se vea bien cada vez que se escoge una nueva resolución.
• La extensión Web Developer para los usuarios de Firefox, la cual trae un botón Resize que nos permite adicionar las resoluciones de pantalla que queremos representar. No cambia la resolución real de la pantalla, solo la de la ventana, por lo que tenemos que poner la resolución en la pantalla más alta a la que queremos trabajar y luego ir escogiendo en Resize para mostrar las resoluciones mas pequeñas en la ventana.

Otro asunto que trataré un poco por encima luego es el de los dispositivos móviles para los que tenemos también formas de representarlos en el ordenador, así podemos comprobar como se ven nuestras páginas en ellos.