Responsive Design: Diseño receptivo y adaptivo en la Web

El Responsive design, diseño receptivo y adaptivo o como quieran traducirlo es una tendencia totalmente nueva dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el website según el tamaño de dispositivo que la reproduzca.

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

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

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

Dependiendo de tu website puede que sea más o menos doloroso. En el peor de los casos estás usando un cms con una plantilla pre-hecha que muy probablemente tenga el código muy desordenado y lo único que te ganes sean dolores de cabeza modificando 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 en base a eso planear su implementación para tener el flujo correcto y te sientas un héroe por haberlo logrado (yo soy un héroe).

¿Y 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, esta no cuenta con responsive design..

Ahora entra a mejorando.la y redimensiona el navegador y mira 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 cuales hablaremos en siguientes tutoriales. Esto no sólo es agregarle algo más a tu web para que sea más fancy, es una necesidad hoy en día ya que la navegación movil es cada vez más grande y con múltiples resoluciones, por lo cual debemos tener un diseño que se adapte 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, luego sea super 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 solo 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 desplazando los elementos para una mejor visualización.

Es muy similar, pero no igual

Yo no sabía cómo categorizar estas diferencias y en realidad era consciente que se aplicaban diferentes estrategias para acomodar los elementos pero simplemente 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 basadome es este artículo lukew.com y estando muy de acuerdo con él es que ahora yo puedo categorizar los patrones dentro del responsive desgin:

Mostly Fluid – más o menos fluido

Este quizá es el más popular dentro del responsive design ya que que un muy protagonista primer bloque seguido de otros 2 con menos relevancia y este al momento de tener un dispositivo se adapta siguiendo el flujo que hay en este.

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

Column Drop – caída de columna

Quizá su cms favorito lleve 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 el que no se pueden manejar las tres columnas en una sola fila, entonces la columna (con el contenido más random) pasa a la parte inferior y luego el flujo se sigue desarrollando hasta llegar a una sola columna.

Layout shifter – movimiento de estructura

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

Dénse cuenta que es muy usada para reacomodar menus y header.

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 desgin sólo adapta los contenidos a la pantalla sin casi hacerle cambios.

Off canvas – fuera del canvas

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

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



Quiero terminar el artículo invitándote a que sigas un mini curso de responsive design que estaré impartiendo por medio de tutoriales en cristalab.com y en video por mi canal de youtube así que si estás interesado en conocer cómo enfrentar estas 5 técnicas de responsive design suscríbete a youtube.com/leonidasesteban

te dejo un video por si no quieres leer todo lo que esta arriba...

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.