¿Diseño responsive o diseño adaptativo?

La decimosexta edición de “La sociedad de la información en España”  señalaba que un 88,3% de los usuarios de internet accedía a través de dispositivos móviles. Pues bien, ya es una realidad, vamos dejando ordenadores atrás para dejar paso a móviles y táblets.

RESPONSIVE O ADAPATIVO

Precisamente debido a estas últimas tendencias se ha convertido en un básico en desarrollo web el pensar en hacer sitios web que funcionen de manera óptima para todos los dispositivos posibles. Hacerlo o no marca la diferencia entre una experiencia de usuario y una usabilidad agradable. Tanto es así que surgen tendencias como el Mobile First, que piensa en el diseño antes para móvil que para otro dispositivo; podéis leer más en el blog de Samuel Diosdado.

De toda esta necesidad surgen dos corrientes para web, el diseño responsive y el adaptative. No son lo mismo aunque ambas persiguen el mismo fin, acomodar una página web para que se pueda visualizar de forma correcta desde cualquier aparato, ya sea ordenador, móvil o táblet

DISEÑO RESPONSIVE

Es quizás uno de los términos que más escuchamos cuando hablamos de este tema. Se basa en la reestructuración de los elementos de cada web para que se vayan adecuando a cada pantalla. Funciona a través de columnas flexibles donde los elementos van cambiando de forma proporcional según el tamaño de pantalla. Trabajo con media queries y hojas de estilo.

DISEÑO ADAPTATIVO

Crea una versión “adaptada” de la página web para cada tamaño de pantalla preestablecido, ya sea de 320px o 1600px. Cuando el dispositivo es detectado, se le aplica la versión que mejor le viene a su tamaño de pantalla.

CUALES SON LAS DIFERENCIAS

• El diseño responsive parte entonces de una única plantilla para todo dispositivo que se va reestructurando una vez el dispositivo es detectado, mientra que el adaptativo crea plantillas para cada uno de esos tamaños preestablecidos.

• El adaptativo es más costoso ya que requiere más tiempo al tener que personalizar la web para cada uno de esos tamaños.

• El diseño adaptativo aumenta la velocidad de carga ya que las imágenes se muestran optimizadas para el dispositivo y únicamente se descargan los recursos que éste necesita; en cambio el diseño responsive, descarga toda la información sea o no para su tamaño y elementos como las imágenes son enviadas desde el servidor a tamaño completo, lo que incrementa el tiempo de carga de forma considerable.