Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

Análisis de newsletter Cuponation +LEARN RESPONSIVE

Publicado por Mailrelay en abril 2, 2014

Hoy te he preparado un análisis de newsletter más didáctico de lo habitual, no te lo puedes perder.

En esta ocasión no solo vamos a analizar una newsletter, sino que además vamos a ver detalles de como se ha hecho, conceptos básicos para crear plantillas de mailing responsive.

Así podrás aprender a incorporar ciertas técnicas en tus propias plantillas de mailing y mejorar tus campañas.

Recuerda que el uso de dispositivos móviles va en aumento, es indispensable que los emails se visualicen de forma correcta en ellos, o perderemos el engagement con nuestros suscriptores.

¿Qué newsletter vamos a utilizar para el ejemplo?

En esta ocasión vamos a utilizar una newsletter de Cuponation.

Cuponation es una web que ofrece cupones de descuento, queda claro que para este tipo de negocio es necesario enviar emails varias veces por semana, y por supuesto que se visualicen de forma correcta.

La newsletter en cuestión es esta:

cuponation-1

Similar a otras que hemos analizado previamente, imagen grande con oferta destacada, incluyendo llamada a la acción, de forma correcta.

Incluye una serie de descuentos con sus correspondientes marcas y enlaces.

He seleccionado esta newsletter porque muestra varios elementos de interés para el tema a tratar:

– Menú superior
– Imagen promocional o banner
– Varias imágenes
– Listado de enlaces

En una versión de escritorio es fácil hacer encajar todos estos elementos, pues disponemos de más espacio. Pero ¿Cómo se ve este email en versión móvil?

Tengo dos imágenes para que lo veas:

cuponation-2

y

cuponation-3

Como puedes ver la nesletter de Cuponation  se adapta de forma adecuada tanto a escritorio como dispositivos móviles.

¿Cómo podemos hacer esto en nuestras plantillas de mailing?

Vamos a verlo centrándonos en los aspectos más importantes y básicos.

Por ejemplo, algo indispensable es seleccionar unos CSS u otros dependiendo del ancho disponible en el dispositivo. Lo haremos usando el siguiente código:

cuponation-4

Este código lo que indica es que si la pantalla del dispositivo es de un tamaño 640px o «menos» se utilicen los estilos incluidos dentro de las llaves.

Si no es así, se utilizaran los estilos presentes en el documento.

Como te he comentado, esta es la pieza clave, indispensable.

A partir de aquí podemos dar nuevos tamaños a los elementos. Por ejemplo la tabla que actúa de contenedor vemos que tiene estas características:

cuponation-5

Esta tabla tiene una clase CSS asociada «resize» y un tamaño establecido en 622px de ancho.

Al tener esta tabla un ancho de 622px, los elementos incluidos dentro de la misma, tendrán ese ancho como máximo.

Es una tabla contenedor, por lo que todos los elementos están situados dentro de la misma.

¿Cómo la redimensionamos entonces?

Muy fácil, dentro de la sección que hemos establecido antes, incluiríamos el siguiente selector:

cuponation-6

De este modo, si la pantalla tiene menos de 640px de ancho reduciremos la tabla contenedora a 305px de ancho.

Una medida apta para dispositivos móviles.

¿Cómo reducimos las imágenes?

Habrás notado que la imagen de oferta reduce su tamaño de forma adecuada dependiendo también del ancho.

Esto es si cabe más fácil de conseguir, fíjate:

cuponation-7

Al tener la imagen un ancho de 100% se adapta al ancho disponible, de este modo, cuando en el apartado anterior reducimos el ancho de la tabla contenedor, también afectaremos al ancho de la imagen.

¿Y otras secciones?

Por ejemplo la sección de «Los 4 más recomendados«:

cuponation-8

En la parte superior puedes ver como se ve en una pantalla grande:

– Título ocupando todo el ancho
– Elementos en una fila única

Y en la parte inferior como se ve en un dispositivo móvil:

– Título más pequeño
– Elementos en dos filas

El título por ejemplo está dentro de una tabla de las siguientes características:

cuponation-9

Una clase «hli» y un ancho de 592px, que se adaptan a dispositivos móviles de esta forma:

cuponation-10

La clase «hli«, incluida en los estilos a utilizar en pantallas menores de 640px, establece un ancho de 280px.

Debido a esto en el dispositivo móvil vemos estos títulos más pequeños.

Por otro lado, aunque no se aprecia bien en la imagen, los logotipos son más grandes en dispositivos de menor ancho de pantalla, para ocupar más tamaño en una columna única o doble. En algunos dispositivos se ve de este modo:

cuponation-11

Con un logotipo por línea, y un poco más grandes. Veamos la estructura original:

cuponation-12

Tenemos una tabla de ancho 145px, que en dispositivos más pequeños toma los siguientes estilos:

cuponation-13

Para mostrar las imágenes más grandes y que aparezcan menos por línea.

En resumen el proceso de crear una plantilla de mailing responsive

Pasa por crear unos estilos CSS alternativos que se apliquen en la circunstancia de un dispositivo con un tamaño de pantalla menor.

Como siempre es muy importante probar este tipo de newsletters para asegurarnos que todo funciona bien.

Gracias a adaptar tus plantillas de mailing…

Podrán ser vistas de forma adecuada entre una variedad de dispositivos y tamaños de pantalla diferentes, como es el caso de Cuponation.

No es algo trivial, pues requiere de conocimientos técnicos, pero compensa.

Imagina que caso contrario, por ejemplo con la newsletter de Cuponation, la imagen promocional no se redujese en proporción al ancho disponible, en ese caso necesitaríamos hacer scroll horizontal para ver de forma correcta la newsletter. Mucho más incomodo, reduce las posibilidades de que los suscriptores actuen como esperamos de ellos.

En este caso un acierto por parte de Cuponation, al menos en mi opinión.

¿Qué te parece?


Suscríbete y accede al ebook privado:
Cómo enviar correos masivos sin ser SPAM







Acepto la política de privacidad.



Comentarios

  1. Angel

    Excelente aporte, como siempre. Imprescindible hoy día que todas nuestras acciones comerciales estén adaptadas a dispositivos móviles.

    03/04/2014 - 15:45:36 Publicar una respuesta
    • Mailrelay

      ¡Hola Ángel! Muchas gracias por comentar, efectivamente es cada vez más necesario adaptar nuestros emails a dispositivos móviles.

      03/04/2014 - 15:47:54 Publicar una respuesta
  2. Mailrelay

    ¿Te ha gustado este análisis de newsletter? ¿Qué otros te gustaría ver?

    03/04/2014 - 08:45:11 Publicar una respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Menu Title