Diseño web adaptativo

Muchas personas usan los términos diseño receptivo y diseño adaptativo indistintamente, pero crear una distinción entre ellos ayuda a aclarar dos enfoques diferentes para el desafío moderno de diseñar páginas web que funcionen en pantallas pequeñas y grandes.

En el mundo del diseño web, lo único más difícil que mantenerse al día con los estándares en constante evolución en HTML, CSS y otras tecnologías es mantenerse al día con el vocabulario. Este artículo trata de ayudarlo a comprender lo que significa el diseño receptivo y adaptativo, y cómo difieren estos enfoques.
Muchos enfoques para el diseño web móvil: cuando las personas comenzaron a usar teléfonos móviles para conectarse a sitios web, muchos de nosotros creamos versiones especiales de nuestros sitios específicamente optimizadas para funcionar solo en dispositivos móviles pequeños.

Hoy en día, algunos sitios todavía usan este enfoque, creando un sitio móvil simple para visitantes con teléfonos celulares y dirigiendo a todos los demás al sitio web principal de escritorio.

A medida que los dispositivos móviles se han vuelto más inteligentes, dos nuevos enfoques para el diseño de pantallas pequeñas y grandes se han convertido en un diseño adaptable y receptivo popular.
El diseño adaptativo se desarrolló para satisfacer las diversas necesidades de un número creciente de teléfonos celulares con diferentes capacidades y tamaños de pantalla. El diseño adaptativo requiere que cree muchas versiones diferentes de cada página web e instale una programación complicada en su servidor web que detecte cada dispositivo y entregue una versión del sitio optimizada para el tamaño específico y las características de ese visitante de teléfono celular. El diseño adaptativo es complicado, costoso y generalmente solo lo usan sitios web grandes y bien financiados.

Afortunadamente, un enfoque nuevo y más simple llamado diseño receptivo está ganando popularidad rápidamente. Con un diseño receptivo, puede crear una página web y luego usar varios conjuntos de reglas CSS para cambiar el formato y el diseño en función del tamaño de la ventana del navegador.
Tanto el diseño web adaptable como el receptivo tienen que ver esencialmente con la creación de diseños web optimizados para el tamaño de la pantalla o el tipo de dispositivo que se utiliza para verlos.
El concepto básico es que cree un sitio web que funcione en múltiples tamaños de pantalla, más comúnmente para funcionar bien en al menos tres tamaños de pantalla diferentes: una pantalla móvil pequeña, una pantalla del tamaño de una tableta y un monitor de computadora de escritorio más grande.
Bien, ¿cuál es la diferencia entre diseño de páginas web adaptable y sensible?

La forma más simple y común en la que he visto estos términos comparados es:
Los diseños receptivos responden a los cambios en el ancho de una ventana del navegador ajustando de manera fluida la ubicación de los elementos en una página web para que se ajuste mejor al espacio disponible. Por lo tanto, a medida que arrastra el costado de un navegador para hacerlo más grande o más pequeño, verá el cambio de diseño en tiempo real. Visite ese sitio en un iPhone, iPad u otro dispositivo de tamaño similar, y verá el diseño que se adapta a ese dispositivo de tamaño.

Los diseños adaptativos, como el que creó American Airlines, utilizan un sofisticado script de autodetección en el servidor web para identificar cada dispositivo que visita el sitio y luego ofrecen la mejor versión del sitio, en función del tamaño y las capacidades de cada dispositivo.