Patrones de diseño adaptativo.

En el artículo “Multi-Device Layout Patterns”, se explican varios patrones de diseño "adaptativo": perteneciente o relativo a la adaptación o a la capacidad de adaptación, tal como indica el Diccionario académico, pues es precisamente lo que persigue este modo de diseñar: que las webs tengan capacidad automática de adaptación al soporte.

1. “Casi fluido”, quizás el diseño más popular, y consiste en modificar la anchura de los componentes de la página hasta cierto límite hasta llegar a un diseño de una sola columna.
2. “Caída de columna”, es muy parecido, al anterior, en este caso se van situando las columnas una debajo de otra hasta llegar a un diseño en una sola columna.
3. "Cambio de la estructura”, es quizás el más potente, y consiste en utilizar un diseño distinto para cada situación contemplada.
4. "Pequeños cambios”, se puede aplicar en diseños sencillos, basados en una sola columna, que sólo necesitan pequeños ajustes en algunos elementos de la página.
5. "Fuera de la pantalla”, que consiste en esconder, en situar fuera de la pantalla, ciertos elementos que aparecen solamente cuando el usuario los solicita, por ejemplo, a través de la activación de un botón o un enlace.
En un diseño real, lo normal es que mezclar varios patrones a la vez.


Antes de realizar un diseño adaptable, hay que pensarlo muy bien, porque lo que es válido para la pantalla del ordenador, puede no serlo para la pantalla de un teléfono móvil.
Antes de ponerse a escribir el código CSS, es imprescindible realizar un diseño en papel de lo que se quiere lograr.



Existen plantillas, que te pueden ayudar a hacer tu diseño en
papel. En el papel tienes que jugar con los distintos módulos que componen tu página web y tienes que decidir qué mostrar, dónde mostrar y cómo mostrar cada módulo.

 Fuente: Activate, Google España