Alex Plaza

UX & Front-end Developer

Email Responsivo, es posible!

Imagen email responsivo

Un sitio responsivo o un sitio web que se ve bien en el móvil (cuálquiera sea la técnica de desarrollo) es algo cada vez más común para los usuarios de internet móvil en Chile. Algunos usuarios incluso lo demandan con comportamientos tales como cerrar el sitio que están visitando si no pueden verlo bien en su móvil.

Pero los emails no corren con la misma suerte. No se ha dado un cambio grande en la industria que nos lleve a desarrollar los emails de una mejor forma en beneficio de los usuarios. Y hablo específicamente de Chile porque si estás suscrito a muchos correos de empresas extranjeras (como yo!) probablemente hayas notado que.. espera, probablemente no hayas notado nada! porque se ven bien en todos lados y es cuando te llega un correo que no puedes ver bien en alguno de tus dispositivos cuando lo notas.

Cabe destacar que..

No estoy diciendo que todos los correos que se realizan en Chile estén malos, pero estoy diciendo que podrían ser mejores. También hay empresas que están haciendo un buen trabajo como por ejemplo GetonBoard que se merece una mención honrosa, y también todas las empresas que han decidido seguir el modelo gringo y simplificar sus plantillas en 1 sola columna con una imagen héroe + texto real.

Que es lo bueno y que es lo malo

Nada. Ninguna técnica es realmente mala todo depende de como se mezcle el mensaje con la técnica, con el rubro. Pero veamos algunos ejemplo para que nos quede más claro.

Netflix utilizaba una imagen cliqueable gigante, que contiene texto y un botón adentro, esto es potencialmente malo porque el texto podría no leerse bien al abrirlo en móvil y el hacer zoom para leer un texto en bitmap sobre una pantalla retina(2x o 3x ahora, con el iphone6 plus) podría no ser una muy buena idea. Pero netflix sabe lo que hace, no utiliza texto potencialmente ilegible en móvil, se preocupan de que el texto solo sea un título, no una descripción. Y tampoco saturan el botón con sobre especificaciones super específicas, como: “Haz clic aquí para ver el trailer ahora” sino que solo “Reproducir Avance”. Veamos el correo sin imágenes (como lo ve por primera vez el usuario) y con imágenes. Mailing de netflix

Pero incluso ellos que ya lo estaban haciendo “bien” saltaron, hace unas semanas, a la evolución del email marketing. O quizá ni siquiera la evolución de nada, pero el email marketing como debería ser.

Email Marketing The Right Way Nuevo mailing de netflix

Se dan cuenta de la diferencia? Con un mailing más trabajado podemos darle una mejor “primera impresión” a nuestros usuarios, podemos darle una buena idea de qué va nuestro email y no darle una hoja en blanco. Pero no hay mucho más que comentar aquí(además de que están usando un gif como imagen principal!) es un mail simple de una columna and it doesn’t need any responsiveness, you know?

Note: los gif animados son el nuevo chico cool del barrio. Del barrio de los mailings

Una mala mezcla

Dentro del surtido de rubros de empresas que puedan querer informar o fidelizar a sus clientes a través de emails y los remix de herramientas que tenemos a mano los desarrolladores para crear esos emails, la peor de las combinaciones es el retail + email de imagen. Por lo general el retail trata de entregar información de ofertas o promociones de diversos productos a la vez, cada cuál con su detalle específico y encerrar todo eso en una sola imagen es pésimo, ni siquiera el alt="Texto Alternativo" nos puede salvar de email de imagen. Hay algunos que vienen fragmentados en varias imágenes pero estas vienen con cortes randómicos que tampoco te permitirían hacer uso de alt. Por ejemplo un foto que tienen un pedazo del título y un producto, como le llamas a eso? Feeling lucky?

El Desafío

Dentro de mis marcas favoritas a las que dejo que me envíen correos de vez en cuando, hay un par que me llamó la atención. No solo porque podrían hacer un buen uso de un desarrollo responsivo, pero porque son competencia.

Entonces me propuse mejorar al mailing peor logrado de ambos para poner a prueba mis habilidades y herramientas, y porqué no para dar una crítica constructiva a la empresa que podría terminar por mejorar la comunicación con sus clientes a través de un mejor mailing.

CineHoyts y Cineplanet, Fight! No.. nada de pelear, analicemos el estado actual de los mailings de estas marcas y veamos como podemos mejorarlos.

Cines escritorio sin imagenes Buen trabajo equipo de desarrollo de Cine Hoyts!(a la izquierda). Eso es un excelente mailing y sin cargar las imágenes siquiera.

Y ahora con imágenes Cines escritorio con imagenes Acá vemos como Cineplanet se impone visualmente ante Cine Hoyts apostando por un ancho de mailing mucho mayor al de su competidor.

Y bueno, en esta ocasión en que no se trata de un email simple de una columna, que se verá igual en todos lados, haremos el ejemplo móvil. Para eso utilizaré un cliente de email que soporte media queries, así que lo veremos desde (Mailbox). Cines en móvil Acá podemos ver que Hoyts se cae en lo responsivo y en usar background-image para poner su marca tanto en el header como en el footer del mailing.(Algunos clientes simplemente no reconocen las background-image). Pero se cae aún más feo Cineplanet, ya que al usar solo imagen para componer su email, no tienen control sobre como se verá su contenido en móvil, y toda lo que logró destacar con su ancho en escritorio, le juega en contra en móvil. Y los afiches de sus películas sin títulos en texto real apenas se pueden ver, ni pensar en leerlos.

Note: Sí, es cierto, si el cliente de email no soporta media queries no hay nada que podamos hacer, nuestro email no será responsivo. Pero los clientes móviles más utilizados si lo hacen y es ahí donde interesan las media queries de todas formas.

Acá una lista del soporte de media queries en móvil, por Campaign Monitor.

PROTIP: la app de gmail para iOS soporta media queries, la app de gmail para android no lo hace.

Las Media Queries son !important(es)

Para hacer un mailing responsivo… no no no no no! primero que todo, para hacer un mailing cualquiera necesitamos tener los estilos dentro del html, no podemos llamarlos a un archivo externo como lo hacemos en la web, pero específicamente necesitamos tener los estilos en línea. Y cuando digo en línea me refiero a los estilos en la misma línea en la que escribimos el HTML. Algo así:

<table class="body" style="background: #1272B1; border-collapse: collapse; border-spacing: 0; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 14px; font-weight: normal; height: 100%; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; width: 100%" bgcolor="#1272B1"></table>

Asqueroso no? Asqueroso y algo muy difícil de mantener a la hora de trabajar con cambios y mejoras. Pero es así como necesitamos tener los estilos, ya que clientes tan importantes como Gmail destripan el CSS de bloque dentro del tag <style> en nuestro HTML por lo que perderíamos todo el estilo de nuestro diseño si no los pusieramos en linea. Por qué razón hace esto Gmail en webmail y no es su app de iOS? no tengo idea. Pero existen herramientas que veremos en el próximo post que nos ayudan con la ardua tarea de “inlinear” nuestros estilos, como lo es Inliner de Ink.

Entonces ahora sí estamos listos.. Para hacer un mailing responsivo necesitamos de Media Queries pero tienen que ser media queries poderosas, capaces de sobre escribir la espicificidad que tienen los estilos en línea. Y esto lo logramos 1) Olvidando las recomendaciones que hemos aplicado siempre en el desarrollo web como no usar !important en nuestros estilos y 2) aplicando !important a cada una de las media queries que vayamos a crear.

Entonces usando el framework para mailings responsivos de Zurb, Ink, Sass, Grunt y todas mis herramientas front favoritas he logrado crear una grilla responsiva para Cineplanet que muestra 4 películas en una fila en escritorio y 2 en móvil.

Veamos como mejora este correo al lado del anterior. Comparativa Cineplanet responsivo

Yo ya veo una mejora, ustedes?

Comparativa Cineplanet responsivo con imagenes Traté de utilizar un ancho de email más grande que el recomendado para seguir el estilo original de Cineplanet, lo mismo con el diseño y los colores. Nada creativo solo tratando de mejorar lo que ya existía. Pero veamos la prueba final.

Comparativa Cineplanet responsivo móvil Ta-Dah! aquí es donde se convierte en 2 la fila de 4 columnas, para darle al usuario móvil una mejor experiencia, rica en imágenes y en zonas “cliqueables” mejor adaptadas al tamaño de los dedos.

Y acá la imagen verificadora que usé al principio. El correo abierto en Mail app nativa de iOS y en Mailbox para android. Comparativa Cineplanet responsivo móvil dispositivos

Bueno, eso es todo por ahora, en el próximo post contaré en detalle como crear un email responsive, tables y stuff. Pero por ahora a tener más en cuenta a los usuarios móviles de nuestros correos que según Datos de Litmus 53% de los correos son abiertos a través de dispositivos móviles.

Saludos y cuéntenme.. ¿Qué correo han recibido que les gustaría ver en versión responsive?

comments powered by Disqus