Diseño receptivo versus diseño adaptativo: ¿cómo elegir entre los dos?
El diseño receptivo se promueve cada vez más como el estándar de oro para crear la nueva gama de aplicaciones web. Sin embargo, debido a las complicaciones derivadas del uso del mismo código en todas las versiones del sitio web, las marcas están recurriendo a una alternativa a la tecnología RWD conocida como entrega o diseño adaptativo. ¿Cómo elegirías entre los dos? Este artículo es sobre lo mismo.
El diseño web responsive ya no es noticia. La fraternidad de diseñadores web, la comunidad tecnológica e incluso el fanático de la web confeso promedio ahora saben que el diseño receptivo es el camino a seguir. El teléfono inteligente, el dispositivo que cambió el juego, realmente obligó a los diseñadores web a crear sitios web que pudieran responder automáticamente y adaptarse a cualquier dispositivo con cualquier tamaño de pantalla y, por lo tanto, nació el diseño web receptivo. Con las técnicas de RWD, el diseño del sitio se puede optimizar para adaptarse al tamaño de la pantalla del dispositivo en el que se está viendo. Entonces, ¿de dónde viene la charla sobre el diseño adaptativo?
Para los no iniciados, ambas palabras de moda pueden parecer términos intercambiables para la misma técnica. Sin embargo, a medida que más y más tráfico proviene de dispositivos móviles, se ha vuelto cada vez más importante para los editores conocer las diferencias entre los dos y elegir el mejor para su sitio. Además, una encuesta de Millenial Media y comScore realizada en Estados Unidos revela que el 56% del contenido en línea ahora se consume a través de teléfonos inteligentes y tabletas, mientras que el 44% restante se consume a través de computadoras de escritorio. Y el cambio sigue acelerándose. Eso resuelve de una vez por todas la importancia de tener un sitio adecuado para audiencias móviles. Ahora volviendo a la pregunta: ¿Cómo elegir entre los dos?
¿Cual es la diferencia?
La forma más fácil de elegir una opción entre las dos es comprender las diferencias y ventajas que ofrece una sobre la otra.
Si bien el diseño receptivo es un enfoque del lado del cliente donde la página completa se entrega al cliente (navegador del dispositivo), el diseño adaptativo generalmente es del lado del servidor, donde el servidor detecta primero los atributos del dispositivo generalmente a través de complementos del lado del servidor o usuario personalizado. detección de agentes y luego carga una versión del sitio optimizada para sus dimensiones y características nativas. Por lo tanto, la entrega adaptable utiliza diseños predefinidos que se han creado para una variedad de tamaños de pantalla. Cuando se detecta un tamaño de pantalla en particular, se activa el diseño correspondiente y se hace coincidir con la hoja de estilo. En el diseño adaptativo, los diseños cambian en función de los puntos de interrupción.
También existe otra alternativa, un enfoque adaptativo del lado del cliente en el que se utiliza JavaScript extenso para equipar los sitios web con funcionalidades avanzadas y personalización. Un poco similar al diseño web receptivo, este tipo de entrega funciona en el lado del cliente o en el navegador del usuario, que detecta diferentes dispositivos y carga la plantilla correspondiente para el usuario. La ventaja aquí es que solo requiere un conjunto de HTML y JavaScript para usarse en todos los dispositivos, por lo que la implementación de cambios es mucho más fácil.
Responsive versus Adaptive: ¿Cuál elegir?
Una de las grandes ventajas del diseño receptivo que lo impulsó al estrellato instantáneo fue que una base de código única funcionó bien tanto para el usuario de escritorio como para el móvil. Esto facilitó la vida de un desarrollador, ya que casi eliminó la experiencia de pesadilla de tener que cuidar varias versiones de código para diferentes tipos de dispositivos. Sin embargo, el mismo código para ambos dispositivos significa que el sitio web que se inicia en el teléfono inteligente tendrá el mismo tamaño y complejidad que la versión de escritorio, que es el principal culpable de que los sitios web receptivos se comporten de manera extraña e inflada en los dispositivos móviles.
Por otro lado, utilizando un enfoque adaptativo, un servidor tiene la libertad de elegir cómo renderizar de manera óptima las páginas, eliminando o agregando funcionalidades sobre la marcha, en función del dispositivo detectado y la información del usuario.
Los beneficios se pueden resumir de la siguiente manera:
- Los desarrolladores no tendrían que volver a crear el sitio web desde cero como tendrían que hacerlo al buscar un sitio receptivo. La mayoría de los sitios web se vuelven demasiado complejos con el tiempo, con una funcionalidad que se agrega encima de la otra y rascar todo el esfuerzo no es una opción viable. La fase de diseño y prueba es particularmente complicada, ya que es difícil personalizar la experiencia del usuario para cada dispositivo o contexto.
- Los sitios web adaptativos son más rápidos y, a veces, más fáciles de usar. La razón es bastante simple. Dado que la entrega adaptativa funciona transfiriendo solo los activos específicos del dispositivo, las imágenes y el contenido multimedia se pueden optimizar sobre la marcha para adaptarse a la resolución y el tamaño de la pantalla.
La adaptación del lado del servidor ofrece plantillas distintas para cada dispositivo, lo que permite un mayor nivel de personalización junto con una carga más rápida de páginas web. Además, es compatible con diferentes complementos del lado del servidor que están disponibles para los sistemas de administración de contenido y sistemas de comercio electrónico más populares, como Magento. Sin embargo, este enfoque requiere cambios considerables en los sistemas de back-end, y si tiene un presupuesto limitado, podría resultar un poco doloroso. Se le pedirá que administre varias plantillas, lo que se reflejará como un aumento en el costo de mantenimiento. También pueden surgir problemas de rendimiento cuando los servidores están bajo una gran carga.
Línea de fondo
Los sitios web con mucho contenido donde no hay mucha diferencia en la intención del usuario entre los usuarios de escritorio y móviles generalmente optan por un diseño receptivo. Sin embargo, si está diseñando un sitio web donde la intención del usuario móvil es significativamente diferente a la de su público objetivo de escritorio, el diseño adaptable será una mejor opción. El ejemplo son los sitios web de comercio electrónico.
Además, si un webmaster elige el diseño adaptativo, puede optimizar aún más la experiencia del usuario aprovechando las funciones adicionales que ofrecen estos dispositivos, por ejemplo, la ubicación. Es exactamente por eso que el 82 por ciento de los 100 principales sitios globales de Alexa utilizan algún tipo de detección del lado del servidor para servir contenido.
Para la mayoría de las organizaciones, el uso del diseño receptivo junto con la entrega adaptativa funciona bien. La porción de contenido pesado del sitio utiliza un enfoque receptivo que permite a los lectores consumir el contenido de una manera satisfactoria sin importar en qué dispositivo se encuentren. Por otro lado, las partes del sitio de alta intención funcionan bien a través de la entrega adaptativa. La clave es encontrar un equilibrio entre servir a sus usuarios y cumplir con el objetivo comercial.
El diseño web es una de las mejores habilidades en el mercado para tener en este momento. Según los datos de empleo ofrecidos por la Oficina de Estadísticas Laborales, la perspectiva laboral para los desarrolladores web es del 20%, que es más rápida que el promedio. El informe Best Jobs 2014 de USNews ubica los trabajos de diseño web dentro de las tres principales carreras tecnológicas. Por lo tanto, para un aspirante a diseñador web, conocer los matices del diseño como el explicado anteriormente puede ser muy fructífero.