¿Con qué dispositivo estás leyendo este artículo? Si lo piensas, dependiendo del momento del día y otros factores, seguramente podrías responder varias cosas diferentes: con mi smartphone táctil de 6 pulgadas, un tablet de 10'' con resolución de 2048x1536, a o mi monitor de 32'' con resolución WQHD y usando un teclado y un ratón.
Y es que hoy en día la información y las aplicaciones se consumen en infinidad de formatos, y una misma persona utiliza diversos dispositivos con capacidades de pantalla, factores de forma, tamaños y resoluciones diferentes, y usándolos de manera táctil o de la manera tradicional: con teclado y ratón.
Hasta hace menos de una década las cosas eran mucho más sencillas. Si queríamos crear una aplicación o un sitio web "universal" tan solo teníamos que preocuparnos de unas cuantas variaciones. Simplificando, lo que hacíamos era detectar si los usuarios se estaban conectando usando un móvil o no (¿alguien recuerda WAP?) y luego se mostraba una versión diferente de la misma web o aplicación según el caso. Incluso existían subdominios (ej: m.miempresa.com) o dominios de primer nivel tan infames como .mobi (que ni siquiera era fácil de escribir en un tecladito móvil de aquellos) que se usaban de manera especial para la versión móvil.
Este, aunque cueste creerlo ahora, era el método recomendado de hacer las cosas. De hecho, por ejemplo, en ASP.NET existe una clase especializada solamente en eso, que se basaba en la detección del agente de usuario para averiguar cuál era el navegador y así poder indicar sus capacidades. Esto ya no sirve de nada.
En la actualidad la variedad es tal que es imposible seguir esta estrategia para tener una web o una aplicación que funcione en todos los dispositivos. Tendríamos que crear cientos de versiones diferentes de la aplicación para que funcionase correctamente casi siempre, y aún así nos quedarían casos sin cubrir.
¿Cuál es entonces la solución?: pues crear una única versión de nuestra página o aplicación pero consiguiendo que se adapte a todos los posibles dispositivos de manera automática.
Esto, tan complicado a primera vista, se consigue utilizando lo que se conoce como Responsive Web Design.
Diseño Web Responsivo - RWD
El diseño web "responsive" o "responsivo" es un conjunto de técnicas que permiten que un determinado HTML se adapte de manera automática y flexible al tamaño, relación de aspecto y resolución de la pantalla del dispositivo con el que se está visualizando. Cualquiera que sea ésta. El usuario verá el contenido de forma correcta siempre y podrá utilizar la funcionalidad independientemente de estos factores y también del método de interacción que utilice (ratón o táctil).
Esto implica no solo la redistribución de los elementos, sino también el uso de diferentes tamaños para todos los elementos (letras, espaciados, botones...), la optimización y uso de diversas versiones de imágenes apropiadas para cada caso, el reflujo automático del contenido, la ocultación y conversión de elementos, etc...
Para ello, el RWD se basa en diversos pilares fundamentales, entre los que cabe destacar:
- El concepto de cuadrícula fluida
- El uso de unidades de medida relativas
- Las imágenes flexibles
- Las limitaciones en tamaño máximo y mínimo de elementos
- Las media-queries
- Meta-configuración del viewport
- Tipografía adaptable
- Tecnologías modernas de CSS como Flexbox y CSS Grid
- Polyfills para soportar navegadores más antiguos o modernos pero menos capaces
Además, existen varios conceptos relacionados que se suelen utilizar en paralelo a las técnicas propias de RWD.
Tradicionalmente se han hecho los diseños para el escritorio, buscando luego que estos se adaptasen a móviles y otros tamaños de pantalla, y forzando de paso que toda la funcionalidad encajase en esa versión reducida. A esta orientación se le suele denominar "degradación elegante" (graceful degradation en inglés), aunque en no pocas ocasiones de "elegante" tenía poco y acababa con una versión poco usable, fea y saturada de la aplicación. Mala cosa.
En la actualidad se hace justo al revés. Los diseños se plantean en primera instancia para los dispositivos móviles, tratando de extraer su esencia, lo verdaderamente importante que debe funcionar. Posteriormente se construye desde esta versión para añadir mejoras o incluso funcionalidades en pantallas más grandes...
...lo cual nos lleva a la mejora progresiva. Ésta parte de la versión móvil y va añadiendo inteligentemente capas de mejoras al diseño base, orientadas a crear mejores experiencias para el usuario a medida que se va teniendo más espacio.
A esta forma de trabajar se le denomina mobile first.
Esta combinación de mobile first y mejora progresiva tiene la ventaja de que facilita mucho más la usabilidad y la accesibilidad de los desarrollos/diseños, y además como hemos trabajado primero en lo más complicado, el resto suele ser mucho más fácil. Una vez que has creado una versión decente para los dispositivos menos capaces te resultará más fácil ir añadiendo más funcionalidad para el resto de dispositivos más capaces.
Además existen hojas de estilo como Pure.css o completos frameworks CSS como Bootstrap (el más conocido y utilizado del mundo, creado por Twitter) que nos facilitan mucho la vida creando este tipo de diseños y de paso nos proporcionan un aspecto por defecto elegante para las páginas, además de multitud de utilidades y componentes listos para utilizar.
5 razones por las que debería importarme
Aparte de todo lo expuesto hasta ahora, existen algunas razones de peso para apostar por el RWD como manera general de trabajo y diseño tanto si creamos aplicaciones web como si hacemos diseño HTML:
- Es obligatorio conocerlo hoy en día: RWD es la técnica predominante desde hace tiempo y si no lo dominas es casi como si no supieras ni HTML ni CSS. Es más, si tu foco es el desarrollo o el diseño web es indispensable para el mercado laboral que conozcas Responsive Web Design. Hoy en día es indispensable que lo tengas en tu currículo. Y nada mejor que poder demostrarlo con garantías.
- Independiente del dispositivo: las aplicaciones creadas de la manera apropiada usando RWD van a funcionar bien en todos los dispositivos del mercado, y van a seguir haciéndolo en los que haya en el futuro. Así que no tienes que preocuparte de si se va a utilizar en un móvil básico, una Smart-TV o una consola de vídeo-juegos: simplemente funcionará bien en todos. Además, puedes convertir fácilmente tu aplicación web responsiva en una aplicación móvil gracias a plataformas gratuitas y Open Source como PhoneGap/Apache Cordova.
- Rentable: los sitios y aplicaciones creadas con estas técnicas dan más trabajo que un sitio "normal" en el que simplemente colocas HTML sin más, pero serán utilizables durante muchos años y el hecho de existir una única versión hace que las actualizaciones y el mantenimiento sean mucho más sencillos. Eso significa un gran ahorro de tiempo y dinero a largo plazo.
- Google lo recomienda exige: y eso no es cualquier cosa. Las posiciona mejor y, es más, su araña utiliza la versión de pantalla estrecha (móvil) de las páginas para realizar la indexación, y los sitios web responsivos tienen preferencia para el buscador en las búsquedas realizadas desde dispositivos móviles. Casi nada.
- Más negocio: usando el enfoque "mobile first" se consiguen aplicaciones y webs más fáciles de usar, más optimizadas y por lo tanto más rápidas. Esto hace que gusten más a los clientes. Y clientes contentos significa negocio.
Así que, si todavía te lo estabas pensando es hora de que dejes de dudar y te lances a aprender Responsive Web Design y Bootstrap ya.
Fecha de publicación: