En el año 2007, Apple lanza su primer iPhone y Google presenta el sistema operativo Android. Ese año nos cambió la vida. Hoy, poder navegar por la red tanto en el ordenador de casa como desde nuestro Smartphone en cualquier lugar nos parece lo más normal del mundo. Y además, cuando lo hacemos desde el teléfono, esperamos tener una experiencia óptima, con la navegación adaptada al tamaño de nuestra pantalla.

Esto que hoy tenemos tan interiorizado, a los diseñadores nos ha traído más de un quebradero de cabeza: se acabó el diseñar una web a partir de un layout estático. Ahora, nuestros clientes añaden siempre eso de “y que sea responsive” sin tener siempre muy claro qué significa.

DISEÑO RESPONSIVE O DISEÑO ADAPTATIVO: DOS FORMAS DE ADAPTAR LAS WEBSITES

Responsive web design (en español “diseño web de respuesta”) es el término utilizado para definir, de manera general, el desarrollo de un sitio web de forma que su estructura cambie según la resolución de la pantalla desde la que se está visualizando.

Pero, aunque llamemos responsive a todo lo que sea adaptar una web a formato móvil, en realidad existen dos formas diferentes de hacerlo: el diseño responsive y el diseño adaptativo.

DISEÑO RESPONSIVE

El diseño responsive se basa en reestructurar los elementos para optimizar el espacio. Se utilizan medidas proporcionales. Es decir, si antes diseñábamos con un ancho fijo (dado en píxeles), ahora lo hacemos con un ancho variable (porcentaje). Esto significa que haremos un único diseño que se irá adaptando sólo según la pantalla en la que se muestre.

medidas

Por ejemplo, un texto de tres líneas en el ordenador ocupará más líneas según la pantalla se vaya haciendo más estrecha.

Algunos buenos ejemplos de diseño responsive los encontramos en webs como el periódico The Boston Globe, la revista Smashing Magazine o la propia website de Windows.

The Boston Globe:
post-bostonglobe

Smashing Magazine:
post-smashing
Microsoft Windows:
post-windows
Si quieres comprobar cómo se adaptan estas páginas, no tienes más que abrirlas e ir variando el tamaño del navegador.

DISEÑO ADAPTATIVO

Al contrario que el responsive, el diseño adaptativo no utiliza porcentajes sino tamaños preestablecidos. Haremos tantos diseños como creamos necesarios. Por ejemplo: un diseño para smartphone, otro para tablet y otro para pantalla de ordenador.

medidas-ADAPTATIVO

En este caso, al tener 3 layouts estáticos, el diseñador tiene que optimizar los recursos para cada resolución. A su vez, el desarrollador utiliza las llamadas media queries para que el dispositivo que estamos utilizando sepa qué recursos mostrar y cómo. Este modelo de diseño implica un aumento en el tiempo de trabajo, ya que se multiplicaría por tres comparado con el diseño web responsive. Por lo tanto, el coste de este servicio así como el tiempo necesario para realizar cambios aumentarían. Sin embargo, a la hora de navegar, la experiencia de usuario es mejor ya que el diseño estará pensado específicamente para nuestro dispositivo. Además, cuando abramos la web, por ejemplo, desde un smartphone, éste cargará las imágenes optimizadas para él y ganaremos tiempo de carga a la vez que consumiremos menos datos.

Entre este tipo de diseño encontramos la web de Agencia B12 o de Fusión a lo Yoigo.

Fusión a lo Yoigo:
post-yoigo

Agencia B12:
post-b12

¿CÓMO DECIDIR ENTRE RESPONSIVE Y ADAPTATIVO?

A la hora de crear un sitio web, los diseñadores tenemos que pensar cuál de estas dos formas es la mejor para nuestro proyecto.

Normalmente, si se trata de una página dinámica como puede ser un blog, elegiremos el diseño responsive ya que el contenido se va actualizando a menudo y los diseñadores perdemos el control sobre él.

En cambio, si vamos a desarrollar una página cuyo contenido no va a variar constantemente, escogeremos el diseño adaptativo porque, aunque nos lleve más tiempo, podremos decidir cómo se verá el contenido en cada pantalla consiguiendo así un rendimiento óptimo.

Elijamos el modelo que elijamos, lo que está claro es que no podemos eludir este tipo de desarrollo. Distintos estudios apuntan a que el próximo año 2015, en España el acceso a Internet desde dispositivos móviles habrá superado al acceso vía ordenador. Por lo tanto, si tu página web no está adaptada, la experiencia de usuario no será buena y las probabilidades de que la abandonen serán enormes.

Nota: mientras escribía este post, miré por curiosidad cómo está adaptada la web de Apple -todo lo que haga Apple es un referente-. Para mi sorpresa, resulta que no lo está. Igual no han pensado que los 40 millones de usuarios de iPhone quizás algún día visiten la web de Apple desde su iPhone.