Diseño web adaptable

Captura de pantalla de Wikipedia con el tema adaptable Vector 2022 , en una pantalla de ordenador (izquierda) y en una pantalla de teléfono móvil (derecha). Los elementos se reorganizan para ofrecer un diseño más adaptado a dispositivos móviles.

El diseño web responsivo ( RWD ) o diseño responsivo es un enfoque de diseño web que busca que las páginas web se visualicen correctamente en una variedad de dispositivos y tamaños de ventana o pantalla, 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 fluidas basadas en proporciones, ^{[ 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 requiere que el tamaño de los elementos de la página se exprese en unidades relativas como porcentajes, en lugar de unidades absolutas como píxeles o puntos . ^{[ 4 ]}
• Las imágenes flexibles también se dimensionan 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 en función de las características del dispositivo en el que se muestra el sitio, por ejemplo, el ancho de la superficie de renderizado (ancho de la ventana del navegador o tamaño físico de la pantalla).
• Los diseños responsivos se ajustan y adaptan automáticamente a cualquier tamaño de pantalla, ya sea un ordenador de sobremesa, un 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 de los sitios web. ^{[ 11 ] [ 12 ]} En 2015, por ejemplo, Google anunció Mobilegeddon y comenzó a mejorar el posicionamiento de las páginas de sitios web adaptados a dispositivos móviles cuando se realizaban búsquedas desde un dispositivo móvil. ^{[ 13 ]}

El diseño web responsivo es un ejemplo de plasticidad de la interfaz de usuario . ^{[ 14 ]}

Luke Wroblewski ha resumido algunos de los desafíos del diseño responsivo y móvil y ha creado un catálogo de patrones de diseño multidispositivo. ^{[ 15 ] [ 16 ] [ 17 ]} Sugirió que, en comparación con un enfoque simple de diseño web responsivo, 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 de un generador CSS del lado del servidor de lenguajes de hojas de estilo como Sass puede formar parte de dicho enfoque. Google ha recomendado el diseño responsivo para sitios web de teléfonos inteligentes por encima de otros enfoques. ^{[ 21 ]}

Aunque muchos editores han implementado diseños responsivos, un desafío para la adopción del diseño responsivo fue que algunos anuncios de banner y videos no eran fluidos. ^{[ 22 ]} Sin embargo, la publicidad en buscadores y la publicidad gráfica (de banner) llegaron a admitir la segmentación de plataformas de dispositivos específicos y diferentes formatos de tamaño de anuncios 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 ]}

Han existido muchas formas de validar y probar diseños web responsivos, ^{[ 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 Chrome, Firefox y Safari y las herramientas para desarrolladores han ofrecido herramientas de redimensionamiento de la ventana gráfica de diseño responsivo, al igual que terceros. ^{[ 29 ] [ 30 ]}

La especificación HTML+ del W3C establecía que los sitios web debían renderizarse según las preferencias del usuario. ^{[ 31 ]} Sin embargo, la personalización del diseño de las páginas web era deficiente. Muchos desarrolladores web recurrían a tablas HTML comunes para personalizar el diseño y, al mismo tiempo, dotar a sus sitios web de cierta adaptabilidad básica.

El primer sitio importante en presentar un diseño que se adapta de manera no trivial al ancho de la ventana gráfica del navegador fue Audi.com , lanzado a finales de 2001, ^{[ 32 ]} creado por un equipo en 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 de los navegadores 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 el tamaño.

Cameron Adams creó una demostración en 2004. ^{[ 33 ]} Para 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 su uso generalizado a finales de 2008/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 catalogado como el n.° 2 en las principales tendencias de diseño web para 2012 por la revista .net después de la mejora progresiva en el n.° 1. ^{[ 37 ]}

Mashable nombró a 2013 como el Año del Diseño Web Adaptable. ^{[ 38 ]}

El diseño mobile-first y la mejora progresiva son conceptos relacionados que preceden al diseño web responsivo. ^{[ 39 ]} Los navegadores de los teléfonos móviles básicos no entienden JavaScript ni las consultas de medios , por lo que una práctica recomendada era crear un sitio web básico y mejorarlo para teléfonos inteligentes y ordenadores personales , en lugar de depender de la degradación elegante para que un sitio complejo con muchas imágenes funcione en teléfonos móviles. ^{[ 40 ] [ 41 ] [ 42 ] [ 43 ]}

La plasticidad de la interfaz de usuario es la capacidad de una interfaz de usuario para soportar variaciones tanto de las características físicas del sistema como del entorno, preservando al mismo tiempo la usabilidad . ^{[ 44 ]}