Se denomina diseño web adaptativo, adaptable, receptivo, sensible o responsive (en inglés, Responsive Web Design, RWD), a una técnica de diseño y desarrollo web que pretende generar sitios web que se adapten a cualquier resolución de pantalla, desde smartphones hasta PCs, usando estructuras fluidas y media queries basadas en HTML5 y CSS3.
Qué es el responsive web design o diseño web adaptativo
El diseño web adaptativo o responsive web design, se enfoca en diseñar páginas web que se adapten a cualquier tipo de resolución de pantalla, desde smartphones hasta PCs, con una experiencia de usuario optimizada en lo referente a legilibilidad y navegación, mediante el uso de estructuras fluidas y media queries basadas en HTML5 y CSS3.
El diseño web adaptativo fue descrito por el consorcio W3C en el contexto de One Web, que se basa en los siguientes conceptos:
- Web for All: web para todos.
- Web on Everything: web accesible desde cualquier tipo de dispositivo.
- Unobtrusive JavaScript: web con JavaScript no obstructivo.
- Mobile First: web desarrollada para teléfonos móviles y luego optimizada para PC.
Los dispositivos móviles como tablets y smartphones cada vez son más utilizados para navegar, por lo que para muchos sitios ofrecer una versión móvil ya no es una opción, es algo indispensable.
Ahora bien, la fragmentación de dispositivos actual, con una gran variedad de dispositivos existente actualmente en el mercado, supone un gran desafío para los desarrolladores, que se ven ante el reto de crear aplicaciones que funcionen adecuadamente en cualquier dispositivo.
Hasta ahora, este problema se resolvía detectando qué navegador o qué dispositivo estaba accediendo al sitio, ya sea mediante JavaScript o PHP, para así servir la versión del sitio web apropiada o cargar una hoja de estilo determinada, lo que obligaba a desarrollar varias versiones del sitio web para abarcar los dispositivos existentes, por ejemplo www.misitio.com y mobile.misitio.com.
Con el diseño web responsive se cubren todas las resoluciones de pantalla con una sola versión en HTML y CSS, a diferencia de otros enfoques en los que se desarrollan diferentes versiones de la página web para cada tipo de dispositivos, por ejemplo PC, tablet o teléfono móvil.
Esto se hace sin tener que diseñar un sitio para cada dispositivo, sino que se genera un código que hace posible que el contenido se adapte en forma automática al tipo de hardware utilizado para navegar por internet.
Las principales ventajas que aporta el diseño web responsive son las siguientes:
- Mejora la experiencia de navegación del usuario, ya que el sitio permite navegar de manera satisfactoria con independencia del dispositivo desde el cual accede el visitante.
- Reduce los costes de desarrollo, ya que pasamos de tener una plataforma específica para móviles y otra para PC, e incluso una tercera para tableta, a una única web que se adapta a cualquier tipo de resolución, de manera que se evita tener aplicaciones específicas para cada dispositivo. Así, si el sitio se adapta en forma espontánea a todo tipo de hardware, se evita incurrir en sobrecostes de diseño para esta adaptación.
- Mejora la optimización SEO en los motores de búsqueda, al contar el sitio web con una única URL, evitando así redirecciones y los errores asociados a éstas.
- Facilita enlazar al sitio web, ya que página tiene una única URL y un permalink, evitando problemas cuando se comparten los marcadores de favoritos con otros usuarios o entre diferentes dispositivos.