Estamos en un mundo móvil, y cada vez más accedemos a internet desde dispositivos variados, con necesidades y en situaciones diferentes. Así como los diseñadores sobre el papel tenían el control absoluto de lo que se presentaba estáticamente, fijo, impreso, al diseñar para web se encuentran con multitud de resolución de pantallas, con navegadores diferentes, con formas de interactuar que van desde un teclado, mouse, stylus o los dedos. Como dice John Allsop, desarrollador, «debemos entender y adoptar la idea de que la web no tiene los mismos límites y debemos diseñar con esta flexibilidad. Pero primero debemos aceptar la marea y el flujo de las cosas».
El diseño web adaptativo, del inglés responsive web design, a veces se traduce no del todo correctamente como «diseño responsivo», tiene todo que ver con esto. Es una técnica de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas y media queries en la hoja de estilo CSS permite que el sitio web se adapte al entorno del usuario, sea cual sea el dispositivo que utilice para navegar.
El término fue creado por Ethan Marcotte, quien además de escribir una serie de artículos sobre el tema en A List Apart, publicó un libro al que llamó Responsive Web Design, donde describe teoría y práctica. El concepto One Web había partido del W3C en 2008 y hace referencia a construir una Web para todos (Web for All), accesible desde cualquier dispositivo (Web on Everything).
En los sitios móviles puede darse el caso de que la función y el contenido necesiten ser diferentes que en el sitio visto en la versión de ordenador de sobremesa, y allí es donde el diseño adaptativo puede resolverlo, quitando o reduciendo la visibilidad de ciertos elementos.
El diseño web adaptativo supone que usando HTML y CSS logremos una sola versión que cubre todas las resoluciones de pantalla, por lo que el sitio web creado es accesible desde todo tipo de dispositivos. Marcotte define como tres los ingredientes técnicos para el diseño web adaptativo:
- Fluid grid (cuadrícula fluida): En lugar de píxeles utiliza porcentajes para definir los anchos de las columnas o divs.
- Imágenes flexibles: Las imágenes no tienen anchos fijos sino un máximo (o max-width), que por lo general suele mostrarse al 100% en un ordenador de escritorio. De esta manera, las imágenes se reducen para ajustarse a otras pantallas o resoluciones de navegador.
- Media queries: permiten consultas al CSS personalizado basándose en el ancho mínimo y máximo de un navegador (min-max width).
Ventajas
La cantidad de usuarios que acceden a la web desde dispositivos móviles ha aumentado y seguirá haciéndolo. Un estudio de Compuware, un proveedor de servicios y software, muestra que un 57% de los usuarios no recomendaría una compañía con un sitio móvil mal diseñado y que un 40% visitarían la página de un competidor antes que usar un sitio escasamente optimizado para su navegación en móviles.
Las ventajas del diseño web adaptativo son obvias:
- Mejor experiencia de usuario: todos los usuarios ven la web de la mejor manera posible para el dispositivo desde el que acceden
- Costes más bajos: Se reducen los costos de creación y mantenimiento: ya no es necesario desarrollar aplicaciones para distintas versiones móviles
- Actualizaciones más eficientes: cualquier actualización o modificación en el diseño, se ve reflejado en todas las plataformas, lo que reduce tiempos y márgenes de errores
- Búsquedas: Al hacer una búsqueda, aparecerá una URL única en los resultados, por lo que se ahorran redirecciones y posibles fallos.
- Mejor SEO: Google puede descubrir mejor tu contenido
- Accesible a todos: incluidos las personas con distintos problemas de disminución visual
The Boston Globe y otros ejemplos
La de The Boston Globe es considerada la web insignia del diseño web adaptativo, en parte porque fue uno de los primeros grandes sitios en internet en adoptar el responsive design y también por estar el mismo Ethan Marcotte en el equipo de desarrolladores que se encargó de su rediseño. Además de esta, hay otros buenos ejemplos de diseños adaptativos, empezando por la misma de Marcotte, como era de esperar:
Ethan Marcotte
Food Sense
Google Está Bien Saberlo
Starbucks
CSS Tricks
Fundraise.com
Fork
Smashing Magazine
Este post se publicó originalmente por mí en Bitelia.
