Responsive design en la web

El responsive design, diseño receptivo y adaptativo, o como quieran traducirlo, es una tendencia relativamente nueva en el diseño web, que consiste en reacomodar desde el diseño los elementos que componen un sitio web según el tamaño de dispositivo que los reproduzca.

¿Por qué debo implementarlo en diseño web?

Porque responsive design tiene que ser pensado desde el origen del diseño de nuestro website, como un concepto de fluido entre los elementos que lo componen, para lograr un flujo perfecto al momento de codificarlo. Sí, si sólo diseñas webs, lo mismo debes implementarlo en tus diseños.

¿Entonces no puedo hacer responsive design a mi website actual?

Depende de las características de tu website que esta experiencia sea más o menos dolorosa. En el peor de los casos estás usando un cms con una plantilla prehecha que con mucha probabilidad tiene el código muy desordenado y lo único que ganarás serán dolores de cabeza al intentar modificar el flujo del mismo.

No obstante te invito a que des el siguiente paso y hagas un diseño a la medida, es decir, que desde ya pienses qué es lo que va a tener tu website y con base en eso planees su implementación, para tener el flujo correcto y así puedas sentirte un héroe por haberlo logrado (yo soy un héroe).

¿Cómo es un diseño responsive?

Entra ahora mismo a tu website favorito y redimensiona el navegador. Si aparece un scroll horizontal que impide que veas parte del contenido de la web, significa que no tiene responsive design.

Ahora entra a mejorando.la y redimensiona el navegador y observa como todo el contenido se reacomoda.



Esto es responsive design y se logra con un conjunto de técnicas de css3 y, en especial, las mediaqueries de las que hablaremos en otros tutoriales. Hacer esto no sólo significa agregarle algo más a tu web para que sea más fancy, sino que es una necesidad hoy en día, ya que la navegación móvil es cada vez más grande y con múltiples resoluciones, por lo que debemos hacer diseños que se adapten a todo.

Si buscas inspiración para tu propio responsive design entonces puedes visitar mediaqueri.es donde encontrarás numerosos responsive designs.

La idea dentro de responsive design es que cuando pienses en tu diseño tengas una idea clara de los bloques que lo conformarán, para  que luego sea súper sencillo trabajar en una maquetación eficaz, que mantenga en flujo correcto de la estructura, así que debes hacerle ajustes ligeros a los bloques del diseño dependiendo del target.

¿Y ahora debo hacer cuatro diseños?

Tener los diseños listos antes de su implementación ayuda mucho a tener la mente clara al momento de codificarlo. Pero míralo bien, no son cuatro diseños, es solo uno (tener cuatro diseños sería una muy mala idea) lo que realmente se hace en los “diseños” adicionales es reacomodar el contenido que ya mostraba el “diseño” principal: esto es un correcto responsive design.

Yo sé que te has dado cuenta...
Para este punto espero ya hayas echado un vistazo a mediaqueri.es

¿Te has fijado que el flujo de los elementos es similar?

Por supuesto, porque llevan la filosofía responsive design: se desplazan los elementos para una mejor visualización. Sin embargo: es muy similar, pero no igual. Yo no sabía cómo categorizar estas diferencias y en realidad era consciente de que se aplicaban diferentes estrategias para acomodar los elementos pero no les daba un nombre.

Desde que digo que las webs que hago están con html5 la gente me mira más bonito.

Entonces cuando digo que mi website tiene responsive design soy una persona más cool, pero yendo un paso más adelante y basándome en este artículo (con el que estoy muy de acuerdo) puedo categorizar los patrones dentro del responsive design:

1. Mostly Fluid (más o menos fluido)

Este quizá es el más popular, se compone de un primer bloque protagonista,  seguido de otros dos con menos relevancia. Cuando se ve desde un dispositivo se adapta siguiendo el flujo que hay en este.

¿Dónde he visto algo parecido? ¡ah! mejorando.la

2. Column Drop (caída de columna)

Quizás tu cms favorito tenga un aspecto de flujo muy similar a este. Bienvenido, este es el responsive design que buscas. Este tipo de diseño se adapta hasta el punto en que no se pueden tener las tres columnas en una sola fila, entonces la columna con el contenido más random pasa a la parte inferior. Luego el flujo se desarrolla hasta llegar a una sola columna.

3. Layout shifter (movimiento de estructura)

Esta probablemente sea la forma de decirle innovación al responsive design, ya que en esta estructura sí cambia ligeramente el diseño. Eso no quiere decir que esté mal, por el contrario, esta estructura está orientada a dar una experiencia diferente en dispositivos de pantallas más reducidas para invitar al usuario a la navegación en el website.

Fíjate en que es muy usada para reacomodar menús y headers.

4. Tyny tweaks (pequeños cambios)

Esto es magia pura para los microsites que sólo brindan información referencial del producto e invitan a una acción rápida, por tanto la navegación es casi nula y el responsive design sólo adapta los contenidos a la pantalla sin casi hacerle cambios.

5. Off canvas (fuera del canvas)

Estoy seguro de que es el más popular en las webapps que no siempre tienen un diseño wow sino más bien guardan mucha información y múltiples opciones, por lo que tienen que recurrir a esta clase de responsive design.

Consiste en tener un solo bloque de información general, que no distraiga mucho (como el timeline de Facebook en su aplicacion móvil) y guardar las demás opciones o menús en botones que suelen tener íconos para distinguirlos. Es indispensable que sean interfaces muy usables.