El diseño adaptativo es todo aquel diseño maquetado que se adapta a las dimensiones de la pantalla del usuario. Así, por ejemplo, si un usuario visita una web con su móvil puede verla de diferente manera que si entrase con su ordenador. Otro ejemplo podría ser diseños diferentes dependiendo del tamaño de pantalla del ordenador de cada uno.
Para realizar esta tarea basta con utilizar una serie de CSS que permite diferenciar entre tamaños de pantalla de los diferentes dispositivos con el que puede acceder un usuario. No es más que un rediseño de la web, no elimina ni optimiza el rendimiento de la web ya que inicialmente siempre se carga entera y luego se aplican los css que le da el diseño visual final.
Muchos de vosotros conoceréis este tipo de diseño como diseño “responsivo” derivado de su denominación en inglés “Resposive Design”. Es una traducción spanglis que, aunque no es correcta, está muy extendida y hasta Google la utiliza para su denominación.
¿Cómo empezamos a aplicar estos diseños?
Para poder aplicar un diseño responsivo a nuestra web lo primero que demos hacer es añadir una etiqueta meta en el <header> de nuestra página web:
Esta meta hace que el tamaño de la página sea el del tamaño del dispositivo y no el de la resolución. Es aplicable, sobretodo, para diseños para dispositivos móviles.
Una vez añadida la meta sólo nos falta añadir los css necesarios para los diferentes tamaños de pantalla:
/* Escritorios grandes */
@media (min-width: 1200px) { ... }
/* Tablets a Escritorios de ordenador */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Móviles y Tablets */
@media (max-width: 767px) { ... }
/* Móviles y pantallas menores */
@media (max-width: 480px) { ... }
Como véis con @media aplicamos una serie de intervalos que nos permiten diferenciar entre los diferentes grupos de dispositivos con los que puede acceder un usuario(Escritorio, móvil o tablet).
Vosotros podéis definir las reglas y los intervalos que queráis para adaptarlo a vuestras necesidades, simplemente debéis jugar con el max-width y el min-width.
Como ejemplo de esto podéis acceder a este mismo blog mediante un dispositivo móvil y podréis observar como su diseño cambia por completo para adaptarse a un diseño más fácil de usar mediante pantallas táctiles.
Por último, existen frameworks que ofrecen este tipo de diseño y mucho más. Entre otros están Bootstrap o Alloy UI 2.0 con su componente aui-viewport.