Unidad 14. Técnicas de diseño web (VIII)

14.3. Diseño web adaptativo

Como hemos visto, el diseño líquido se adapta de forma automática al tamaño de la pantalla y puede solucionar muchos de los problemas de otro tipo de diseños. El diseño fluido funciona muy bien en tamaños de pantalla medianos pero no tan bien cuando las pantallas son muy grandes o muy pequeñas, ya que en pantallas grandes las líneas de texto se hacen difícil de leer porque son muy largas (se recomiendan 80 caracteres como máximo por línea), y en pantallas muy pequeñas los elementos quedan muy apretados, y las imágenes pueden quedar demasiado pequeñas, por todo ello ha surgido una alternativa mejor: el diseño adaptativo (o adaptable).

Hoy en día. el diseño adaptativo es el más recomendable para que la página web se vea bien en todo tipo de dispositivos. La clave está en la utilización de unas condiciones (Media Queries) que permiten variar la disposición de los elementos en función de la anchura y otras condiciones (orientación, resolución , ...), es decir, no sólo los elementos varían de anchura, sino que también pueden variar en su distribución. Por ejemplo, al disminuir la anchura de la pantalla se pueden pasar elementos a la línea siguiente, o cambiar el orden en que se muestran, o dejar de mostrar algunos elementos.

Lo más normal es que un diseño adaptativo vaya variando el número de columnas según va variando el tamaño de la pantalla, por ejemplo, en pantallas grandes se utilizan tres columnas, en pantallas medianas dos columnas y en las pantallas más pequeñas una sola columna. Por supuesto, también se pueden cambiar el orden de los elementos y eliminar algunos elementos. Por ejemplo, en pantallas muy grandes se suele mostrar publicidad en los laterales y cuando la pantalla decrece se elimina esta publicidad. También el menú se suele ocultar en pantallas pequeñas dejando únicamente un botón que permite desplegarlo.

El diseño adaptativo permite crear diseños diferentes en función de la anchura utilizando un sólo código HTML y una sola hoja de estilo.

Vamos a ver un caso sencillo de diseño adaptativo utilizando el mismo ejemplo que venimos usando en esta unidad. Vamos a crear tres diseños diferentes enfocados a tres tipos de pantallas, consideraremos pantallas pequeñas las que tengan un ancho de hasta 640 px., pantallas medianas hasta 1024 px., y pantallas grandes a partir de 1024 px. de ancho.

Para ello usaremos una hoja de estilo con tres Media Queries que dividen el ancho en tres porciones.

a- Para anchos mayores o iguales de 1024px, (min-width: 1024px)

b- Para anchos entre 641px y 1023px, (min-width:641px) and (max-width: 1023px)

c- Para anchos menores o iguales de 640px, (max-width: 640px)

El diseño adaptativo nos servirá para colocar los elementos en tres columnas en las pantallas grandes, en dos columnas en las pantallas medianas y en una columna en las pequeñas.

Vamos a ver tres ejemplos utilizando tres diseños con elementos flotantes, cajas flexibles y rejillas. Con tablas HTML no se pueden hacer diseños adaptativos ya que no se puede modificar la estructura de una tabla con hojas de estilo, por ejemplo, no se puede cambiar el número de filas (salvo con programación).