Desde hace ya algunos años, Google ha dado una mayor importancia a los dispositivos móviles promoviendo técnicas de diseño como Mobile First y nuevas tendencias como el Material Design, sin mencionar las mejoras de su algoritmo de búsqueda en el 2015, también conocido como “Mobilegeddon” por administradores y desarrolladores web.
Este conjunto de técnicas y actualizaciones que desarrolla Google ponen en evidencia la consideración que tiene Google con los dispositivos móviles y la experiencia de usuario en estos entornos. Si se habla de experiencia de usuario en dispositivos móviles, probablemente una de las respuestas que la mayoría de diseñadores puede ofrecer a sus clientes es el diseño responsive. Sin embargo, no es la única solución, también existe el llamado diseño adaptativo. Aunque ambos enfoques tienen el mismo propósito, poseen diferencias cruciales. En este artículo hablaremos sobre ellas para finalmente puedas decidir cuál es el enfoque más apropiado para tu proyecto.
¿Qué significa diseño responsive?
El término responsive hace referencia a un tipo de diseño en donde el layout se va adaptando al tamaño de pantalla del dispositivo desde que se accede a internet. Esto implica que se debe hacer uso de una layout fluida en el que se hacen uso de las consultas de medios CSS3 (media queries) y cuadrículas fluidas que hacen uso de porcentajes, de esta manera se adaptan al tamaño de ventana del navegador desde el cual se accede, se trate de un ordenador o una tableta.
Puedes probar fácilmente cualquier página web y verificar si presenta diseño web responsive al modificar el tamaño de la ventana del navegador. Conforme vayas haciendo más pequeña esta ventana, la disposición de elementos irá variando hasta que solo se utilice una columna en el layout. Este es un recurso que se emplea para dispositivos móviles, debido al reducido espacio en pantalla se suele colocar todo en una sola columna y tanto las imágenes como fuentes y videos se adaptan al nuevo tamaño de pantalla.
El diseño responsive es una de las soluciones más populares cuando se decide crear un sitio que se encuentre optimizado para móviles, muchas plantillas para WordPress emplean este diseño, tal vez se deba al hecho de que se mantiene un mismo código base para móviles y ordenadores lo que da como resultado un código más limpio y ordenado. Asimismo, muchos consideran que el diseño responsive es más desafiante que otras técnicas pues básicamente se está diseñando para un número infinito de pantallas. Sin embargo, puede ser una gran oportunidad para aprender sobre layouts fluidas y su aplicación en un sitio web.
¿Qué significa diseño adaptativo?
Al igual que un sitio web responsive, al aplicar el diseño adaptativo a una página, ésta se adaptará al tamaño de pantalla del dispositivo, pero lo hace de forma distinta. En el diseño adaptativo se trabaja con diferentes versiones del sitio web de acuerdo a un tamaño específico de pantalla en distintos de positivos. De esta forma, el sitio web capta el tipo de dispositivo y el tamaño de la ventana del navegador y selecciona la versión más apta.
Este diseño funciona en base a “puntos fijos”, estos son los que le indican al navegador cuando pasar a la siguiente versión del sitio web. También se puede hacer la prueba en ordenadores en cualquier navegador al cambiar la ventana de tamaño. Verás como cierta layout se mantiene y de un momento a otro cambia a la versión siguiente en base al tamaño de la ventana.
De forma usual, un diseñador selecciona los seis anchos de pantalla más comunes que son 320px, 480px, 760px, 960px, 1200px, and 1600px. En estos tamaños se incluye desde los dispositivos móviles más pequeños hasta los ordenadores con pantallas más amplias. Con esto queda claro que el diseño adaptativo no trabaja en base a porcentajes, como el diseño responsive, sino que utiliza layouts estáticas por cada “punto fijo” que se considere.
Debido a la propia definición de diseño adaptativo, los diseñadores consideran esta también como una técnica compleja porque deben recrear el mismo diseño seis (o más) veces. Si se trata de un sitio web con una gran cantidad de páginas, cada una de ellas debe ser adaptada para las pantallas seleccionadas.
¿Cuál debo elegir?
Aunque hemos explicado cómo luciría un diseño web responsive y uno adaptativo puedes probar y ver la diferencia por ti mismo en Liquidapsive, en donde puedes seleccionar el tipo de diseño y visualizar de forma más gráfica los cambios en el layout.
El diseño web adaptativo puede ser ideal si cuentas con un tiempo bastante limitado y un bajo presupuesto para el proyecto. Con ayuda de datos de Google Analytics puedes verificar cuáles son los dispositivos y sistemas operativos que emplean la mayoría de tus visitantes, de esta manera puedes priorizar el diseño en los dispositivos más populares.
Por otro lado, el diseño responsive puede ser ideal si vas a crear un sitio web desde cero y no sólo se está optimizando o realizando ajustes menores en la versión para ordenadores. Debes tener en cuenta que suele tomar más tiempo que el diseño adaptativo pues el diseñador debe verificar que la layout se adapte adecuadamente a la pantalla. Sin embargo, el diseño responsive ofrece una experiencia más óptima sin importar el tipo de dispositivo que se utilice.
En conclusión…
Tanto el diseño web responsive como el adaptativo se consideran técnicas para optimizar un sitio web para dispositivos móviles y ambas son igual de válidas. Cada una de ellas presenta sus ventajas y desventajas, factores que debes considerar al momento de comenzar a diseñar.
Sería ideal que pudieras utilizar ambos enfoques de diseño en proyectos distintos para que puedas experimentar cuáles son las diferencias en el proceso, así como los beneficios e inconvenientes que se pueden presentar durante el proyecto.
