Email marketing: conceptos básicos, tipos de diseño y sus diferencias.

Una de las cosas más preguntadas a la hora de realizar campañas de email marketing es sobre el diseño de las piezas que se van a enviar. Mucho más que el contenido, o el asunto, es el diseño el que está a la cabeza de la problemática de los clientes.

Ahora bien: diseños hay muchos, ya que dependen de la creatividad de las personas. Pero nos tenemos que enfocar en la estructura del diseño, y a partir de ahí, centrarnos en la estética. A continuación, comentare las opciones que pueden usar, y las diferencias entre sí.

  • El ancho de nuestro email debe ser entre 600px y 800px. Esto es porque éste es el ancho seguro del mail al momento de ser visualizado en los diferentes webclients.
  • El email no debe ser una sola imágen. La relación entre imágen y texto debe ser por lo menos del 50/50, para estar siempre seguros de no caer en spam.
  • No se pueden usar códigos javascript. No se puede poner ninguna animación, ni insertar videos, ni formularios.

Ahora pasemos a explicar estas 4 estructuras.

Fijo:
Esta vendría a ser el email clásico. El primero. Un ancho definido, columnas, texto e imágenes. Sirve y se ve bien en PC, pero seguramente necesite scroll lateral en tablets y celulares, por lo que queda descartado del formato mobile.

Fluido: El fluido es una estructura que funciona como variante al diseño fijo. Y consiste básicamente en el armado de la tabla con un 100% de ancho. Esto logra que el diseño se expanda o se contraiga dependiendo de la pantalla en la que se visualice. La ventaja de esto, es que en pantallas chicas el diseño se adapta al pequeño ancho de la pantalla, pero si se visualiza en pantallas muy grandes (22 o más pulgadas) el diseño queda en el centro con los anchos de la tabla pegados al borde. Y no queda bien.

blog_mail-fixedEn esta imágen, podemos ver que el diseño fluido se ve bien, pero si la pantalla es muy grande el email va a terminar viendose feo, ya que al 100% siempre se pegará a los anchos de la pantalla.

Sin embargo, hay una forma de arreglar esto: usando media query. Si nosotros le seteamos un ancho fijo a la tabla contenedora (ej: 550px) para que al momento de abrir el mail en una pantalla grande siga viendose correctamente, cuando lo abramos en pantalla pequeña no lo veremos reducido. El media query que insertemos tiene que tener la propiedad de setear la tabla que al momento de que se abra en una pantalla menor a 660px, el contenedor sea 100% de ancho.

blog_mail-fluidCon el mismo seteo de 550px que teníamos antes, insertamos el @media que sea que en pantallas menores de 660px, el ancho pase de estar fijo a que sea 100%. Así, en pantallas pequeñas lo visualizaremos correctamente.

Adaptive: El Adaptive (o Escalable) funciona tanto para ser visto tanto en PC como en móviles. La estructura de un email de una sola columna, fuentes grandes y botones que sean de un tamaño razonable para ser presionados con el dedo al momento de ser abierto en celulares o tabletas.

blog_hp-adaptive

Responsive: Este tipo de email es el más logrado y el que más se recomienda utilizar ya que tiene la propiedad de ser un mismo email y ser visto correctamente tanto en PC como en mobile. Como su nombre indica, la estructura ‘responde’ y se acomoda a los diferentes tipos de pantallas. Tan sólo insertando un media query logramos personalizar el email a gusto. Quedaría de esta manera:

@media only screen and (max-device-width:480px)

blog_vodafone-responsive

Básicamente, esa etiqueta dice que si la pantalla es menor o igual a 480px, los estilos que estén dentro de la misma entrarán en acción. ¿No es genial?
El diseño Responsive puede utilizarse para hacer pequeños cambios en el email, como por ejemplo agrandar fuentes u ocultar algún texto innecesario, o directamente puede hacerse un mail practicamente diferente. Lo realmente útil de esto es que con un único email, llegamos a todos los dispositivos, pudiendo lograr que se vea como queremos esté donde esté.
La diferencia con el Adaptive, es que el Adaptive no utiliza el @media y el diseño tiene que ser preparado para móviles aún si es visto desde una PC de escritorio.
Y la diferencia con el Fluido, es que el fluido, aunque puede utilizar @media como en el ejemplo que dí, el Responsive puede ser un email prácticamente diferente en móviles. El fluido respetará el diseño original.
Es cierto que realizar un mail en estructura Responsive es más complejo que en fluido o fijo, pero no hay que desatender el hecho de que la tendencia mobile es cada vez más abarcativa. Armar estructuras para que nuestros clientes visualicen nuestros correos con el teléfono o la tableta nos beneficiará.
Nicolas Calvo

Post Relacionados