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 sola página que reordena y cambia el tamaño del contenido. de forma receptiva según el dispositivo/ tamaño de pantalla / navegador del usuario.
Esto suele describir 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 dinámico. sirviendo . El diseño web adaptable fue una de las primeras estrategias para optimizar un sitio para la legibilidad móvil ; la práctica más común implicaba el uso de 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, denominado "m" ; por ejemplo , http://m.website.com/ y/o parámetros de URL como los &app=m&persist_app=1utilizados 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 el uso de sitios independientes para dispositivos móviles y de escritorio todavía se puede observar con frecuencia. Si bien muchos sitios web emplean técnicas de diseño web responsivos o adaptables, las dos no son mutuamente excluyentes , y las mejores prácticas para el contenido diseñado de lectura más universal emplean una combinación de las dos técnicas para admitir un espectro completo de hardware y software . [2]
La existencia de interfaces separadas permite a los clientes que experimentan problemas técnicos con cualquiera de ellos recurrir a otro, con la posibilidad de que el problema no ocurra.
El diseño web adaptable es un proceso de detección del lado del servidor que elige el diseño y el tamaño para mostrar. Se pueden utilizar todo tipo de diseños web, incluido el diseño responsivo. El diseño adaptativo ofrecerá diferentes versiones de la página para diferentes dispositivos según tamaños y resoluciones de pantalla comunes. El término fue acuñado por primera vez por Aaron Gustafson en su libro de 2011 Diseño web adaptativo: creación de experiencias ricas con mejora progresiva . [2]
El diseño web adaptable utiliza múltiples 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 separado", en contraste con JavaScript " móvil primero " , y una mejora progresiva del diseño web responsivo. "Móvil separado" es el mismo concepto que "móvil primero", excepto que el diseño de AWD debe tener un diseño móvil base separado frente al diseño único del diseño web responsivo.
Los navegadores de teléfonos móviles básicos no entienden JavaScript ni consultas de medios , por lo que una práctica recomendada es crear un diseño móvil básico y utilizar mejoras progresivas para teléfonos inteligentes, en lugar de depender de una degradación elegante para hacer que un sitio complejo y con muchas imágenes funcione. [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 limitarse al formato previsto para una pantalla de escritorio. Esto es especialmente significativo ya que los dispositivos móviles ahora tienen una mayor cuota de mercado que los ordenadores de sobremesa. [5] Aunque las prácticas web dinámicas existen desde hace más de dos décadas, el diseño dinámico en referencia al diseño gráfico, particularmente 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 hacia un diseño web responsivo. [ cita necesaria ]
El diseño web adaptable funciona para detectar el tamaño de la pantalla durante la solicitud HTTP GET , antes de que se entregue la página y cargar la página diseñada apropiadamente y específica para el agente de usuario . Con el diseño estándar adaptable, "generalmente se diseñaría un sitio adaptable para seis anchos de pantalla comunes: 320, 480, 760, 960, 1200 y 1600". [6] [7] Esta no solo era 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 16:9 de alta resolución . Era necesario un diseño web adaptable estándar para crear diseños fluidos para los distintos monitores disponibles. [6]
En los primeros días de los teléfonos inteligentes, las dimensiones de las pantallas variaban mucho y los navegadores web móviles carecían de la funcionalidad avanzada y los complementos utilizados para crear entornos enriquecidos 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 "simplificadas", con menos imágenes o de menor calidad y un ajuste de texto nítido para facilitar la lectura. El siguiente cambio importante en el diseño web estándar adaptable se produjo con el auge del iPhone y la disponibilidad generalizada de 3G , con un aumento espectacular de 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 todavía eran generalmente "reducidas" con imágenes de menor calidad y, a veces, carecían de contenido como vídeos para reducir el tiempo de carga. Los diseños también se vieron influenciados por la difusión de los dispositivos con pantalla táctil, con sitios web que utilizan enlaces y botones más grandes que facilitan la navegación con el dedo como puntero. Más tarde, la implementación generalizada de la rápida banda ancha móvil 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 variaciones en el mercado de teléfonos inteligentes, el paradigma de varias páginas del diseño web dinámico estándar se volvió menos común, aunque todavía tiene cierta utilidad para separar completamente el diseño de contenido de pantalla táctil del diseño de escritorio. Al integrar con Material Design o diseños y esquemas de color específicos del dispositivo, a algunos desarrolladores les resulta más sencillo 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 simples, pero la actualización requiere editar las tres plantillas.
No hay consenso sobre la denominación, y tanto adaptativo como responsivo se utilizan para referirse al mismo comportamiento, pero lo que comúnmente se llama 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 preparado para el 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 adaptativos estándar también pueden utilizar la escala de la página con ventana gráfica (como en el diseño web adaptable), pero el enfoque de crear diferentes diseños para diferentes dispositivos o resoluciones ahora es raro y generalmente se ve cuando el sitio desea dirigirse a usuarios de Internet no inteligentes. -Dispositivos móviles compatibles y teléfonos inteligentes obsoletos que no pueden utilizar las tecnologías que requieren los nuevos diseños responsivos. [6]
Hay variaciones en estos conceptos que desdibujan los límites 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 están generado dinámicamente, no estáticamente. [7] [8] [2]
