Diseño web adaptativo

El diseño web adaptativo ( AWD ) promueve la creación de múltiples versiones de una página web para adaptarse mejor al dispositivo del usuario, a diferencia de una única página estática que se carga (y se ve) igual en todos los dispositivos o una única página que reordena y redimensiona el contenido de forma responsiva según el dispositivo/ tamaño de pantalla / navegador del usuario.

Esto describe con mayor frecuencia el uso de una versión móvil y de escritorio de una página (o en la mayoría de los casos, el sitio web completo ), cualquiera de las cuales se recupera en función del agente de usuario definido en la solicitud HTTP GET , lo que se conoce como entrega dinámica . El diseño web adaptativo fue una de las primeras estrategias para optimizar un sitio para la legibilidad móvil , la práctica más común implicaba usar un sitio web completamente separado para dispositivos móviles y de escritorio, con dispositivos móviles a menudo redirigidos a la versión móvil del sitio servido en un subdominio (a menudo el subdominio de tercer nivel, denotado "m" ; p. ej. http:// m .website.com/; y/o parámetros de URL como &app=m&persist_app=1los utilizados en YouTube). Hoy en día, el uso de dos sitios estáticos separados para visualización móvil y de escritorio se está eliminando en gran medida, y en su lugar se utilizan secuencias de comandos del lado del servidor para servir páginas generadas dinámicamente o para decidir dinámicamente qué versión de una página estática servir, aunque todavía se puede observar con frecuencia el uso de sitios independientes para dispositivos móviles y de escritorio. Si bien muchos sitios web emplean técnicas de diseño web adaptativo o responsivo, las dos no son mutuamente excluyentes , y las mejores prácticas para el contenido diseñado más universalmente legible emplean una combinación de las dos técnicas para admitir un espectro completo de hardware y software . ^[2]

La existencia de front-ends separados permite a los clientes que experimentan problemas técnicos con uno de ellos recurrir al otro, con la posibilidad de que el problema no vuelva a ocurrir.

El diseño web adaptativo es un proceso de detección del lado del servidor que elige un diseño y un tamaño para mostrar. Se pueden utilizar todos los tipos de diseños web, incluido el diseño responsivo. El diseño adaptativo ofrecerá diferentes versiones de la página a diferentes dispositivos en función de los tamaños y resoluciones de pantalla habituales. El término fue acuñado por primera vez por Aaron Gustafson en su libro de 2011 Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement [Diseño web adaptativo: creación de experiencias enriquecidas con mejora progresiva ] . ^[2]

El diseño web adaptativo utiliza varios diseños de página para una sola página web y, a veces, mejora progresiva (PE). El modelo adaptativo es un diseño "móvil independiente", en contraste con el JavaScript " móvil primero " y la mejora progresiva del diseño web adaptable. "Móvil independiente" es el mismo concepto que "móvil primero", excepto que el diseño de AWD tiene un diseño móvil base independiente en comparación con el diseño único del diseño web adaptable.

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 es crear un diseño móvil básico y utilizar una mejora progresiva para teléfonos inteligentes, en lugar de confiar en una degradación elegante para que funcione un sitio complejo y con muchas imágenes. ^{[3] [4]}

El diseño adaptativo es un enfoque amplio del diseño web que se centra en la idoneidad para una variedad de interfaces en lugar de restringirse al formato destinado a una pantalla de escritorio. Esto es especialmente significativo ya que los dispositivos móviles ahora tienen una mayor participación de mercado que los equipos de escritorio. ^[5] Aunque las prácticas web dinámicas han existido durante más de dos décadas, el diseño dinámico en referencia al diseño gráfico, en particular para la visualización en dispositivos móviles, es un concepto más reciente. Las nuevas tecnologías como CSS3 Media Queries , AJAX, HTML5 y JavaScript se han centrado en el diseño responsivo, que suele ser más eficiente y efectivo que el diseño adaptativo. La transición del escritorio al móvil ha llevado a un alejamiento del diseño web adaptativo y a un avance hacia el diseño web responsivo. ^{[ cita requerida ]}

El diseño web adaptativo funciona para detectar el tamaño de la pantalla durante la solicitud HTTP GET , antes de que se muestre la página y cargar la página diseñada apropiadamente específica para el agente de usuario . Con el diseño estándar adaptativo, "generalmente se diseñaría un sitio adaptativo para seis anchos de pantalla comunes: 320, 480, 760, 960, 1200 y 1600". ^{[6] [7]} Esta no era solo una práctica común para la optimización móvil, sino también el período de transición entre los monitores CRT de baja resolución 4:3 y los monitores LCD de alta resolución 16:9 . El diseño web adaptativo estándar era necesario para crear diseños fluidos para los diversos monitores disponibles. ^[6]

En los primeros tiempos de los teléfonos inteligentes, las dimensiones de las pantallas variaban enormemente y los navegadores web móviles carecían de las funciones avanzadas y los complementos que se utilizaban para crear entornos ricos en los navegadores de escritorio. Además, el uso de Internet móvil era caro y muy lento, por lo que era necesario diseñar páginas móviles "reducidas", con menos imágenes o de peor calidad y un ajuste de texto nítido para facilitar la lectura. El siguiente cambio importante en el diseño web estándar adaptable llegó con el auge del iPhone y la disponibilidad generalizada de 3G , que aumentó drásticamente las velocidades de conexión y el ancho de banda disponible. Se volvió común que los sitios tuvieran dos versiones: un diseño móvil optimizado para iPhone (generalmente con el prefijo de subdominio "m") y un diseño de escritorio. Las versiones móviles generalmente seguían siendo "reducidas" con imágenes de menor calidad y, a veces, carecían de contenido como videos para disminuir el tiempo de carga. Los diseños también se vieron influenciados por la difusión de los dispositivos de pantalla táctil, con sitios web que utilizan enlaces y botones más grandes que facilitan la navegación utilizando un dedo como puntero. Más tarde, la implementación generalizada de la banda ancha móvil rápida 4G LTE significó que ya no era necesario degradar la calidad de los medios móviles o recortar el contenido para lidiar con velocidades de conexión lentas. A medida que el sistema operativo Android de Google ganó popularidad e introdujo más variación en el mercado de teléfonos inteligentes, el paradigma de múltiples páginas del diseño web dinámico estándar se volvió menos común, aunque todavía se usa para separar por completo el diseño de contenido de pantalla táctil del diseño de escritorio. Al integrar con diseño de material o esquemas de color y diseño específicos del dispositivo, algunos desarrolladores encuentran más simple crear tres plantillas de página (Android, iPhone/iOS, escritorio), cambiando los íconos y colores entre cada una, mientras usan consultas de medios para determinar el diseño. La práctica da como resultado un diseño y código de página mucho más simple, pero la actualización requiere editar las tres plantillas.

No hay consenso sobre la denominación, y tanto el diseño adaptativo como el responsivo se utilizan para referirse al mismo comportamiento, pero lo que comúnmente se denomina diseño responsivo utiliza menos diseños de página que el diseño adaptativo estándar, normalmente solo uno. El diseño adaptativo se considera menos a prueba de futuro y menos eficiente que el diseño responsivo porque los tamaños de pantalla de los dispositivos comunes cambian constantemente y son muy variables. Un modelo de diseño híbrido adaptativo/responsivo implica múltiples versiones de páginas con diseños responsivos. ^[6]

Los diseños adaptables estándar también pueden usar una escala adaptativa de la ventana gráfica de la página (como en el diseño web adaptable), pero el enfoque de crear diferentes diseños para diferentes dispositivos o resoluciones ahora es poco común y generalmente se ve donde el sitio desea apuntar a usuarios de dispositivos móviles no inteligentes con capacidad para Internet y teléfonos inteligentes obsoletos que no pueden usar las tecnologías que requieren los nuevos diseños adaptables. ^[6]

Hay variaciones de estos conceptos que difuminan las líneas entre el diseño web adaptativo y responsivo, como las "vistas" de Django y algunos aspectos de AJAX , que sirven diferentes versiones de páginas, incluso con el propósito de fluidez en diferentes dispositivos, sin embargo las páginas se generan dinámicamente, no estáticamente. ^{[7] [8] [2]}