¿Cuál es la diferencia entre diseño receptivo y diseño adaptativo?

Answer 1

Trataré de facilitarle la comprensión.

El diseño web adaptable se adapta al entorno del navegador y puede o no tener en cuenta el tamaño del navegador.

Consiste en múltiples interpretaciones del mismo diseño, una para cada tamaño. Cada versión se asigna a “puntos de anclaje” específicos que le indican al navegador cuándo saltar al siguiente diseño.

Un diseñador generalmente creará un diseño diferente para cada uno de los seis anchos de ventana más comunes (320px, 480px, 760px, 960px, 1200px y 1600px).

¿Cuándo elegir el diseño adaptativo?

1. El diseño adaptativo es más ventajoso para adaptar sitios web existentes que para construir nuevos, porque debe diseñarse con diseños con un mínimo de seis anchuras.

2. Los sitios web adaptables funcionan bien cuando la intención del usuario con el móvil difiere de la intención del usuario en los escritorios. Por ejemplo, en algunos sitios web, un usuario en un dispositivo móvil probablemente esté más interesado en reservar una cita de servicio que en un catálogo.

¿Por qué elegirlo?

El diseño web adaptable le permite tomar el control del diseño y centrar el desarrollo en vistas específicas y múltiples.

Con un sitio adaptable, una compañía puede medir qué opciones están funcionando mejor y alterar el diseño para maximizar el tráfico en línea.

Por ejemplo, si un sitio obtiene la mayor parte del tráfico a través del uso del escritorio, entonces la compañía debe asegurarse de que haya eliminado restricciones tales como la velocidad del sitio, la usabilidad, el tiempo de carga, etc., que un usuario del sitio en un escritorio puede experiencia.

Es importante tener en cuenta que un diseñador puede agregar vistas para diferentes tipos de dispositivos móviles, pero con el diseño adaptativo, los esfuerzos pueden centrarse en cualquier prioridad específica.

Los sitios web adaptables también se destacan en el rendimiento del tiempo de carga y la experiencia general del usuario, porque funcionan transfiriendo solo los activos necesarios para el dispositivo específico.

Según la investigación, los sitios adaptativos suelen ser dos o tres veces más rápidos que los receptivos.

El diseño web receptivo funciona sin tener en cuenta el tipo de navegador en uso, ya que responde al tamaño de un navegador y luego redistribuye el diseño en consecuencia.

Jeffrey Veen dijo: “Día a día, crece la cantidad de dispositivos, plataformas y navegadores que necesitan trabajar con su sitio. El diseño web receptivo representa un cambio fundamental en la forma en que construiremos sitios web para la próxima década “.

¿Cuándo elegirlo Diseño receptivo?

1. La mayoría de los sitios nuevos usan diseño receptivo.

2. Los diseñadores y desarrolladores que no tienen mucha experiencia consideran que el diseño receptivo es más fácil de trabajar gracias a la disponibilidad de temas accesibles a través de sistemas CMS como Drupal y WordPress.

3. Los sitios web receptivos generalmente funcionan bien para sitios web que tienen diferencias menores entre dispositivos móviles y computadoras de escritorio en la intención del usuario. Los usuarios desean ver las mismas opciones de sitio web desde computadoras de escritorio y teléfonos inteligentes.

¿Por qué elegirlo?

La capacidad de respuesta no ofrece tanto control como la adaptación, pero lleva mucho menos tiempo construirla, implementarla y mantenerla. Además, es más barato que el adaptativo, que requiere sitios web móviles dedicados.

El sitio web puede adaptarse al tipo de dispositivo que está utilizando el usuario.

Cuando United Way Bay Area (UWBA) y Morweb CMS se unieron para convertir un sitio web simple en una experiencia de usuario inmersiva, los resultados fueron sorprendentes.

Al adoptar Responsive Design, United Way of the Bay Area pudo aumentar sus sesiones móviles en más del 34 por ciento, aumentar las sesiones de tabletas en un 21.5 por ciento y generar un crecimiento del 28 por ciento en donaciones en línea año tras año.

El diseño web receptivo también es recomendado y recompensado por Google. Los algoritmos de los motores de búsqueda funcionan para que los sitios con un número creciente de usuarios móviles se ubiquen más altos que los que no responden.

El diseño receptivo puede ayudar al algoritmo de clasificación de Google a comprender que su sitio web proporciona una experiencia de usuario aceptable, ya sea que se vea en un teléfono, tableta o computadora de escritorio.

Aquí intenté explicar cómo funcionan estos dos tipos de diseño web. Puede aprender cuál será el adecuado para su empresa específica de este artículo.

Answer 2

El diseño receptivo es una técnica en la que se entrega el mismo código HTML a cada dispositivo, pero los ajustes a CSS (que determina el diseño de una página web) le permiten ajustarse al factor de forma de la pantalla. Para que esto suceda, como otros han mencionado, debe adoptar una cuadrícula fluida e implementar imágenes flexibles.

Con un diseño adaptativo, la diferencia más significativa es que el servidor que aloja el sitio web detecta los dispositivos que lo solicitan y utiliza esta información para entregar diferentes lotes de código HTML y CSS en función de las características del dispositivo que se han detectado.

Utilizando un enfoque de diseño adaptativo, un servidor puede elegir cómo renderizar páginas de manera óptima, así como mejorar o eliminar la funcionalidad sobre la marcha, en función de las capacidades detectadas, así como de la información conocida sobre el usuario en particular.

Escribí un artículo sobre VentureBeat que entra en esto con más detalle:

Diseño receptivo versus entrega adaptativa: ¿Cuál es el adecuado para usted?

Answer 3

Inicialmente, el diseño adaptativo fue acuñado en la discusión que siguió al innovador artículo de Ethan Marcotte sobre “Una lista aparte”, en el que definió el diseño receptivo y su propósito. Hoy en día, se debe entender que los dos términos significan lo mismo, y son parte de un enfoque independiente del dispositivo, lo que significa diseñar para el contenido independientemente del dispositivo, la conexión o el navegador utilizado. Sin embargo, en los primeros años de la adopción de la industria del diseño receptivo o fluido, representaron diferentes enfoques para alcanzar un objetivo similar.

El diseño receptivo , en su definición inicial, se ocupó en gran medida de la base CSS utilizada para establecer el diseño de cuadrícula del diseño en cuestión. En lugar de enfocarse en un ancho fijo, como el 960px estándar, el diseño del contenido de la página dependerá del ancho de la ventana gráfica o dispositivo. Por lo tanto, el mismo contenido podría presentarse fácilmente en un iPhone o un iMac sin la necesidad de sitios móviles u otras modificaciones del servidor.

Si bien las mejores prácticas de diseño receptivo han evolucionado con el tiempo, inicialmente, como industria, exploramos el diseño hasta puntos de interrupción estrictos, y luego nos dimos cuenta de las limitaciones que esto plantea por la amplitud de los tamaños de dispositivos que se lanzan regularmente. Gradualmente, comenzamos a entender que el diseño receptivo es un proceso más integrado, creando una experiencia óptima independientemente del ancho del dispositivo del usuario, la velocidad de conexión, la resolución de la pantalla, etc. Esencialmente, para responder a las necesidades y limitaciones del usuario en todos los niveles.

El diseño adaptativo generalmente se ocupó más de la mejora progresiva de un sitio y, en ese sentido, abarcó las piezas del diseño receptivo que iban más allá de la red. La diferencia clave aquí es que muchas de las formas iniciales de Adaptive Design trataban las solicitudes del servidor en lugar de depender de consultas de medios dentro de CSS o HTML. En su forma más simple, esto significaba redirigir a los usuarios a un sitio móvil.

Vale la pena señalar que a medida que Responsive Design evolucionó para enfocarse en cuadrículas independientes del dispositivo, escribiendo consultas de medios para enfocarse en el ancho de la ventana gráfica en lugar del dispositivo, Adaptive Design se mantuvo enfocado en proporcionar contenido basado en el tipo de dispositivo o el ancho del dispositivo. A medida que estos dos términos se han fusionado, hemos llegado a la conclusión de que diseñar para ser independiente del dispositivo es el mejor método, utilizando mejoras progresivas para mejorar la experiencia en diferentes casos de uso.

Por lo tanto, para responder a su pregunta, use contenido receptivo y mejoras adaptativas para crear la mejor experiencia general para su lector o usuario. Por ejemplo:

• Use una cuadrícula fluida que use consultas de medios para reorganizar el contenido en función del ancho de la ventana gráfica
• Use ems o rems para especificar anchos, tamaño de fuente, relleno y márgenes a lo largo de su CSS para que el diseño mantenga su estructura independientemente del tamaño de fuente predeterminado del navegador (definido por el usuario o no)
• Use consultas de medios para cargar recursos, como imágenes basadas en la resolución de pantalla del usuario, y considere cargar primero una imagen más pequeña y usar un lenguaje de secuencias de comandos para inyectar la imagen más grande en su lugar para tener en cuenta las conexiones más lentas
• Tenga en cuenta las limitaciones de los dispositivos táctiles con respecto a los efectos de desplazamiento y el ancho de los elementos en los que se puede hacer clic.
• Use la estrategia de contenido para pensar cómo cambia el diseño para diferentes tamaños de ventana gráfica en lugar de confiar arbitrariamente en los valores predeterminados de su sistema de cuadrícula. Ex. ¿debería aparecer el contenido de la barra lateral arriba o debajo del contenido principal en ventanas gráficas más pequeñas? Y recuerde, mostrar: ¡ninguno no significa que las cosas en ese elemento aún no se agreguen al peso de la página!
• En la mayoría de los casos, redirigir a los usuarios a un sitio móvil (m. Yoursite .com) no es ideal
• Lea este artículo sobre tipografía receptiva de Information Architects: Tipografía receptiva: conceptos básicos

Y lo más importante, sigue leyendo, sigue jugando, sigue modificando, sigue explorando. ¡No hemos llegado al final de la discusión sobre qué es el diseño receptivo o qué abarca!