Diseño adaptativo frente a diseño receptivo

Las diferencias entre los enfoques de diseño receptivo y adaptativo destacan opciones importantes para nosotros como diseñadores web y de aplicaciones. Elegir con conocimiento puede permitirle planificar y ejecutar sus diseños con un mejor objetivo, propósito y resultados.

Con la omnipresencia y la diversidad de los dispositivos móviles, como diseñadores debemos atender la variedad de tamaños de pantalla. Este es un desafío al que todos los diseñadores web y de aplicaciones se enfrentan actualmente. Desde el monitor corporativo gigante hasta el reloj inteligente , hay una gran cantidad de formas en que los usuarios pueden acceder a la información en línea hoy. Los diseñadores que buscan cerrar la brecha entre los dispositivos tienen dos opciones para sus diseños: el sitio adaptable o el sitio receptivo .

Existe cierta confusión en cuanto a la diferencia entre diseño receptivo y diseño adaptativo . Los límites pueden parecer borrosos para quienes no tienen experiencia en ninguno de los dos estilos de diseño, pero hay claras diferencias cuando se observan más de cerca los dos.

Diseño de respuesta

El término Responsive Design fue acuñado por primera vez por el diseñador y desarrollador web Ethan Marcotte en su libro Responsive Web Design . Diseños de respuesta responden a los cambios en el ancho del navegador mediante el ajuste de la colocación de elementos de diseño para encajar en el espacio disponible.

Un sitio web receptivo muestra contenido según el espacio disponible del navegador. Si abre un sitio sensible en el escritorio y luego cambiar el tamaño de la ventana del navegador, el contenido se moverá de forma dinámica para organizar en sí (al menos en teoría) de forma óptima para la ventana del navegador . En los teléfonos móviles, este proceso es automático; el sitio comprueba el espacio disponible y luego se presenta en la disposición ideal.

El diseño receptivo es sencillo. Debido a que es fluido, significa que los usuarios pueden acceder a su mundo en línea y disfrutar tanto en su dispositivo de mano como lo harían en un monitor masivo. Para que esto sea cierto, el diseño receptivo requiere una muy buena conceptualización del sitio y un profundo conocimiento de las necesidades y deseos de los usuarios finales.

Diseño web adaptativo

El diseño web adaptable fue introducido en 2011 por el diseñador web Aaron Gustafson en su libro Diseño web adaptable: elaboración de experiencias enriquecedoras con mejora progresiva. También se conoce como mejora progresiva de un sitio web.

Donde el diseño receptivo se basa en cambiar el patrón de diseño para adaptarse al espacio disponible, el diseño adaptativo tiene múltiples tamaños de diseño fijos . Cuando el sitio detecta el espacio disponible , selecciona el diseño más apropiado para la pantalla. Entonces, cuando abre un navegador en el escritorio, el sitio elige el mejor diseño para esa pantalla de escritorio; cambiar el tamaño del navegador no tiene ningún impacto en el diseño.

Algunos sitios se han apresurado a adoptar el diseño adaptativo. Amazon, USA Today, Apple y About.com se configuraron para ser sitios web optimizados para dispositivos móviles. El diseño que se muestra en un sitio web móvil que utiliza un diseño adaptable puede ser diferente al de la versión de escritorio. Sin embargo, esto se debe a que los diseñadores han elegido un diseño diferente para la pantalla del teléfono en lugar de dejar el diseño para intentar reorganizarse.

En el diseño adaptativo, es normal desarrollar seis diseños para los seis anchos de pantalla más comunes; 320, 480, 760, 960, 1200 y 1600 píxeles.

Diseño móvil independiente

También existe la opción de crear un sitio web solo para dispositivos móviles (estos generalmente se indican en la barra de URL de un navegador con el prefijo “m”). Esta opción fue una vez un enfoque excelente. Los diseñadores crearían sitios para dispositivos móviles, sintonizando los elementos y el diseño para un formato dedicado. Google proporcionó clasificaciones de motores de búsqueda a sitios móviles, pero hoy en día se dan las mismas preferencias a los sitios adaptables y receptivos.

El gran inconveniente de crear un sitio separado (en lugar de usar diseños diferentes o emplear un diseño cambiante) es que requiere mucho más mantenimiento para mantener las dos versiones de un sitio web homogéneas. Sin un incentivo particular para hacer esto, el diseño solo para dispositivos móviles ha caído en desgracia en los últimos tiempos. Parece poco probable que regrese pronto.

Elegir entre diseño adaptable y adaptable

El diseño receptivo es más fácil y su implementación requiere menos trabajo . Ofrece menos control sobre su diseño en cada tamaño de pantalla, pero es, con mucho, el método preferido para crear nuevos sitios en este momento. Esto también puede tener algo que ver con la gran cantidad de plantillas baratas disponibles para la mayoría de los sistemas de gestión de contenido (CMS) como WordPress, Joomla, etc., después de todo, ¿quién quiere reinventar la rueda?

Los diseñadores receptivos crean un diseño único para usar en todas las pantallas y generalmente comenzarán en el medio de la resolución y usarán consultas de medios para determinar qué ajustes se harán para el extremo inferior y superior de la escala de resolución. Esto tiende a hacer felices a los usuarios, porque ese diseño web familiar parece estar garantizado para traducirse en la pantalla de cualquier dispositivo. La uniformidad y la fluidez son consideraciones cruciales para brindar una buena experiencia de usuario.

Es importante vigilar la jerarquía visual de los proyectos de diseño receptivo; desea intentar mantener esto mientras sus elementos se desplazan por la pantalla. Eso significa muchas pruebas con muchos dispositivos diferentes para asegurarse de que está entregando los productos. Si el diseño de un sitio es relativamente simple, se traducirá bien en las pantallas de los dispositivos, fluyendo como un líquido de un recipiente a otro.

El SEO es otro gran argumento para usar un diseño receptivo. Los sitios que utilizan un diseño receptivo (es decir, aquellos con una URL que sirve a todos los dispositivos) son actualmente más amigables con los motores de búsqueda.

El diseño receptivo parece tener un caso sólido para su uso. Bueno, podría; sin embargo, tenga en cuenta lo siguiente:

• Debido a que su sitio web “fluirá” de un dispositivo a otro, ajustándose al tamaño de la pantalla, es posible que los anuncios que haya agregado no quepan en el espacio. De repente, el “atajo” que ofrece el uso del diseño receptivo puede necesitar un replanteamiento y un trabajo.
• Los tiempos de descarga varían entre dispositivos móviles y de escritorio. La flexibilidad de las imágenes es una gran consideración aquí. Un diseño grande que aparece rápidamente en la pantalla grande en casa o en la oficina requiere más tiempo (y datos) para aparecer en su móvil. ¿Podría ser mejor una vista previa más pequeña para la versión móvil?

El diseño adaptativo asegurará (teóricamente) la mejor experiencia de usuario de acuerdo con el dispositivo que el usuario esté utilizando para interactuar. A diferencia del diseño receptivo, donde una pantalla “fluye” desde el diseño de escritorio al de un dispositivo más pequeño, el diseño adaptable ofrece soluciones a medida. Como su nombre indica, se adaptan a las necesidades y capacidades situacionales del usuario. Como diseñadores, podemos mostrar a los usuarios que estamos en sintonía con sus necesidades en un dispositivo móvil al hacer que nuestro diseño sea fácil de tocar. Mientras tanto, podemos hacer lo mismo para los usuarios de escritorio. Comenzamos con la versión de resolución más baja del sitio y avanzamos hasta la más alta. Seis diseños son el estándar actual, pero dependiendo de los datos de sus usuarios, es posible que pueda usar menos diseños.

Una fortaleza del diseño adaptativo es que se siente más relevante para la experiencia del usuario moderno, mientras que el diseño receptivo muestra un enfoque más centrado en el escritorio (con las demandas de otros dispositivos en un lugar secundario, casi pasivo). Como usuarios, estamos más allá con nuestros dispositivos inteligentes. Nos gusta sentir que nuestros dispositivos son conscientes de lo que estamos pasando. Tomemos un ejemplo literal; si estuvieras conduciendo por un túnel largo, ¿no preferirías tener una pantalla GPS que se adapta al entorno y ajusta su brillo? Ese rendimiento y usabilidad basados ​​en el contexto son tranquilizadores y, al mismo tiempo, confirma que su dispositivo inteligente es lo suficientemente inteligente como para adaptarse y ser más útil.

También puede diseñar para optimizar anuncios para sus interfaces de usuario relevantes con diseño adaptativo. Debido a que está diseñando para diferentes resoluciones (es decir, diferentes campos de visión), puede acceder a las necesidades específicas de su usuario. La pura sofisticación de los sensores en, digamos, un teléfono inteligente permite a las empresas (y a nosotros los diseñadores) saber más que nunca sobre nuestros usuarios. Un usuario frecuenta una tienda, restaurante, gimnasio, etc. favoritos; al registrarse allí, crea un perfil. A partir de esto (segmentación por comportamiento, también conocida como personalización), podemos diseñar anuncios bien ajustados.

Otra ventaja: la investigación muestra que una empresa con un sitio web adaptable a menudo superará, en las pruebas de velocidad, a una empresa con un sitio web receptivo. Esta tampoco es una pequeña diferencia; Los sitios adaptables son a menudo 2-3 veces más rápidos que los receptivos y brindan bastante menos datos al usuario para brindar la experiencia del usuario.

El diseño adaptable tiene algunas ventajas importantes. Sin embargo, en el juego de diseñar para la mejor experiencia de usuario y brindar las mejores soluciones, debemos recordar que debemos tomarnos el tiempo para examinar nuestras opciones y las realidades de nuestros usuarios.

Hay inconvenientes en el diseño adaptativo. En primer lugar, suele ser mucho más trabajo que crear un diseño receptivo. Por esa razón, la mayoría de los diseños adaptables se utilizan para modernizar sitios existentes para permitir su uso en múltiples dispositivos. Entonces, parece que la primera orden del día es actualizar los sitios tradicionales permitiéndoles llegar a más dispositivos.

En segundo lugar, los diseños adaptables pueden dejar fuera a los usuarios “en el medio”. Los usuarios de tabletas o portátiles pueden quedarse “colgados” porque los diseñadores solo han atendido a los usuarios de computadoras de escritorio y teléfonos inteligentes. Por lo tanto, es importante ofrecer un enlace para que el usuario pueda alternar entre versiones.

Por último, mientras que los robots de los motores de búsqueda están mejorando a la hora de seleccionar y clasificar los resultados para distinguir entre sus sitios “.com” y los sitios “m .com”, es aconsejable aceptar el status quo. La mayoría de los motores de búsqueda aún no clasifican el contenido idéntico en varias URL por igual. Eso significa tener en cuenta que un diseño adaptativo podría hacer que retroceda en el SEO.

Por lo tanto, si bien existe una preferencia definida por el diseño receptivo en este momento, no descarte el diseño adaptativo si tiene el presupuesto. A Google le gustan los sitios web que se cargan rápido, al igual que los usuarios.

Recomiendas1 recomendaciónPublicado en accesibilidad, Diseño de interacción, Diseño de interfaz