Mobile-first, Fluid o Responsive Design?

No hace mucho alguien me dijo "Yo creia que eso del Responsive para emails era un mito". No solo NO es un mito, si no que un Email Mobile tiene más de una forma de ser. Desde Mobile-first, pasando por Fluid y finalmente Responsive Design, en esta nota te cuento las diferencias, ventajas y desventajas de cada uno.

Mobile-first Design (también conocido como Scalable Design o Mobile-friendly)

Este tipo de diseño es aquel que funciona bien en cualquier dispositivo donde lo veamos sin necesidad de utilizar código o estilos que lo definan.

Básicamente se diseña para que la pieza se vea bien en dispositivos móviles, asumiendo que este diseño se va a ver bien en escritorio, pero no! Tenemos que tener en cuenta algunos tips que te van a servir a la hora de hacer este tipo de diseño:

- No te compliques: mantené el diseño lo más simple posible, una sola columna que scrollee verticalmente es una excelente opción.

- ¡Que tu diseño no este basado en una gran imagen! Utilizá texto. El texto se adapta al ancho de la pantalla.

- Que tus call-to-action sean grandes y visibles. Fáciles de clickear en una pantalla tactil.

- Que tu información más relevante (logo de la marca, info de contacto, etc.) este sobre el margen izquierdo, por las dudas, ya que si bien la tecnología avanza y casi todos vamos actualizando nuestros dispositivos, puede pasarte que alguien tenga un blackberry viejo. 

Este tipo de emails son perfectos para empezar a adaptar tus piezas a mobile. Son fáciles de hacer y no requieren ningún conocimiento extra de HTML más que lo básico (que lo podes ver acá).

Fluid Design (también conocido como Liquid)

Este tipo de diseño es el intermedio entre un Mobile-first y un Responsive Design.
Lo que hacemos en este caso es usar porcentajes para definir anchos, entonces el diseño fluye de acuerdo al ancho de nuestra pantalla. Este tipo de diseño funciona bien cuando tenemos comunicaciones con mucho texto. Un ejemplo de como se vería el código de una tabla al 100%:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Hola!!</td>
  </tr>
  <tr>
    <td>Esto es un ejemplo de codigo</td>
  </tr>
  <tr>
    <td>de una tabla al 100%</td>
  </tr>
</table>

El problema que nos encontramos con este tipo de diseño es que no tiene un limite de ancho, entonces cuando lo vemos en pantallas muy anchas se torna difícil de leer, pero una posible solucion es agregar max-width, así:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width:600px;">
  <tr>
    <td>Hola!!</td>
  </tr>
  <tr>
    <td>Esto es un ejemplo de codigo</td>
  </tr>
  <tr>
    <td>de una tabla al 100%</td>
  </tr>
</table>

Cuidado! porque este estilo no funciona en Microsoft Outlook.
Otra opción es tener una tabla contenedora con un ancho fijo la cual adaptaremos al 100% con un media-query, y luego tablas con porcentajes que se adapten a esa tabla contenedora.

Los media-queries son líneas de código que definen el comportamiento de, en este caso, nuestro email dependiendo la resolución de la pantalla. Esto nos lleva directo a nuestro tercer tipo de Email Mobile, entonces...

Responsive Email Design (mi favorito)

Este tipo de Email Mobile se adapta a la pantalla y su contenido se acomoda, aparece o desaparece dependiendo la resolución de la pantalla. Esto se logra con los mencionados media-queries.
Un media-query se ve de esta forma en el código:

<style type="text/css">
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
</style>

En este caso de ejemplo, estamos especificando que en todo el rango entre 320px y 480px de ancho se aplican los estilos especificados entre {}. Podés agregar la cantidad de media-queries que consideres necesaria, indicando diferentes estilos para distintos rangos de resoluciones.
Con Responsive Design se nos abre un abanico de posibilidades como transformar un diseño de varias columnas en uno de una sola, facilitando el scroll vertical y la lectura en dispositivos móviles. La posibilidad de cambiar colores, tamaño de los textos, incluso agrandar los botones.
Peeeeero, como todo, tiene sus desventajas. Cómo ya mencioné en otras oportunidades, la falta de estándares para email marketing hace la tarea de maquetar un desafío, y la aplicación de Responsive Design al email es un segundo desafío a enfrentar. No todas las aplicaciones móviles interpretan el Responsive de la misma forma, incluso no todas las aplicaciones interpretan todos los estilos, por lo que la instancia de test es muy importante y también el conocimiento de nuestra audiencia.
En este link, los amigos de CampaignMonitor nos muestran un cuadrito de compatibilidad de estilos y plataformas.

Marie, vos cuál me recomendás?
La verdad es que te recomiendo que arranques de una con Responsive Design, pero gradualmente. Empezá por adaptar un email simple (una sola columna) al 100% de la pantalla, agrandando las tipografías. Fijate cómo responde tu audiencia a dichos cambios, y poco a poco agregá nuevos estilos.


¿Estas usando alguno de estos tipos de email? Contame en los comentarios.


¡No te olvides de seguir el blog en las redes sociales!
Twitter: @haceloresponsiv
Facebook: Hacelo Responsive Che
Y todo se repostea en Medium.

También pueden seguirme a mi!
Twitter: @marieseen
Linkedin: Marie Seen

*Imágenes: Litmus