Desarrollo WebDiseño Web

Diseño Responsive Vs. Diseño Adaptivo: ¿Cuál escoger?

Por 12 noviembre, 2014 One Comment

El diseño responsive es cada vez más promovido como el estándar de oro para crear un nuevo rango de páginas Web. Sin embargo, debido a complicaciones que nacen al usar el mismo código en cada versión de una página Web, las marcas están optando por una alternativa a la tecnología RWD conocida como presentación adaptiva o diseño adaptivo. Este artículo aborda el tema.

01_diseño_responsivo_vs_adptivo

El diseño Web Responsive ya no es nuevo. La fraternidad de los diseñadores Web, la comunidad técnica e incluso los autoproclamados aficionados a la Web ahora saben que el diseño responsive es el siguiente paso. El Smartphone, el dispositivo muy versátil indujo a que los diseñadores creen páginas Web que automáticamente respondan y se adapten a cualquier dispositivo con cualquier tamaño de pantalla y, por ello, el diseño Web responsive nació. Con las técnicas RWD, el formato del sitio Web puede ser optimizado para que encaje el tamaño de pantalla y la forma en que se ve. Entonces, ¿de dónde viene el tema del diseño adaptivo?

Para los que aún no se inician, estas palabras pueden ser términos intercambiables para la misma técnica. No obstante, mientras llega más y más tráfico desde dispositivos móviles, cada vez se vuelve más importante que los editores sepan las diferencias entre ambos y escojan el mejor para su sitio Web. Además, una encuesta de Millenial Media y comScore realizada en los Estados Unidos revela que el 56% del contenido en línea es ahora consumido a través de smartphones y tablets mientras el que 44% restante es consumido en computadoras de escritorio. Y este cambio sigue acelerando. Esto establece de una vez por todas la importancia de tener un buen sitio Web que capte audiencias móviles. Volviendo a la pregunta: ¿Cómo escoger entre los dos?

¿Cuál es la diferencia?


La manera más fácil de escoger una opción entre ambas es entender las diferencias y ventajas que cada una ofrece.

Mientras que diseño responsive tiene una orientación al cliente donde la página entera es presentada al mismo (navegador de dispositivo), el diseño adaptivo generalmente está al lado del servidor., donde el servidor primero detecta los atributos del dispositivo, usualmente, a través de plugins o detección de usuario, y luego carga la versión optimizada para su dimensión y características. Por consiguiente, la presentación adaptiva usa diseños predefinidos que han sido creados en una variedad de tamaños. Cuando un tamaño de pantalla particular es detectado, el diseño correspondiente es activado y se encaja el estilo. En el diseño adaptivo los diseños cambian con base a los breakpoints.

Existe también otra alternativa, una orientación que se adapta al cliente donde se usa extensive JavaScript para equipar las páginas Web con funciones y personalización. Un poco parecido al diseño responsive, este tipo de presentación funciona al lado del cliente o en navegador del usuario, lo 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 todos los dispositivos, lo que implementa el cambio más rápido.

Responsive Vs. Adaptivo:
¿Por cuál optar?


Una de las mayores ventajas del diseño responsive que lo ha lanzado al inmediato estrellado es que una sola base de código sirve tanto para los usuarios de dispositivos de escritorio como los de móviles. Esto ha hecho la vida del desarrollador más fácil al casi eliminar la horripilante pesadilla de tener que tener varias versiones de código para cada tipo de dispositivo. Sin embargo, el mismo código para ambos dispositivos significa que la página Web que se lanza en un smartphone tenga el mismo tamaño y complejidad que la versión de escritorio, lo que es el mayor culpable de que las páginas Web responsive se comporten de manera rara y se inflen en dispositivos móviles.

Por otro lado, al usar un enfoque adaptivo, un servidor tiene la libertad de escoger cómo renderizar páginas, remover o añadir funciones sobre la marcha al haber detectado el dispositivo y la información del usuario.

Los beneficios se pueden resumir en los siguientes:

  • Los desarrolladores no tendrían que recrear una página Web desde cero mientras uno tenga un sitio Web responsive. La mayoría de las páginas Web se vuelven muy complejas a lo largo del tiempo con una función añadida sobre otra, esforzarse mucho ya no es una opción. El diseño y la fase de prueba es particularmente quisquillosa ya que es difícil personalizar la experiencia de usuario para para dispositivo o contexto.
  • Las páginas Web adaptivas son más rápidas y, a veces, más amigables para el usuario. La razón es simple. Una presentación adaptiva funciona al transferir solo los recursos específicos del dispositivo, las imágenes y el contenido multimedia pueden ser optimizados en marcha para encajar la resolución de exposición y tamaño.

El diseño adaptivo al lado del servidor ofrece diferentes plantillas para cada dispositivo, habilitando un mejor nivel de personalización y carga más rápida de páginas Web. Además de ello, es compatible con diferentes plugins al lado del servidor que son disponibles para sistemas de gestión de contenido popular como Magneto. Sin embargo, este enfoque requiere cambios considerables para los sistemas back-end. Si tienes un presupuesto limitado, podría ser un poco penoso. Tendrías que manejar múltiples plantillas, lo que se reflejaría en tu costo de mantenimiento. También podrían surgir problemas de desempeño cuando los servidores estén siendo muy cargados.

Líneas Finales


Las páginas Web de contenido pesado donde no hay mucha diferencia de usuario metra entre aquellos que usan dispositivos de escritorio o móviles generalmente usar el diseño responsive. Pero si estás diseñando un sitio Web donde la meta de usuario móvil difiere de tu audiencia de escritorio meta, el diseño adaptivo será una mejor apuesta. Como ejemplo tenemos las páginas Web de comercio electrónico.

Asimismo, si un Web máster elije un diseño adaptivo, el mismo puede optimizar la experiencia de usuario al tomar ventaja de las características extras que estos dispositivos ofrecen, por ejemplo, locación. Esto es exactamente por qué 82 por ciento de las mejores 100 páginas Web de Alexa usa algún tipo de detención al lado del servidor para contenido del mismo.

Para la mayoría de las organizaciones que usan el diseño responsive con una presentación adaptiva les va bien. Las porciones de contenido pesado del sitio Web usa un enfoque responsive, permitiendo que los lectores consuman el contenido satisfactoriamente, no importa el dispositivo que usen. Por otro lado, porciones de alta meta de la página Web funcionan muy bien a través de la presentación adaptiva. La clave es encontrar un balance entre servir a tus usuarios y lograr tus objetivos empresariales.

El diseño Web es una de las habilidades más atractivas que hay que tener en el mercado. De acuerdo con los datos de empleo ofrecidos por Bureau of Labor Statistics, la perspectiva de trabajo para desarrolladores Web está al 20%, lo que más rápido del promedio. El reporte de los mejores trabajos en el año 2014 de USNews coloca los trabajos de diseño Web en el top tres de las carreras relacionadas a la tecnología. Por consiguiente, un aspirante a diseñador Web que conoce los matices del diseño como el explicado líneas arriba puede llegar a ser muy fructífero.

 

Fuente: instantShift, traducido por: Staff Digital.

Luiggi Santa María

Luiggi Santa María

CEO de Staff Digital. Experto en Diseño Web Gráfico y Publicitario.

Un comentario

Deja una respuesta