Antes de comenzar el boceto de un sitio web, lo primero que un diseñador debe definir es el formato. Aquí, la resolución de pantalla juega un rol importante: intentaremos diseñar un sitio que se pueda ver en casi cualquier resolución.
¿Qué es la resolución de pantalla?
Todos los monitores cuentan con una resolución que está determinada por la cantidad de píxeles que se pueden ver en él, tanto en el ancho como en el alto. Aunque un monitor pueda adaptarse a una mayor resolución, mucha gente no lo sabe y utiliza el formato predeterminado por el sistema operativo en base a la placa de video que tengamos. Así, en un monitor pequeño (14 ó 15 pulgadas) la resolución más común suele ser de 800 x 600 (todavía se pueden ver algunos en 640 x 480), pero en un monitor moderno de 17 ó 19 pulgadas, es corriente encontrar resoluciones de 1024 x 768 (la mayoría), 1152 x 864, 1280 x 1024 y 1600 x 1200.
Adaptando el diseño
Hay que contemplar que lo que en un monitor grande se ve bien, en uno con menor resolución se verá incompleto y la persona que esté navegando en nuestro sitio tendrá que usar la barra de scroll para poder ver la totalidad del diseño.
En respuesta a este problema, muchos diseñadores web comenzaron a utilizar “diseños flexibles”. Sus páginas se adaptan a casi cualquier resolución de pantalla. ¿Cómo lo logran? Fácil: los elementos contenedores del sitio (tablas o divs) tienen la medida especificada en porcentaje. Así se logra que un recuadro se vea con un tamaño del 60% del total de la pantalla, otro con el 20% y otros dos con el 10% cada uno. Los porcentajes se mantendrán sin importar qué monitor tenga el usuario, adaptándose a su resolución. Sin embargo, esto presenta un problema con monitores muy pequeños, donde el diseño se “rompe” y el sitio queda irreconocible. En algunos sitios se implementó un diseño donde, según la resolución de pantalla que se tenga, se muestran u ocultan ciertos elementos.
Utiliza la herramienta de AnyBrowser.com, para saber cómo se verá tu sitio en diferentes resoluciones de pantalla.
Diseños estáticos
Es bueno tener como opción el uso de “diseños flexibles”, pero la mayoría de los desarrolladores están de acuerdo con que lo mejor es diseñar en función de la resolución de pantalla más común: diseñar para la mayoría. Las estadísticas dicen que el 54% de los usuarios de internet trabajan con una resolución de 1024 x 768, el 26% con una resolución mayor, mientras que sólo el 14% aún utiliza 800 x 600.
Optimizados por navegador
Hace algunos años atrás, cuando el Internet Explorer de Microsoft y Netscape protagonizaban la guerra de los navegadores de internet, en algunos sitios aparecían las frases “Best viewed with…” o “Se ve mejor con…”, aludiendo a que parte del contenido del sitio estaba optimizado para uno u otro navegador. Actualmente se ha ampliado la oferta de navegadores, obligándonos a que nuestro sitio sea visible en cualquier aplicación y sin restricciones.
Ten en cuenta este detalle a la hora de incluir algunas funciones que en determinados navegadores no se podrán ver. Lo mismo sucede con otras funcionalidades como botones o ventanas hechas con Flash, que necesitan de la aplicación Shockwave o Flash Player para que se puedan utilizar.
Alternativa Flash
Los diseñadores que hacen sitios casi enteramente en Flash caen con frecuencia en el error de hacer páginas “estirables”, que pueden adaptarse a la resolución de cualquier monitor. El problema es que algunos elementos de los sitios están compuestos por imágenes y las imágenes mantienen siempre la misma resolución. Esto hace que al “estirar” las dimensiones de la página, las fotos se vean más grandes pero totalmente pixeladas.
Lo mejor para los sitios que se hacen en Flash es establecer un formato estático que no se pueda ampliar. Esto favorece notablemente al webmaster, que diseñará con la seguridad de que todo se verá exactamente como él lo diseña.
Fuentes:
- Web Pages Mistakes
- Screen Resolution and Page Layout
- World Internet Usage Statistics News and Population Stats
- Browswer Display Statistics
