1

Mailings

APLICACIONES DIGITALES: MAILINGS

Elementos

 

Los elementos básicos para construir un mailing son los siguientes:

  1. Logotipo.
  2. Descriptor de negocio.
  3. Nombre de producto.
  4. Titular.
  5. Ventana.
  6. Imagen.
  7. Call to action.
  8. Destacados.
  9. Contenido.
  10. Cierre (datos y canales de contacto, legales).
  11. Vigilado.

 

NOTA

En el esquema se muestran los elementos que puede contener un mailing. Sin embargo su uso y disposición variará de acuerdo al objetivo de la comunicación.

Orden de los elementos

La disposición de los elementos que se plantean dentro del mailing permite que cada uno cumpla con su función informativa. Cada uno de los elementos es ubicado con un orden que le da dirección a la lectura y crea puntos de enfoque para generar interés en el mailing.

  1. Descriptor de negocio y logotipo: Estos elementos sirven para que el lector pueda ubicar fácilmente la marca y el tipo de servicio en el cual se enfocará el contenido.
  2. Titular: Cumple la función de informar cuál es la intención del mailing, es una introducción al contenido.
  3. Imagen: La imagen ayuda a generar una conexión más cercana y crear familiaridad entre el lector y el mailing. Su intención es hacer una pausa en la lectura para generar empatía.
  4. Call to action: Redirecciona al lector a la página web referente al contenido del mailing, por ello es importante que tenga buena visibilidad.
  5. Destacados: Representan un foco de interés específico en la lectura. Tienen la función de separar y resaltar información a la que se le quiere dar relevancia.
  6. Canales de contacto: Direccionan al usuario al sitio web, redes sociales y blog de SURA.

Estructura de contenidos

 

La estructura de los contenidos en los mailings podrá variar de acuerdo al objetivo de comunicación.
A continuación, se muestran algunos ejemplos de estructura de contenidos.

Construcción

Tamaño

El tamaño del mailing debe tener un mínimo de 600 px de ancho y el alto será variable y de definirá de acuerdo a la extensión de información que contenga el mailing.

Márgenes

El margen se establece como área de seguridad para delimitar el área donde deberá aparecer la información dentro del mailing. Los márgenes deben ser de 45 px a cada lado.

p10_colombia_03_mailings_04

Logotipo

El logotipo se debe colocar en la esquina superior derecha del mailing. El tamaño del logotipo está establecido para asegurar una buena legibilidad y unidad en la comunicación. Se deberá dejar un margen de seguridad, para evitar que otros elementos invadan su entorno y se deben respetar las medidas establecidas para tener mejor control en la comunicación digital.
El margen para ubicar el logotipo debe ser de 45 px a cada lado y el tamaño del logotipo debe ser de 150 px.

p10_colombia_03_mailings_05

Descriptor

El descriptor va ubicado al otro costado del logotipo, alineado en la base y en color azul PANTONE® 286C (#0033A0). Su tamaño depende de la altura del símbolo del logotipo y de su número de letras. Para descriptores de 4 o más letras el tamaño de éste es igual al 40% del alto del símbolo. Para descriptores de menos de 4 letras es del 50% de la altura del símbolo. Para descriptores de más de 7 letras es del 35% de la altura del símbolo.

Ventana

La ventana cumple la función de contenedor de textos. Se construye a partir de un rectángulo con 3 esquinas en punta y una en curva. La esquina curva de la ventana siempre debe estar localizada en el lado inferior derecho.

Se determinó el tamaño específico para la curva de la ventana de la siguiente manera: el diámetro del círculo que construye la curva de la ventana deberá ser de 85 px.

 

NOTA

Para mayor profundidad sobre este tema revisar la sección:
Aplicaciones > Anuncios > Ventana

p10_colombia_03_mailings_06

Tipografía

Los mailings contienen varios elementos tipográficos y a cada uno de ellos se le ha asignado una tipografía y un peso para mantener un estilo uniforme en todos los materiales.

En un mailing, sólo se debe incluir la información indispensable, ya que es una pieza de comunicación a la que se le dedica poco tiempo de lectura y se corre el riesgo de perder el mensaje cuando se sobre-satura de información.

Las tipografías que se deben utilizar son DIN y FS Joey para aquellas secciones del mailing que se maquetan como imagen y Arial para el cuerpo de texto que se maquetará en html.

Las tipografías DIN y FS Joey se utilizarán únicamente en los casos donde el contenido se maquete como imagen.

Programación

Existen tres formas para programar los mailings y estas son:

1. Mailing como imagen

La ventana y todos los textos son imágenes, por ende se pueden usar las tipografías FF DIN y Fs Joey.

2. Mailing en html con ventana

La ventana se programa como una imagen, todos los textos son en html y se usan en tipografía Arial.

3. Mailing sin ventana

Este caso se usa exclusivamente cuando el mail se arme en programas de envío masivo que no permite ciertos tipos de código, todos los textos son en html y se usan en tipografía Arial.

Call To Action

Construcción

Los botones o call to action se construyen partiendo de un rectángulo cuyas esquinas son ligeramente curvas; éstas se logran utilizando la herramienta de round corners a 2 px. El botón debe tener una altura de 37 px y puede crecer hacia lo largo hasta un límite de 200 px, siempre respetando el área de reserva para el texto, como se muestra a continuación.

p10_colombia_03_mailings_09
p10_colombia_03_mailings_10

Caso especial

En los casos donde se requiera incluir una flecha en el call to action, el botón deberá tener forma cuadrada.

p10_colombia_03_mailings_11

Usos incorrectos

  1. En la tipografía no se deben utilizar colores que no contrasten con el color del botón.
  2. La esquinas del botón nunca deberán ser cuadradas.
  3. La altura del botón no debe modificarse.
  4. Para el caso especial del botón en formato cuadrado, no se deben colocar iconos, sólo flechas.
p10_colombia_03_mailings_12

Color

Los colores que se deben utilizar en los botones son los de la paleta de color corporativa. No se deben utilizar combinaciones de colores entre tipografía y fondo que no tengan contraste o no favorezcan la legibilidad. A continuación se muestran algunos ejemplos de aplicación:

03_MAILINGS_21
NOTA

La paleta secundaria puede utilizarse para crear botones en comunicaciones de relacionamiento, siempre y cuando los colores que se utilicen en tipografía y el botón contrasten.

Color, destacados y gráficos

 

Para la construcción de un mailing es importante tener en cuenta ciertos elementos que proporcionan dinamismo al material de comunicación. Estos se deben usar como un recurso limitado y no se debe abusar en su aplicación.

  1. Transparencia de la ventana cuando se ubica sobre una imagen.
  2. Degradado de azules en la parte superior de una ventana dividida (únicamente en Seguros).
  3. Emplear recursos gráficos como tablas, gráficas o ilustración.
  4. El uso de los destacados para dar énfasis a algún dato específico.

Transparencia y degradado

Para darle dinamismo al sistema, hay ocasiones en que las ventanas usan degradados y transparencias. El degradado puede utilizarse únicamente en comunicaciones de Seguros. Su aplicación se permite sólo cuando la ventana es dividida y se debe implementar sobre el recuadro superior, no sobre el inferior, ya que el degradado es un elemento gráfico secundario y no debe ser protagónico.

p10_colombia_03_mailings_16

 

El footer es el espacio en el que se integran los canales de contacto dentro de un mailing. Los canales de contacto son elementos relevantes para la comunicación ya que facilitan el contacto del cliente con la empresa y de manera más directa, a los productos. Se identificaron dos escenarios principales de acuerdo a los objetivos de la comunicación: relacionamiento e informativo-ventas. A continuación se explican los elementos tanto mandatorios como opcionales para cada uno de los casos.

Objetivo: Relacionamiento

Los mailings de relacionamiento tienen como objetivo acercar al cliente a la marca SURA, de ahí que sea importante incluir como mandatorios ligas a redes sociales, el blog de SURA y el sitio web, canales que favorecen la relación cliente-empresa. En los casos que aplique, deberá incluirse el tagline ya que es un elemento que refuerza el posicionamiento y la personalidad de la marca.

Objetivo: Informativo o ventas

Existen mailings de carácter puramente informativo para comunicar temas como la apertura de una nueva sucursal, cambios de horarios de atención, envío de estados de cuenta de los clientes, etc. Por otro lado, existen mailings enfocados hacia ventas, ofreciendo nuevos productos y favoreciendo la contratación de algún producto.

En estos casos, es importante presentar como mandatorios las líneas de atención telefónica para contactar a los asesores de ventas y el sitio web donde los clientes encontrarán información acerca de los productos que ofrece SURA y los requisitos para obtenerlos. En los casos que aplique, deberá incluirse el tagline ya que es un elemento que refuerza el posicionamiento y la personalidad de la marca.

Íconos de redes sociales

La presencia de íconos de redes sociales debe limitarse a tres dentro del footer de los mailings. Se recomienda incluir Facebook, Twitter e Instagram. En el caso donde la comunicación involucre otra red social, se puede sustituir por alguna de las principales.

Color

  1. Los íconos se deben utilizar en color azul hexadecimal #0033A0 o en gris hexadecimal #707372 sobre blanco.
  2. Los íconos deben utilizarse siempre en su versión en positivo.

Usos incorrectos

  1. Los íconos de redes sociales, no deberán utilizarse dentro de ningún tipo de envolvente.
  2. Los íconos no deben aplicarse en colores distintos a los establecidos en el punto anterior.
p10_colombia_03_mailings_20

Disclaimer

Si el footer requiere un disclaimer, este debe ubicarse en la parte inferior, debe ir en tipografía Arial 9 pt y en color
gris ##707372.

Maquetación

Formato responsivo

Los mailings deben tener un mínimo de 600 px de ancho para visualización en desktop, sin embargo, es importante que sean responsivos para que los contenidos se adapten para su visualización en dispositivos móviles.
El formato que se debe considerar en su programación para dispositivos móviles es de 320 px de ancho.

033_MAILINGS_03

Nomenclatura de imágenes

El ALT descriptivo funciona para que, en los casos en los que no se visualicen las imágenes dentro del servicio de correo, aparezca el texto correspondiente a la información dentro de la imagen y no se pierda el mensaje dirigido al cliente. A continuación se muestran ejemplos.

p10_colombia_03_mailings_22

Otras recomendaciones

  1. El mailing debe contener 40% de imagen y 60% de texto en html.
  2. El mail debe ser maquetado con tablas y estilos CSS inline. Se recomienda maquetarlo a una sola columna.
  3. Procurar no usar muchos contenedores y cuadros para que no compitan con el Call to Action. En caso de que se requieran, procurar que sean de diferente color al Call to action para diferenciarse.

Ejemplos

A continuación, se muestran distintos ejemplos de mailings.

Seguros



Otros ejemplos de los negocios