Maquetación adaptativa (Responsive Web Design)



Hace un tiempo, estuvimos hablando de como la evolución de la Web cambió el paradigma de la maquetación abandonando viejas prácticas (e incorrectas desde el punto de vista formal como era la maquetación usando tablas) hacia una maquetación basada en las recomendaciones del W3C (maquetación con DIV + CSS).
Junto con ese cambio, la explosión del acceso Web desde dispositivos móviles, como pueden ser tablets o smartphones ha aumentado y mucho el abánico de resoluciones, desde los 320px de un móvil de pantalla pequeña a la resolución de 1920px de los nuevos monitores panorámicos de alta definición. Todo ello, en constante cambio, pues si a principios de año María nos comentaba el auge de los monitores 16:9, a fecha de este post la resolución más usada es ya una de este tipo.
Por todo esto, ha surgido la necesidad de hacer diseños que se adaptan a las diferentes configuraciones.
Esta técnica suele referirse como "Diseño Web Adaptativo" pero como Internet es un mundo en que el inglés es el idioma relevante es mucho más sencillo obtener información con "Responsive Web Design".

La idea consiste en ser capaces de adaptar nuestro contenido en función de la resolución de pantalla de manera que la disposición de los componentes y el contenido sea lo más cómoda posible para todos los usuarios, independientemente de si acceden desde una blackberry, un ipad o desde su monitor último modelo.
Para ello, existe un concepto de CSS (más depurado en version 3 o superiores de CSS) que permite aplicar estilos en función de determinadas variables: las media queries.
Por ejemplo las siguientes líneas nos permiten aplicar estilos en función de la resolución de la pantalla y con ello tener cierta adaptación de nuestros componentes para ello.
@media only screen and (min-width: 768px) and (max-width: 991px)
@media only screen and (max-width: 767px)
Con estas utilidades y, centrándonos principalmente en la parte de maquetación de nuestros componentes principales (cabeceras, menús, pies de pagina, contenido), podemos recolocar nuestros componentes en función de la resolución de la pantalla.
Obviamente, esto complica en parte nuestro código CSS (digamos que tenemos que mantener código triplicado) y ahí es donde aparece la bondad del software libre y la comunidad de desarrolladores que pone a nuestra disposición "lenguajes CSS" que simplifican esta tarea.
Dentro de este ámbito, cabe destacar dos lenguajes CSS (hasta ahora muchos considerabamos CSS como un conjunto de atributos) que nos ayudan para lidiar con estos problemas:
Sobre estos dos lenguajes que consiguen que escribir código CSS sea más modular (puedes definir variables, reutilizar código, heredar definiciones, etc) se pueden construir frameworks CSS bastante potentes.
Llegados a este punto tenemos una nueva necesidad (maquetación adaptativa) y nuevas herramientas (@media queries y lenguajes CSS) que crean un caldo de cultivo muy interesante para que surjan nuevos proyectos (open source) que aprovechen estos conceptos para crear cosas como:
  • LESS Framework 4 [lessframework.com/]: Un framework CSS construido sobre el lenguaje LESS que genera CSS para hacer maquetación adaptativa
  • Foundation Zurb [foundation.zurb.com/]: Otro framework CSS en este caso construido sobre SASS
  • Compass [compass-style.org/]: También construido sobre SASS
Y como siempre, con esto ya tenemos las ideas (y algunas herramientas) para poder profundizar en un tema apasionante y de gran futuro (en mi caso, cada vez accedo más a Internet por el móvil/tablet que desde un PC y seguramente no sea el único).
Como punto final (y como pie al próximo artículo) merece la pena mencionar el proyecto de moda en GitHub (el entorno de referencia para publicar el código fuente de proyectos de software), Bootstrap [twitter.github.com/bootstrap/], el framework utilizado por el equipo de Twitter para el desarrollo de su interfaz Web, desarrollado sobre el lenguaje LESS y, además, adaptativo.

1 comentarios :

Hugo dijo...

Una vez más vuelves a ser un referente en el mundo del desarrollo web y la innovación :)