Diseño web adaptativo (Responsive Web Design)

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.

Responsive web design, diseno web adaptativo

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.

Artículos en la categoría "Diseño web"

  1. Contenido web
  2. Ghostwriter (escritor fantasma)
  3. Sobrecarga de información (infoxicación)
  4. Copyleft
  5. Cross-browser
  6. CSS
  7. Desarrollo web con Firefox
  8. Diseño web adaptativo (Responsive Web Design)
  9. Editor de páginas web
  10. Enlace roto
  11. Estándares web
  12. Favicon
  13. GIF animados con The Gimp
  14. Hacer una página web
  15. Hiperenlace (hyperlink)
  16. Hipertexto
  17. HTML (HyperText Markup Language)
  18. Linkware
  19. Modelo de color HTML
  20. Navegador móvil
  21. Navegador web
  22. Nube de tags
  23. Páginas web estándar
  24. FAQ (Frequently Asked Questions)
  25. Páginas web gratuitas
  26. Páginas web para móviles
  27. Psicología del color
  28. Web 2.0
  29. Web 3.0
  30. Sitio web (website)
  31. Blog
  32. Blogosfera
  33. Comunidad virtual
  34. Internet superficial, Internet profunda e Internet oscura
  35. Podcast (podcasting)
  36. Web semántica
  37. Mashup
  38. Fotoblog
  39. Wiki
  40. Microblogging
  41. Página web
  42. Portal
  43. Redes sociales
  44. Videoblog
  45. WordPress
  46. WWW (World Wide Web)

Los comentarios están cerrados