stringtranslate.com

Diseño web responsivo

Captura de pantalla de Wikipedia con el diseño adaptable Vector 2022, en la pantalla de una computadora (izquierda) y en la pantalla de un teléfono móvil (derecha). Los elementos se reorganizan para lograr un diseño más compatible con dispositivos móviles.
El contenido es como el agua , un dicho que ilustra los principios de RWD

El diseño web responsivo ( RWD ) o diseño responsivo es un enfoque del diseño web que tiene como objetivo hacer que las páginas web se muestren bien en una variedad de dispositivos y tamaños de ventanas o pantallas, desde el tamaño mínimo hasta el máximo, para garantizar la usabilidad y la satisfacción. [1] [2]

Un diseño responsivo adapta el diseño de la página web al entorno de visualización [1] mediante el uso de técnicas como cuadrículas basadas en proporciones fluidas, [3] [4] imágenes flexibles, [5] [6] y consultas de medios CSS3 , [7] [8] [9] una extensión de la regla, [10] de las siguientes maneras:@media

El diseño web adaptable se volvió más importante a medida que los usuarios de dispositivos móviles pasaron a representar la mayoría de los visitantes de sitios web. [11] [12] En 2015, por ejemplo, Google anunció Mobilegeddon y comenzó a mejorar la clasificación de páginas de sitios optimizados para dispositivos móviles cuando se busca desde un dispositivo móvil. [13]

El diseño web adaptable es un ejemplo de plasticidad de la interfaz de usuario . [14]

Desafíos y otros enfoques

Luke Wroblewski ha resumido algunos de los desafíos del diseño móvil y RWD y ha creado un catálogo de patrones de diseño para múltiples dispositivos. [15] [16] [17] Sugirió que, en comparación con un enfoque HWD simple, los enfoques de experiencia del dispositivo o RESS (diseño web responsivo con componentes del lado del servidor) pueden proporcionar una experiencia de usuario que esté mejor optimizada para dispositivos móviles. [18] [19] [20] La implementación del generador CSS del lado del servidor de lenguajes de hojas de estilo como Sass puede ser parte de dicho enfoque. Google ha recomendado el diseño responsivo para sitios web de teléfonos inteligentes sobre otros enfoques. [21]

Aunque muchos editores han implementado diseños responsivos, un desafío para la adopción de RWD fue que algunos anuncios de banner y videos no eran fluidos. [22] Sin embargo, la publicidad de búsqueda y la publicidad gráfica (de banner) llegaron a admitir la segmentación por plataforma de dispositivo específico y diferentes formatos de tamaño de anuncio para computadoras de escritorio, teléfonos inteligentes y dispositivos móviles básicos. Se han utilizado diferentes URL de páginas de destino para diferentes plataformas, [23] o se ha utilizado Ajax para mostrar diferentes variantes de anuncios en una página. [24] [16] [25] Las tablas CSS permitieron diseños híbridos fijos y fluidos. [26]

Ha habido muchas formas de validar y probar diseños RWD, [27] desde validadores de sitios móviles y emuladores móviles hasta herramientas de prueba simultánea como Adobe Edge Inspect . [28] Los navegadores Chrome, Firefox y Safari y las herramientas para desarrolladores han ofrecido herramientas de cambio de tamaño de la ventana gráfica de diseño responsivo, al igual que terceros. [29] [30]

Historia

La especificación W3C de HTML+ establecía que los sitios web debían ser renderizados de acuerdo con las preferencias del usuario. [31] Sin embargo, faltaba personalización del diseño de la página web. Muchos desarrolladores web recurrían a tablas HTML comunes como una forma de personalizar el diseño y, al mismo tiempo, aportar cierta capacidad de respuesta básica a sus sitios web.

El primer sitio importante que presentó un diseño que se adapta de manera no trivial al ancho de la ventana gráfica del navegador fue Audi.com , lanzado a fines de 2001, [32] creado por un equipo de razorfish compuesto por Jürgen Spangl y Jim Kalbach (arquitectura de la información), Ken Olling (diseño) y Jan Hoffmann (desarrollo de la interfaz). Las capacidades limitadas del navegador significaron que, en el caso de Internet Explorer, el diseño podía adaptarse dinámicamente en el navegador, mientras que, en el caso de Netscape, la página debía volver a cargarse desde el servidor cuando se redimensionaba.

Cameron Adams creó una demostración en 2004. [33] En 2008, se utilizaban varios términos relacionados como "flexible", "líquido", [34] "fluido" y "elástico" para describir los diseños. Las consultas de medios CSS3 estaban casi listas para su uso a finales de 2008 y principios de 2009. [35] Ethan Marcotte acuñó el término diseño web responsivo [36] —y lo definió como cuadrícula fluida/imágenes flexibles/consultas de medios— en un artículo de mayo de 2010 en A List Apart . [1] Describió la teoría y la práctica del diseño web responsivo en su breve libro de 2011 titulado Responsive Web Design . El diseño responsivo fue clasificado como el número 2 en las principales tendencias de diseño web para 2012 por la revista .net después de una mejora progresiva en el número 1. [37]

Mashable calificó al 2013 como el año del diseño web responsivo. [38]

Conceptos relacionados

El diseño para dispositivos móviles y la mejora progresiva son conceptos relacionados que son anteriores a RWD. [39] Los navegadores de teléfonos móviles básicos no entienden JavaScript ni consultas de medios , por lo que una práctica recomendada era crear un sitio web básico y mejorarlo para teléfonos inteligentes y computadoras personales , en lugar de confiar en una degradación elegante para hacer que un sitio complejo y con muchas imágenes funcione en teléfonos móviles. [40] [41] [42] [43]

Véase también

Referencias

  1. ^ abc Marcotte, Ethan (25 de mayo de 2010). "Diseño web responsivo". A List Apart .
  2. ^ Schade, Amy (4 de mayo de 2014). «Responsive Web Design (RWD) and User Experience» (Diseño web adaptable (RWD) y experiencia del usuario). Nielsen Norman Group . Consultado el 19 de octubre de 2017 .
  3. ^ "Conceptos básicos del diseño web responsivo". 8 de septiembre de 2014.
  4. ^ ab Marcotte, Ethan (3 de marzo de 2009). "Fluid Grids". A List Apart.
  5. ^ ab Marcotte, Ethan (7 de junio de 2011). "Imágenes fluidas". A List Apart.
  6. ^ Hannemann, Anselm (7 de septiembre de 2012). "El camino hacia las imágenes reactivas". Revista net.
  7. ^ Gillenwater, Zoe Mickley (15 de diciembre de 2010). Ejemplos de diseños flexibles con consultas de medios CSS3. Stunning CSS3. p. 320. ISBN 978-0-321-722133.
  8. ^ Gillenwater, Zoe Mickley (21 de octubre de 2011). "Elaboración de consultas de medios de calidad".
  9. ^ "Diseño responsivo: aprovechar el poder de las consultas de medios". Centro para webmasters de Google. 30 de abril de 2012.
  10. ^ "Regla @media". w3.org . W3C .
  11. ^ "Índice de redes visuales de Cisco: informe técnico sobre la actualización del pronóstico de tráfico de datos móviles globales 2014-2019". Cisco . 30 de enero de 2015 . Consultado el 4 de agosto de 2015 .
  12. ^ "Cuota de visitas a motores de búsqueda orgánicos de EE. UU. desde dispositivos móviles en 2021". Statista . Consultado el 29 de octubre de 2021 .
  13. ^ "Blog oficial de Google Webmaster Central: Implementación de la actualización para dispositivos móviles". Blog oficial de Google Webmaster Central . Consultado el 4 de agosto de 2015 .
  14. ^ Thevenin, D.; Coutaz, J. (2002). "Plasticidad de las interfaces de usuario: marco de trabajo y agenda de investigación". Proc. Interact'99, A. Sasse y C. Johnson, editores, IFIP IOS Press . Edimburgo, págs. 110-117.
  15. ^ Wroblewski, Luke (17 de mayo de 2011). "Movilismo: jQuery Mobile".
  16. ^ ab Wroblewski, Luke (6 de febrero de 2012). "Arremangándonos las mangas para responder".
  17. ^ Wroblewski, Luke (14 de marzo de 2012). "Patrones de diseño para múltiples dispositivos".
  18. ^ Wroblewski, Luke (29 de febrero de 2012). "Diseño responsivo... o RESS".
  19. ^ Wroblewski, Luke (12 de septiembre de 2011). "RESS: Diseño adaptable + componentes del lado del servidor".
  20. ^ Andersen, Anders (9 de mayo de 2012). "Introducción a RESS".
  21. ^ "Creación de sitios web optimizados para teléfonos inteligentes".
  22. ^ Snyder, Matthew; Koren, Etai (30 de abril de 2012). "El estado de la publicidad adaptativa: la perspectiva de los editores". Revista .net.
  23. ^ "Ayuda de Google Partners". google.com . Consultado el 21 de mayo de 2015 .
  24. ^ "Detección de dispositivos del lado del servidor: historia, beneficios y procedimientos". Revista Smashing. 24 de septiembre de 2012.
  25. ^ JavaScript y diseño web responsivo Desarrolladores de Google
  26. ^ "El papel de los diseños de tablas en el diseño web adaptable". Web Design Tuts+ . 23 de enero de 2013 . Consultado el 21 de mayo de 2015 .
  27. ^ Young, James (13 de agosto de 2012). "Los principales problemas del diseño web responsivo... pruebas". Revista .net.
  28. ^ Rinaldi, Brian (26 de septiembre de 2012). "Pruebas de navegador... con Adobe Edge Inspect".
  29. ^ "Vista de diseño adaptable". Red de desarrolladores de Mozilla . Consultado el 21 de mayo de 2015 .
  30. ^ Malte Wassermann. "Herramienta de prueba de diseño responsivo – Viewport Resizer – Emulate various screenresolutions – Best developer device testing toolbar" (La mejor barra de herramientas de prueba de dispositivos para desarrolladores). maltewassermann.com . Consultado el 21 de mayo de 2015 .
  31. ^ "Una descripción general de HTML+". w3.org . W3C .
  32. ^ Kalbach, Jim (22 de julio de 2012). "El primer sitio web con diseño adaptable: Audi (circa 2002)". [¿ Fuente autoeditada? ]
  33. ^ Adams, Cameron (21 de septiembre de 2004). "Diseño en función de la resolución: variación del diseño según el ancho del navegador". El hombre de azul .
  34. ^ "G146: Uso de diseño líquido". w3.org . Consultado el 21 de mayo de 2015 .
  35. ^ "Consultas de medios". w3.org . Consultado el 21 de mayo de 2015 .
  36. ^ "OutSeller Group - Organizar, optimizar, maximizar". outseller.net . Consultado el 21 de mayo de 2015 .
  37. ^ Grannell, Craig (9 de enero de 2012). «Las 15 principales tendencias de diseño y desarrollo web para 2012». Revista .net. Archivado desde el original el 11 de septiembre de 2013. Consultado el 29 de octubre de 2021 .
  38. ^ Cashmore, Pete (11 de diciembre de 2012). "Por qué 2013 es el año del diseño web adaptativo". Mashable .
  39. ^ "¿Qué es el diseño web responsivo?". 23 de julio de 2012.
  40. ^ Wroblewski, Luke (3 de noviembre de 2009). "Mobile First".
  41. ^ Firtman, Maximiliano (30 de julio de 2011). Programación de la Web móvil. O'Reilly Media. pp. 512. ISBN 978-0-596-80778-8.
  42. ^ "Degradación elegante versus mejora progresiva". 3 de febrero de 2009. Archivado desde el original el 13 de noviembre de 2014.
  43. ^ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (febrero de 2010). Diseño con mejora progresiva. New Riders. pág. 456. ISBN 978-0-321-65888-3. Recuperado el 1 de marzo de 2010 .