Diseño Responsive -vs- Diseño Adaptativo

Google siempre ha recomendado el diseño web responsive (RWD) y en realidad es debido a la gran actualización realizada el 21 de abril de 2015, que trabajó para clasificar los sitios optimizados para móviles en una posición más alta.

No se especifica en la actualización que se debe utilizar el diseño responsive sin embargo, sólo un sitio que sea accesible por el móvil, con buena UX y excelente rendimiento.

Con esto en mente, vamos a examinar los pros y los contras de diseño de responsive en cuanto al rendimiento y la Experiencia de Usuario(UX).

Las diferencias entre los enfoques de diseño adaptable y adaptativo destacan las opciones importantes para nosotros como diseñadores web y de aplicaciones. Elegir con conocimiento puede ayudarlo a 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 se enfrentan actualmente todos los diseñadores de web y aplicaciones. 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 sensible.
Existe una cierta confusión en cuanto a la diferencia entre diseño responsivo 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 diferencias claras cuando se analizan más detenidamente los dos.
Diseño Resposivo
El término Diseño Responsivo fue acuñado por primera vez por el diseñador y desarrollador web Ethan Marcotte en su libro, Diseño Web Responsivo. Los diseños receptivos responden a los cambios en el ancho del navegador ajustando la ubicación de los elementos de diseño para que quepan en el espacio disponible.
Un sitio web sensible muestra contenido basado en el espacio del navegador disponible. Si abre un sitio de respuesta en el escritorio y luego cambia el tamaño de la ventana del navegador, el contenido se moverá dinámicamente para organizarse (al menos en teoría) de manera óptima para la ventana del navegador. En los teléfonos móviles, este proceso es automático; el sitio verifica el espacio disponible y luego se presenta en la disposición ideal.
El diseño responsivo 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 responsivo 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
Adaptive Web Design fue presentado en 2011 por el diseñador web Aaron Gustafson en su libro, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. También se conoce como mejora progresiva de un sitio web.
Cuando el diseño sensible se basa en cambiar el patrón de diseño para que se adapte a los bienes raíces disponibles, el diseño adaptable 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. Por lo tanto, 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 han sido rápidos para adoptar el diseño adaptativo. Amazon, USA Today, Apple y About.com se configuraron para ser sitios web optimizados para dispositivos móviles. Echa un vistazo a estos. Tenga en cuenta que el diseño que se muestra en un sitio web móvil con un diseño adaptable puede ser diferente de la versión del 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 que el diseño intente 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 (por lo general, se indican en la barra de URL de un navegador con el prefijo “m”). Esta opción fue una vez un excelente enfoque. Los diseñadores crearían sitios para dispositivos móviles, en sintonía con los elementos y el diseño para un formato dedicado. Google entregó clasificaciones de motores de búsqueda a sitios móviles, pero hoy en día se otorgan 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 variable) es que requiere mucho más mantenimiento para mantener las dos versiones de un sitio web homogéneo. Sin ningún incentivo particular para hacer esto, el diseño solo para dispositivos móviles ha perdido popularidad en los últimos tiempos. Parece poco probable que vuelva pronto.
Elegir entre diseño responsivo y adaptable
El diseño responsivo es más fácil y requiere menos trabajo para implementarlo. Ofrece menos control sobre su diseño en cada tamaño de pantalla, pero es el método preferido para crear nuevos sitios.
El diseño responsivo es más fácil y requiere menos trabajo para implementarlo. Ofrece menos control sobre su diseño en cada tamaño de pantalla, pero es 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 responsables crean un diseño único para ser usado en todas las pantallas y generalmente comenzarán en la mitad de la resolución y usarán las consultas de los medios para determinar qué ajustes se realizará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 uniformidad son consideraciones cruciales para proporcionar una buena experiencia de usuario.
Es importante mantener un ojo en la jerarquía visual de los proyectos de diseño receptivo; quieres intentar mantener esto mientras tus elementos se barajan en 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 contenedor a otro.
SEO es otro gran argumento para usar un diseño responsivo. Los sitios que utilizan un diseño receptivo (es decir, aquellos con una URL que sirve a todos los dispositivos) son actualmente más compatibles con los motores de búsqueda.
El diseño sensible parece tener un caso fuerte para el uso. Bueno, podría ser; Sin embargo, ten 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 cualquier anuncio que haya agregado no se ajuste al espacio. De repente, el “atajo” que ofrece el uso de un diseño responsivo puede necesitar un replanteamiento y trabajo.
Los tiempos de descarga varían entre los dispositivos de escritorio y móviles. La flexibilidad de las imágenes es una consideración importante aquí. Un gran diseño que aparece rápidamente en la pantalla grande en casa o en la oficina requiere más tiempo (y datos) para aparecer en su dispositivo móvil. ¿Podría una vista previa más pequeña ser mejor para la versión móvil?
El diseño adaptativo (teóricamente) garantizará la mejor experiencia de usuario según el dispositivo que el usuario esté usando para la interfaz. A diferencia del diseño responsivo, donde una pantalla “fluye” desde el diseño de escritorio a 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 táctil. Mientras tanto, podemos hacer lo mismo para los usuarios de escritorio. Comenzamos en la versión de resolución más baja del sitio y trabajamos 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.
Un punto fuerte del diseño adaptativo es que se siente más relevante para la experiencia del usuario moderno, mientras que el diseño responsivo muestra un enfoque más centrado en el escritorio (con las demandas de otros dispositivos que toman un lugar secundario, casi pasivo). Como usuarios, estamos fuera y más con nuestros dispositivos inteligentes. Nos gusta sentir que nuestros dispositivos son conscientes de lo que estamos atravesando. Tomemos un ejemplo literal; Si estuviera conduciendo a través de un largo túnel, ¿no preferiría tener una pantalla de GPS que se adapte al ambiente y ajuste su brillo? El rendimiento y la facilidad de uso basados ​​en el contexto son tranquilizadores y, al mismo tiempo, confirman que su dispositivo inteligente es lo suficientemente inteligente como para adaptarse y ser más útil.
También puede diseñar para optimizar los anuncios de sus interfaces de usuario relevantes con diseño adaptable. 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, por ejemplo, un teléfono inteligente permite a las empresas (y a los diseñadores) saber más que nunca sobre nuestros usuarios. Un usuario frecuenta una tienda, restaurante, gimnasio, etc. favorito. Al registrarse, crea un perfil. A partir de esto (la orientación por comportamiento, también conocida como personalización), podemos diseñar anuncios ajustados con precisión.
Otra ventaja: la investigación muestra que una compañía con un sitio web adaptable a menudo superará, en las pruebas de velocidad, una compañía con un sitio web sensible. Esto tampoco es una pequeña diferencia; los sitios de adaptación suelen ser de 2 a 3 veces más rápidos que los de respuesta y proporcionan menos datos al usuario para brindar la experiencia del usuario.
El diseño adaptativo tiene algunas ventajas fuertes. Sin embargo, en el juego de diseñar para la mejor experiencia de usuario y proporcionar las mejores soluciones, debemos recordar que debemos tomarnos el tiempo para examinar nuestras opciones y las realidades de nuestros usuarios.
Hay inconvenientes para el diseño adaptativo. En primer lugar, generalmente es mucho más trabajo que crear un diseño sensible. Por esa razón, la mayoría de los diseños adaptativos se utilizan para actualizar los sitios existentes para permitir que se utilicen en varios dispositivos. Parece, entonces, que el primer objetivo del negocio es actualizar los sitios tradicionales permitiéndoles acceder a más dispositivos.
En segundo lugar, los diseños adaptativos pueden dejar a los usuarios “en el medio”. Los usuarios de tabletas o netbooks pueden quedar “colgados” porque los diseñadores solo atienden a usuarios de escritorio y teléfonos inteligentes. Por lo tanto, es importante ofrecer un enlace para permitir que el usuario alterne entre las versiones.
Por último, mientras que los robots de los motores de búsqueda están mejorando la selección y clasificación de los resultados para distinguir entre sus sitios “.com” y “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 múltiples URL por igual. Eso significa tener en cuenta que un diseño adaptable podría mantenerte al tanto de SEO.
Entonces, si bien hay una preferencia definida por el diseño responsivo en este momento, no descarte el diseño adaptable si tiene el presupuesto. A Google le gustan los sitios web que se cargan rápido, al igual que los usuarios.
Conclusión
El diseño web moderno nos da tres opciones de uso: Diseño responsivo, adaptable y autónomo, aunque el modo autónomo ha caído en desuso.
El diseño responsivo permite a los diseñadores mostrar contenido según el espacio disponible en el navegador. Esto permite la coherencia entre lo que muestra un sitio en un escritorio y lo que muestra en un dispositivo portátil. El diseño responsivo es la opción “tradicional” y sigue siendo el enfoque más popular hasta la fecha.

El diseño adaptativo, desarrollado en 2011, está más involucrado en que el diseñador tiene varios tamaños de diseño fijos. Ofrece una alternativa al enfoque de “talla única para todos”.

Elegir entre un diseño adaptable y adaptable requiere una cuidadosa consideración. Si bien podría ser prudente seguir un diseño receptivo por conveniencia (ahorrar costos, mejorar el SEO y mantener a los usuarios contentos con una experiencia perfecta entre dispositivos), es crucial verificar los pros y los contras de ambos diseños en su totalidad. El diseño adaptable puede adaptarse más a las diferentes necesidades de los usuarios en el campo; por lo tanto, es vital mantener un dedo en el pulso del cambio.
Podríamos imaginar mejor estos cambios como evolución. Charles Darwin observó que los individuos de una especie que sobreviven no son los más fuertes o inteligentes, sino los más adaptables al cambio. Solo tenemos que considerar los dinosaurios a la luz de eso.
Piensa en tu producto o servicio. ¿Accede a los usuarios en una configuración específica? ¿De qué se trata su comportamiento que puede usar para mantenerlos informados y comprometidos? Recuerde, no solo los dispositivos móviles son cada vez más inteligentes. En nuestros hogares y oficinas, tenemos más que los escritorios tradicionales. Ahora, una amplia gama de dispositivos inteligentes detectan y reaccionan al medio ambiente, desde relojes y calentadores hasta una gran cantidad de dispositivos que conforman la “Internet de las cosas”. Es una época llena de objetos más inteligentes. Debemos diseñar con esa inteligencia cada vez más en mente.