jueves, 30 de mayo de 2013

Crear una Página Web HTML5 utilizando Responsive Design

Se trata de un planteamiento de diseño que permite crear apps que se “adaptan” al navegador en el que se ejecutan, mostrando una versión optimizada, ya se trate de un ordenador de sobremesa, una tableta, un móvil o cualquier otro dispositivo con pantalla. Conviene aquí no confundir el término “fluido” con “adaptatativo”. Adaptatativo quiere decir que no sólo el texto e imágenes crecen y decrecen en función del tamaño de la pantalla (fluídos), si no que el contenido se reagrupa y la disposición de elementos en la app cambia para mostrar de forma óptima su interfaz y contenidos, todo ello en función del tamaño y disposición de la pantalla del dispositivo del usuario. Esto se consigue gracias al uso de media queries, pero hablaremos de ello en otro artículo algo más técnico.
Pero como lo mejor es demostrar las cosas en la práctica, pon el cursor del ratón en la esquina inferior derecha de tu navegador, y arrastra haciendo la ventana más pequeña. Más pequeña… ¿Qué es lo que pasa? Que la web se reconfigura en función del dispositivo para optimizar su lectura y visualización.
Ejemplo de web responsive
×Si has conseguido retornar a la lectura después de la demo, entonces ya debes hacerte a la idea de en qué consiste el responsive design. Comentar también que existen servicios web donde puedes ver de un simple vistazo cómo se vería tu web responsive en distintos dispositivos móviles. Nuestras preferidas son Am I Responsive? y Responsinator.
¿Y esto es importante? Te preguntarás en tu fuero interno. Nosotros creemos que mucho: A la hora de abordar cómo mostrar tus productos o servicios en internet, ya sea a través de una web presencial o de aplicaciones complejas que ofrecen servicios diversos, el rango de potenciales dispositivos con los que los usuarios pueden ahora acceder va de smartphones con pantallas de 2 pulgadas a SmartTVs de 50″. En un mundo perfecto, si el cacharro tiene internet, tu servicio debería ser accesible y usable. Y gracias a técnicas como estas, puedes estar ofreciendo una experiencia óptima con acceso a las funcionalidades de tu app a todo ese rango de potenciales usuarios, y manteniendo un único acceso web. Si a esto le sumamos un área de administración con un WordPress personalizado como gestor de los contenidos, tenemos la herramienta perfecta para crear una aplicación multidispositivo y con una sóla entrada de datos.
Y todo lo anterior sin mencionar aún que el acceso vía móvil se ha generalizado tanto en los últimos años, que es de locos no prestarle atención: en el caso de Tuitrafico, ha pasado de un 14% de accesos móviles en 2011 a un 30% este último año y un 35% en el último mes (seguro que algo tiene que ver la compra compulsiva de tabletas durante las pasadas navidades). Si se mantiene ese ritmo de crecimiento, ¿qué hacemos todos que no estamos ya optimizando y construyendo plataformas que funcionen en móviles y tabletas?
Opciones existen, pero parecen mucho menos apetecibles: una versión optimizada para ordenadores de sobremesa, y las correspondientes versiones de apps para móvil y/o tableta, bien en HTML5 como hizo The Guardian a finales del año pasado, o nativas (una para cada sistema operativo móvil: iOS, Android, Windows8…). Sólo de pensarlo, me entran escalofríos… Menuda sangría.
El coste de desarrollar esta última opción es probablemente el doble o incluso el triple frente al coste de implementar diseño adaptatativo en una nueva web app. No sabemos si, como se ha publicado recientemente, será la tecnología del 2013 pero, en nuestro caso, tenemos la sensación de que se quedará un buen rato con nosotros.