Accesibilidad-Web :: Optimizar una Web a todas las resoluciones
Optimizar una Web a todas las resoluciones Imprimir

A la hora de diseñar una página Web, uno de los principales conflictos aparece a la hora de decidir a qué resolución debe ajustarse, y de si debe ocupar toda la pantalla, o bien centrarse o alinearse a la izquierda. En este sentido, cada cual tiene sus preferencias al respecto, ya que todas presentan ventajas y desventajas.

Es muy frecuente encontrar al pie de una Web una línea similar a ésta: 'Página Optimizada para una resolución de 800x600 ó superior'. En la actualidad, cada vez es mayor el número de usuarios que configuran su monitor a 1024x768 píxeles ó más, pero no podemos ignorar los equipos con monitor de 15" que no soportan tales resoluciones.

Una solución bastante poco recomendable sería la de detectar (del lado del cliente) por medio de un sencillo código JavaScript, la resolución de su pantalla, y dependiendo del caso, recargarle en su navegador el archivo html correspondiente:

<script language="JavaScript1.2">

if (screen.width==800 || screen.height==600) window.location.replace("index800x600.htm");

</script>


Este método supondría tener que diseñar dos archivos index.htm diferentes, ó más si quisiera soportar más resoluciones, del tipo 640x480 ó 1280x1024. Por ello, se recomienda tener un único index.htm, pero poniendo especial atención en el modo en el que definimos el ancho de las tablas, ya que siempre debemos evitar que aparezca el scroll Horizontal (y a ser posible también el Vertical). Se pueden definir las medidas de una tabla de manera Absoluta, es decir, por píxeles, ó Relativa, por porcentaje.

· Porcentaje (tablas relativas): implica que la tabla se ajusta a la ventana del Navegador del Cliente. El código html sería:

<table width="100%" height="100%">

Ésto conlleva que por ejemplo, un texto contenido en esta tabla, si a una resolución de 800x600 ocupa 10 líneas, a una resolución de 1024x768 puede ocupar 5 ó 6 líneas, y una línea excesivamente larga es más difícil de leer que una más corta. También se cargan algo más despacio ya que el Navegador debe recalcular las medidas según la resolución. Aunque por otra parte, a la hora de imprimir un documento html, es más efectivo tener el contenido en una tabla relativa, para que se ajuste en la impresión.

· Píxel Fijo (tablas absolutas): implica que la tabla siempre va a medir lo mismo, independientemente de la resolución del Cliente. El código sería:

<table width="800">

Ante esto, el principal obstáculo a superar sería la aparición de los scrolls si las medidas de la tabla exceden de la resolución del Cliente. También conlleva que un Cliente con una resolución muy alta (1280x1024) verá la Web algo pequeña, y a la hora de imprimir, se pueden producir cortes en los márgenes del documento. A su favor hay que decir que éste tipo de tablas son más estables y el ancho de los contenidos nunca cambia, evitando líneas de texto largas, o posibles deformaciones del diseño mismo de la Web.

Pues bien, ante éste dilema, lo mejor será pensar en diseñar la Web para los casos más probables, en vez de intentar hacer una Web para todos los navegadores y resoluciones. Quizás una Web diseñada para 800x600, de un ancho fijo no superior a 750 píxeles y centrada, consiga adaptarse al mayor número de usuarios. También dependerá de si los contenidos son en su mayoría solo textos, o si llevan imágenes, banners o elementos multimedia, ya que éstos pueden requerir unas medidas mínimas.

NI4
http://www.ni4.org/modules.php?name=News&file=article&sid=34

Cerrar Ventana