Qué es responsive web design. Lo básico.

01/02/2013 por lostium en Lost & Found

Lostiums,

Como parece que os enrolláis con esto del consultorio os quería preguntar: Eso del “responsive design”, ¿eso qué es lo que es?. Porque no paro de oir hablar de ello, pero no lo tengo nada claro.

Leo, Madrid.

Leer respuesta

Estimado Leo (mal comienzo, suena a “Querido Capricornio…”):

Hoy sabrás por fin qué es responsive web design, o como dice la R.A.E. «diseño web adaptable» recomienda Fundeu «diseño web adaptativo»:

(@RAEinforma había propuesto anteriormente «adaptable», pero no era muy acertado. Ahora la duda que nos queda es: ¿Cómo se va a acabar traduciendo “adaptive web design?”)

×Lo de @Fundeu en Twitter mola mucho: puedes lanzarles consultas a través de Twitter sobre el uso del idioma español (o castellano, es lo mismo) a cualquier hora del día, cualquier día de la semana. Un gran ejemplo de servicio que sabe aprovechar Twitter como un canal rápido y eficaz para comunicarse con sus usuarios. Nos gusta.

Volviendo al responsive design, y hablando de aplicaciones web, 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.
Como intuimos que estás usando un móvil o tableta, será más difícil demostrártelo, pero si giras tu dispositivo, es más que probable que observes que algunas cosas cambian de sitio para facilitar su lectura.

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.

×Nuestros últimos proyectos para clientes, Club de escritura Fuentetaja y Nik Mashup, también usan diseño responsive por si quieres “cacharrear” un rato con ellos.

Etiquetas: