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:
0 comentarios:
Publicar un comentario