El diseño web adaptativo, del inglés responsive web design, es un concepto de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas junto con 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, autor de Responsive Web Design a partir del concepto One Web que 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).
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).
De esta forma se reducen los costes de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones específicas para versiones móviles, por ejemplo, una aplicación para iPhone, otra para móviles Android, etc.
Desde el punto de vista de la optimización de motores de búsqueda o SEO, sólo aparecería una url en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. También se evitarían errores al acceder al sitio web en concreto desde los llamados “social links”, es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook o Twitter y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.
Este mes hemos conocido un nuevo proyecto basado en este concepto, así como gratuito (alojado en Github) y de Código abierto: GroundworkCSS. Nos ha encantado la flexibilidad y claridad de la herramienta, y la filosofía que propone para el diseño de un sitio web. Está hecho con Sass y Compass, con una gran versatilidad y opciones de visualización muy intuitivas. Todavía está en beta, pero ya se perfila como una estupenda herramienta.









Sin comentarios »