Responsive design o diseño adaptativo

Ambos términos tienen un objetivo muy similar. Buscan brindar la mejor experiencia posible en un solo sitio web cuando se visualiza en una gran cantidad de dispositivos de escritorio, móviles y tabletas.

Ethan Marcote es ampliamente citado como la combinación del término responsive design, que es el uso de consultas para servir a diferentes CSS permitiendo que un sitio cambie su apariencia cuando se ve en pantallas de diferentes tamaños. En resumen, se puede lograr simplemente con HTML y CSS. (En estos días suele ser HTML5 / CSS3, pero no es obligatorio)

Diseño adaptativo es el título del libro de Aaron Gustafson, toda una autoridad en este campo. El diseño adaptable del sitio incluye las consultas de CSS del responsive design, pero también agrega mejoras basadas en Javascript para cambiar el marcado HTML del sitio basado en las capacidades del dispositivo. Esto también se llama «Mejora progresiva»

Un ejemplo es que puede tener una barra lateral de navegación en la versión de tamaño de escritorio del sitio, y luego, cuando se ve en un teléfono inteligente, el menú se convierte en una lista de selección para ahorrar espacio en la interfaz. Otro ejemplo es que puede ofrecer funcionalidades en un dispositivo móvil no disponibles en una computadora de escritorio. Supongamos que tiene un sitio web de restaurante: cuando se visualiza en un dispositivo móvil con GPS, aparece un panel que dice «Obtenga direcciones a nuestro restaurante desde su ubicación». Los escritorios no conocen su ubicación, por lo que no les parece.

Responsive design (RWD)

Los elementos clave que conforman un sitio web Responsive son CSS3, consultas de medios, la regla @media y cuadrículas fluidas que utilizan porcentajes para crear una base flexible. También es fundamental utilizar imágenes flexibles, videos flexibles, tipos de fluidos y EM en lugar de píxeles. Todos estos puntos clave permiten que el sitio web adaptable modifique su diseño para adaptarse al dispositivo.

El Responsive design es del lado del cliente, lo que significa que la página se envía al navegador del dispositivo (el cliente), y el navegador modifica la apariencia de la página en relación con el tamaño de la ventana del navegador.

La definición de un sitio Responsive design es que modificará de manera fluida su composición para mejorar la accesibilidad del contenido en función del tamaño de pantalla de la ventana del navegador.

Diseño web adaptativo (AWD)

El diseño web adaptativo utiliza diseños predefinidos que se han construido cuidadosamente para una variedad de tamaños de pantalla. Un diseño particular se activa cuando el tamaño de la pantalla del dispositivo que ve el sitio web se detecta y se combina con una hoja de estilo.

El diseño adaptativo es predominantemente del lado del servidor. Esto significa que el servidor web realiza todo el trabajo de detección de los distintos dispositivos y carga la hoja de estilo correcta en función de los atributos del dispositivo. Además de cambiar el diseño según el tamaño de la pantalla, también pueden cambiar según las condiciones, como si el dispositivo tiene una pantalla retina o no.

El servidor puede detectar esto y mostrar imágenes de alta calidad para dispositivos de visualización de retina como iPad e imágenes de baja calidad para pantallas de definición estándar.
Las desventajas de AWD son que la construcción inicial es muy costosa ya que tiene muchos diseños para diseñar. Además, mantener y actualizar todos estos diseños puede llevar mucho tiempo y, por lo tanto, costará mucho dinero.

La definición de un sitio web adaptativo es aquella que tiene un conjunto de diseños predefinidos que se activan cuando mejor se adapta al dispositivo detectado por el servidor.

Similitudes y diferencias

La similitud obvia de ambos métodos es que mejoran la accesibilidad del contenido del sitio web en dispositivos móviles y varios tamaños de pantalla. Ambos también brindan a los visitantes una experiencia de usuario mejorada para dispositivos móviles.

Son diferentes en la forma en que entregan el diseño adaptable al usuario. RWD depende de las cuadrículas de fluidos y AWD se basa en diseños de tamaño predefinidos. Además, el hecho de que utilicen el lado del cliente o el lado del servidor es otra forma en que difieren.

Las ventajas del web responsive:

1. Fácil de usar y flexible en diferentes resoluciones de pantalla.

2. Experiencia visual y operacional unificada en múltiples terminales, con un bajo costo invertido en mantenimiento.

3. SEO amigable y no hay distinción de versión de página, manteniendo la estrategia SEO consistente.

4. La conexión entre sitios móviles y de escritorio puede completarse sin redirección.

Las ventajas del diseño adaptativo:

1. Compatible incluso con algún sitio complicado.

2. Se puede implementar a un precio menor.

3. La codificación será más eficiente.

4. Las pruebas serán mucho más fáciles y la operación puede ser relativamente más precisa.

¿Debo usar web responsive o responsivo?

Al sumar el puntaje, el web responsive es casi siempre la opción más segura para tu sitio. Siempre funciona bien independientemente de los nuevos tamaños de pantalla, mejora los tiempos de carga y, por lo general, vale la pena el esfuerzo adicional.

Sin embargo, para algunos sitios, la adaptación puede ser una mejor opción. Es probable que estos sean sitios web más nuevos y pequeños que recién están comenzando y que necesitan preservar sus recursos. Un sitio de adaptación es más fácil de crear, y el tamaño y la audiencia más pequeños evitarían que los tiempos de carga más lentos o la menor flexibilidad sean un problema.

Consejos rápidos para los diseñadores:

• Determina las diferencias y similitudes entre los elementos de la página y desarrolla patrones comunes para las plantillas de página. Este enfoque ahorrará tiempo y le dará una sensación consistente al sitio.
• Al diseñar adaptativo, diseña para estos seis anchos de pantalla comunes: 320, 480, 760, 960, 1200 y 1600.
• Proporciona a tu desarrollador una guía de estilo como esta junto con sus PSD.
• Realiza un control de calidad  de los archivos codificados para asegurarte de que cada página se muestre como lo habías previsto.
• Las consultas de medios no funcionan en Internet Explorer 8 y anteriores. Utilice un polyfill de Javascript como CSS3-MediaQueries.js para admitir consultas de medios en navegadores antiguos. Sin embargo, considera que los rellenos automáticos se pueden agregar al tamaño del archivo y que los usuarios pueden desactivar Javascript.
• Para diseños de cuadrícula flexibles en web responsive, utilice ems o porcentajes. Evitar anchos fijos.
• En elweb responsive, usa el ancho máximo: 100% para hacer que las imágenes, los videos y el lienzo HTML5 sean escalables. A medida que se reducen las vistas, cualquier medio se reducirá de acuerdo con el ancho de su contenedor. Sin embargo, el ancho máximo no funciona con medios incrustados. Echa un vistazo a este artículo para conocer la solución proporcionada por A List Apart.
• Mantente en constante comunicación con tu diseñador. Si estás confundido, pregunta ahora para no tener que arreglar nada más tarde.