Skip to main content

Diseño web adaptativo (Responsive web design)

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

El diseño web adaptativo o adaptable (en inglés, Responsive web design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web.

Origen

La idea y el propósito del diseño web adaptativo fue previamente discutida y descrita por el consorcio W3C en julio de 2008 en su recomendación “Mobile Web Best Practices” bajo el subtítulo “One Web”.

Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que está hecha en el contexto de “One Web”, y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.

El concepto de “One Web” hace referencia a la idea de construir una Web para todos (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).

Hoy en día, la variedad de dispositivos existente en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación es muy pobre.

Ethan Marcotte fué el que acuñó el término de “responsive web design“, publicando un libro llamado Responsive Web Design, donde describe los fundamentos teóricos y prácticos de esa nueva forma de diseño web. Aunque el concepto realmente surgió mucho antes, bajo la denominación “One Web” en las especificaciones del W3C en el 2008, donde se hace referencia de una web para todos (Web for All) accesible a todos los dispositivos.

Puede darse el caso en que necesitemos mostrar diferentes elementos según el dispositivo. El diseño adaptativo, además de controlar la estructura fluida de la web, también se encarga de esconder o mostrar determinados contenidos según el medio. Por ejemplo la versión móvil de muchos sitios se suele simplificar, eliminando todo el contenido considerado prescindible.

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

Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.

De esta forma se reducen los costes de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones ad-hoc para versiones móviles, por ejemplo, una aplicación específica para móviles Android, otra para iPhone, etc.

Desde el punto de vista de la optimización de motores de búsqueda, 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, Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.

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

 

 

Luis Alberto Fernández Arnanz

Luis Alberto Fernández Arnanz

UX/UI Leader & Senior Online/Offline Designer | Design Thinking | Social Media, Community Management & Marketing Online.

Luis Alberto Fernández Arnanz ha escrito 7 entradas


Luis Alberto Fernández Arnanz

Luis Alberto Fernández Arnanz

UX/UI Leader & Senior Online/Offline Designer | Design Thinking | Social Media, Community Management & Marketing Online.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *