Elementos
Los elementos básicos para construir un mailing son los siguientes:
- Logotipo
- Descriptor de negocio
- Nombre de producto
- Titular
- Ventana
- Imagen
- Call to action
- Destacados
- Contenido
- Cierre (datos y canales de contacto, legales)
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.
- Descriptor de negocio y logotipo: Estos elementos sirven para que el lector pueda identificar fácilmente la marca y el tipo de servicio en el cual se enfocará el contenido.
- Titular: Cumple la función de informar cuál es la intención del mailing, es una introducción al contenido.
- 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.
- Call to action: Redirecciona al lector a la página web referente al contenido del mailing, por ello es importante que tenga buena visibilidad.
- 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.
- Canales de contacto: Direccionan al usuario al sitio web, redes sociales y demás.
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 se definirá de acuerdo a la extensión de la 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.
Logotipo
El logotipo se debe ubicar 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.
Descriptor
El descriptor va ubicado al lado contrario del logotipo, alineado por su base y en color azul PANTONE® 286C (#0033A0). Su tamaño es 40% del alto 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
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 Barlow 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 Barlow 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 Barlow 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 ac)on se construyen par)endo de un rectángulo que cuenta con esquinas ligeramente curvas; éstas se logran u)lizando la herramienta 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.
Caso especial
En los casos donde se requiera incluir una flecha en el call to action, el botón deberá tener forma cuadrada.
Usos incorrectos
- En la tipografía no se deben utilizar colores que no contrasten con el color del botón.
- La esquina del botón nunca deberá ser cuadrada.
- La altura del botón no debe modificarse.
- Para el caso especial del botón en formato cuadrado, no se deben colocar iconos, sólo flechas.
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:
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.
- Transparencia de la ventana cuando se ubica sobre una imagen.
- Degradado de azules en la parte superior de una ventana dividida.
- Emplear recursos gráficos como tablas, gráficas o ilustración.
- 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. 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.
Footer
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
Los mailings de relacionamiento tienen como objetivo acercar al cliente a la marca, de ahí que sea importante incluir como mandatorios ligas a redes sociales 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.
Í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
- Los íconos se deben utilizar en color azul hexadecimal #0033A0 o en gris hexadecimal #707372 sobre blanco.
- Los íconos deben utilizarse siempre en su versión en positivo.
Usos incorrectos
- Los íconos de redes sociales, no deberán utilizarse dentro de ningún tipo de envolvente.
- Los íconos no deben aplicarse en colores distintos a los establecidos en el punto anterior.
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.
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.
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.
'