Adapt.js ~ Responsive web design con ayuda de JavaScript
Imagínense tener que crear varios diseños de una aplicación web totalmente diferentes, dependiendo de la cantidad de dispositivos que visitan el sitio (y por ende sus distintas resoluciones). Hoy en día tenemos iPad (y otros tablets), iPhone (y otros móviles), monitores pequeños y hasta súper monitores con resoluciones arriba de los 1920 pixeles.
Esto nos deja con quizás 5 ó 6 distintos diseños completos de nuestro sitio, lo que se resume en mucho trabajo necesario para poder hacer que todos sean incluidos cuando nos visitan desde su dispositivo favorito.
Uno de los elementos que más ha captado mi atención en CSS3 es la aparición real de los media queries, trayendo consigo lo que conocemos como “Responsive Web Design”, basado en “responsive architecture” que no es más que como se amolda un espacio físico (en nuestro caso nuestro sitio) a la presencia de distintas cantidades de personas (que en nuestro caso sería la resolución del dispositivo).
Los media queries, que vienen de manera intrínseca en la especificación oficial del CSS3, traen consigo mejoras claves para los distintos medios que acceden a nuestro sitio. Esto hace que nuestro CSS se adapte a la resolución del dispositivo (o del medio) que lo accede, por lo que en una misma hoja de estilo, tenemos distintos comportamientos dependiendo de las característica del dispositivo que nos visita. Por ejemplo: si tenemos antes un diseño de dos columnas, podemos decir que para resoluciones menor o igual a 320px (iPhone) sea un diseño de una columna (osea, ponemos todos los div sin que floten, por decir algo).
Implementando en un sitio con 960.gs
Todo bien hasta aquí, ¿verdad?. Sí, el CSS3 trae consigo la capacidad de hacer esto de una manera muy simple. Al tener que implementar un diseño que ya estaba maquetado con 960.gs me topé con dos problemas reales:
- En exploradores que no soportaban CSS3 no tenía el efecto “cool” de que dependiendo de la resolución cambiase la estructura o el diseño.
- Se me hacía muy incómodo tener que implementar los media queries a un CSS implementado con 960.gs
Y aparece Adapt.js
Descubrí por mera casualidad Adapt.js, hecho por el mismo creador de 960.gs - Nathan Smith - haciendo una búsqueda para encontrar si ya alguien había hecho algún “hack” de poner el 960.css amigable para móviles y tablets, que al final suponía que debía ser cambiar el min-width del body y el max-width del container_12.
Adapt.js se describe como una librería de JavaScript pequeña que determina que archivo de CSS deberá cargar cada vez que el browser carga el sitio. Lo mejor: es amigable con 960.gs, por lo que hacerlo funcionar era genial. Simplemente tenemos una lista de rangos de pixeles y a cada una de ellas le asignamos que CSS base queremos que se cargue, de esta manera:
Gracias a este código (que usa jQuery) agregamos un id al body, dependiendo del tipo de dispositivo que nos esté visitando. Si es un móvil quedaría como <body id=”mobile”> y así sucesivamente.
Entonces, para el diseño podríamos utilizar un CSS que tome en consideración el ID del body, por ejemplo, si queremos que cuando es un móvil la letra sea 14px sólo haríamos: body#mobile{font-size:14px;} y este cambio, obviamente, no interferirá con las otras “versiones” de nuestro CSS.
Una ventaja de usar Adapt.js es que como es JavaScript funciona para cualquier browser con el mismo habilitado, sin importar si soporta CSS3 o no.
Para finalizar, una recomendación personal (gracias a atourino): si van a utilizar Adapt.JS deberían considerar utilizar Sass (preferiblemente) o LESS, realmente hace divertido nuevamente hacer CSS.
