Diseño web adaptable

Enfoque del diseño web para hacer que las páginas web se muestren bien en una variedad de dispositivos

Una captura de pantalla de Wikipedia con la máscara responsiva Vector 2022, en la pantalla de una computadora (izquierda) y en la pantalla de un teléfono móvil (derecha). Los elementos se reorganizan en un diseño más amigable para dispositivos móviles.

El contenido es como el agua , un dicho que ilustra los principios del 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 ventana o pantalla, desde el tamaño de visualización 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 concepto de cuadrícula fluida exige que el tamaño de los elementos de la página esté en unidades relativas, como porcentajes, en lugar de unidades absolutas, como píxeles o puntos . ^[4]
• Las imágenes flexibles también tienen un tamaño en unidades relativas, para evitar que se muestren fuera de su elemento contenedor . ^[5]
• Las consultas de medios permiten que la página utilice diferentes reglas de estilo CSS basadas en las características del dispositivo en el que se muestra el sitio, por ejemplo, el ancho de la superficie de representación (ancho de la ventana del navegador o tamaño de visualización física).
• Los diseños responsivos se ajustan y adaptan automáticamente al tamaño de pantalla de cualquier dispositivo, ya sea una computadora de escritorio, una computadora portátil, una tableta o un teléfono móvil.

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

El diseño web responsivo 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 multidispositivo. ^{[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 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 publicitarios y videos no eran fluidos. ^[22] Sin embargo, la publicidad basada en búsquedas y la publicidad gráfica (banners) llegaron a admitir la orientación a plataformas de dispositivos específicos y diferentes formatos de tamaño de publicidad para computadoras de escritorio, teléfonos inteligentes y dispositivos móviles básicos. Se han utilizado diferentes URL de página de destino para diferentes plataformas, ^[23] o se ha utilizado Ajax para mostrar diferentes variantes de publicidad en una página. ^{[24] [16] [25]} Las tablas CSS permitían diseños híbridos fijos y fluidos. ^[26]

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

Historia

La especificación W3C de HTML+ establece que los sitios web deben representarse de acuerdo con las preferencias del usuario. ^[31] Sin embargo, faltaba la personalización del diseño de la página web. Muchos desarrolladores web recurrieron a tablas HTML comunes como una forma de personalizar el diseño y, al mismo tiempo, brindar 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 del navegador fue Audi .com, lanzado a finales de 2001, ^[32] creado por un equipo de razorfish formado por Jürgen Spangl y Jim Kalbach (arquitectura de la información), Ken Olling (diseño) y Jan Hoffmann (desarrollo de interfaz). Las capacidades limitadas del navegador significaban que para Internet Explorer, el diseño podía adaptarse dinámicamente en el navegador mientras que, para Netscape, la página tenía que recargarse desde el servidor cuando se cambiaba su tamaño.

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 diseños.} Las consultas de medios CSS3 estaban casi listas para el horario de máxima audiencia a finales de 2008 y principios de 2009. ^[35] Ethan Marcotte acuñó el término diseño web responsivo ^[36] —y lo definió en el sentido de cuadrícula fluida/imágenes flexibles/consultas de medios—en un artículo de mayo de 2010. en una lista aparte . ^[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 catalogado 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 llamó a 2013 el Año del Diseño Web Responsivo. ^[38]

Conceptos relacionados

El diseño móvil primero y la mejora progresiva son conceptos relacionados que son anteriores al 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 fue crear un sitio web básico y mejorarlo para teléfonos inteligentes y computadoras personales , en lugar de depender de una degradación elegante para crear un sitio web complejo y con muchas imágenes. trabajo del sitio en teléfonos móviles. ^{[40] [41] [42] [43]}

Ver también

• portal de internet

• Diseño web adaptativo
• Bootstrap (marco de interfaz de usuario)
• Marco CSS
• Em (tipografía) § CSS
• Fundación (marco)
• Diseño web sin tablas
• Diseño en T

Referencias

1. Marcotte, Ethan (25 de mayo de 2010). "Diseño web adaptable". Una lista aparte .
2. Schade, Amy (4 de mayo de 2014). "Diseño web responsivo (RWD) y experiencia de usuario". Grupo Nielsen Norman . Consultado el 19 de octubre de 2017 .
3. "Conceptos básicos del diseño web adaptable". 8 de septiembre de 2014.
4. Marcotte, Ethan (3 de marzo de 2009). "Rejillas fluidas". Una lista aparte.
5. Marcotte, Ethan (7 de junio de 2011). "Imágenes fluidas". Una lista aparte.
6. Hannemann, Anselm (7 de septiembre de 2012). "El camino hacia las imágenes responsivas". Revista neta.
7. Gillenwater, Zoe Mickley (15 de diciembre de 2010). Ejemplos de diseños flexibles con consultas de medios CSS3. Impresionante CSS3. pag. 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 los 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 de actualización del pronóstico del 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 móviles a motores de búsqueda orgánicos de EE. UU. en 2021". Estatista . Consultado el 29 de octubre de 2021 .
13. "Blog oficial del Central para webmasters de Google: implementación de la actualización compatible con dispositivos móviles". Blog oficial del Centro para webmasters de Google . Consultado el 4 de agosto de 2015 .
14. Thévenin, D.; Coutaz, J. (2002). "Plasticidad de las interfaces de usuario: marco y agenda de investigación". Proc. Interact'99, A. Sasse y C. Johnson Eds, IFIP IOS Press . Edimburgo. págs. 110-117.
15. Wroblewski, Luke (17 de mayo de 2011). "Mobilismo: jQuery Mobile".
16. Wroblewski, Luke (6 de febrero de 2012). "Arremangarnos las mangas receptivas".
17. Wroblewski, Luke (14 de marzo de 2012). "Patrones de diseño multidispositivo".
18. Wroblewski, Luke (29 de febrero de 2012). "Diseño Responsive... o RESS".
19. Wroblewski, Luke (12 de septiembre de 2011). "RESS: Diseño responsivo + Componentes del lado del servidor".
20. Andersen, Anders (9 de mayo de 2012). "Comenzando con RESS".
21. "Creación de sitios web optimizados para teléfonos inteligentes".
22. Snyder, Mateo; Koren, Etai (30 de abril de 2012). "El estado de la publicidad responsiva: 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: historial, beneficios y procedimientos". Revista aplastante. 24 de septiembre de 2012.
25. JavaScript y diseño web adaptable Desarrolladores de Google
26. "El papel de los diseños de tablas en el diseño web adaptable". Tutos de diseño web+ . Consultado el 21 de mayo de 2015 .
27. Young, James (13 de agosto de 2012). "Principales problemas de diseño web responsivo... pruebas". Revista .net.
28. Rinaldi, Brian (26 de septiembre de 2012). "Pruebas del navegador... con Adobe Edge Inspect".
29. "Vista de diseño adaptable". Red de desarrolladores de Mozilla . Consultado el 21 de mayo de 2015 .
30. Malta Wassermann. "Herramienta de prueba de diseño responsivo - Viewport Resizer - Emulación de varias resoluciones de pantalla - 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 de diseño responsivo: Audi (alrededor de 2002)". ^{[ fuente autoeditada? ]}
33. Adams, Cameron (21 de septiembre de 2004). "Diseño dependiente de la resolución: diseño variable 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". vendedor externo.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 adaptable".
39. "¿Qué es el diseño web adaptable?". 23 de julio de 2012.
40. Wroblewski, Luke (3 de noviembre de 2009). "El móvil primero".
41. Firstman, Maximiliano (30 de julio de 2011). Programación de la Web Móvil. págs.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ñar con mejora progresiva. pag. 456.ISBN​ 978-0-321-65888-3. Consultado el 1 de marzo de 2010 .