Manual para confección de E-Mail Marketing

Manual para confección de E-Mail Marketing
1

Manual para confección de E-Mail Marketing
CREACIÓN DEL LAYOUT
Es importante considerar, en la creación de un layout para email marketing, que las piezas
deben contener un mix imágenes y texto, para que eso sea posible, es importante que los textos
sean dispuestos en locales que no tengan backgounds, porque en la creación del HTML
para email marke¬ting ellos no aparecerán. Los backgrounds deben ser dispuestos en colores
sólidos. El uso del mix de texto y imagen facilita la visualización por parte del usuario al recibir
el e-mail caso el proveedor de e-mail bloquee las imágenes.
Pieza configurada solamente en imagen, con las imágenes bloqueadas:
Pieza con mix de imagen y texto, el contenido es visualizado:
2

Manual para confección de E-Mail Marketing
Es importante fijar que el texto insertado en el HTML tiene algunas limitaciones en relación
al texto insertado como imagen. Además de no existir control del espacio entre letras,
palabras y líneas, también hay una restricción para las fuentes utilizadas, que deben seguir el
estándar internacional de fuentes (o sea, las fuentes que existen en todas las computadoras,
independiente del sistema operacional).Las más utilizadas son Verdana, Tahoma, Arial y Times
New Roman.
También existe una diferencia entre el estándar del texto en HTML y en imagen. Mientras
la fuente insertada en imagen tiene formato vector, la fuente insertada en HTML tiene formato
bitmap. Mismo utilizando la misma fuente y tamaño, mudanzas visibles pueden ocurrir.
Ejemplo:
HTML
Imagen
3

Manual para confección de E-Mail Marketing
Es muy importante que el contenido sea bien posicionado en la pieza para que pueda despertar
un interés del usuario. Es necesario que la pieza tenga un estándar en relación al posicionamiento
de las informaciones.
Los datos relevantes deben estar en posiciones estratégicas (encabezamiento, box colorido…)
con destaque para que sean las primeras informaciones visualizadas por el receptor.
Las partes con destaque pueden contener los links para direccionar a su site, donde puede
contener una información más llena, de acuerdo con el objetivo de su campaña.
El asunto de las campañas debe estar de acuerdo con el contenido (imagen y texto) del mensaje.
Logo + Slogan o información
con destaque
Contenido + Links
Rodapié con informaciones de contacto
La pieza debe respetar los tamaños listados abajo:
- Texto: máximo 20kb (ideal 10kb);
- Imágenes: máximo 45kb (ideal 20kb);
- Texto + Imágenes: 50kb (ideal 25kb);
- Largura de la pieza: 450px a 550px (ideal 500px);
- Deje la altura lo menor posible para evitar el scroll de la página.
4

Manual para confección de E-Mail Marketing
Sigue algunas informaciones sobre las especificaciones de HTML que deben ser seguidas
para crear una campaña de email marketing efectiva.
DATOS ESPECÍFICOS IMPORTANTES
Imágenes
- Las imágenes deben contener links absolutos y ser hospedadas en un servidor.
Ejemplo:
Incorrecto: “imagenes/foto.jpg”
Correcto: “http://www.site.com.br/imagenes/foto.jpg”
- Utilizar tag ALT, para incluir un texto substituto en la imagen, caso ella sea bloqueada.
- No coloque imágenes de fondo (background) en la pieza, porque no aparecerá.
Ejemplo:
Links
- Utilice el target =“_blank”, así el link será abierto en una nueva pagina y el email continuara
abierto en otra.
- No utilice más de 32 links. Cuanto menos, mejor.
- No utilizar el recurso MAP para crear links en imágenes, el ideal es recortar y poner un link
para cada recorte.
Restricciones
- Flash, javascript, iframe, ilayer, divs absolutas, vídeos
- Anexos
- ‘ (plick) cambiar por “ (aspas)
- CSS (apenas permitido el uso a través del tag style) [vea anexo I]
Ejemplo:
“”
- Scripts
- Líneas de código muy largas.
- Tags con letras mayúsculas
Ejemplo:
Incorrecto:
Correcto:
- Campo de mensaje y comentarios
- Tag “” (importante que el texto sea codificado en Europeu Ocidental, y no en UTF-
8, para que la acentuación no sea perdida)
- Comentarios del código html
5

Manual para confección de E-Mail Marketing
OBSERVACIONES
- Los nuevos filtros antispam tienen algoritmos complejos para determinar lo que es spam.
Sigue algunos ejemplos que aumentan la chance de ser considerado un SPAM:
- Utilizar más imagen que texto
- Tener tags “tbody”
- Contenido después del tag html de cerramiento
- Tener muchas tags
- Utilizar la personalización em el asunto o em las piezas pueden aumentar el número de
apertura y clicks. Sigue algunos ejemplos de tags de personalización
- Nombre: troca##primeiro_nome## o troca##destinatario_nome##
- Email: troca##destinatario_email##
- Empresa: troca##empresa##
- Tipo_cliente: troca##tipo_cliente##
- Mobile: troca##mobile##
- Para cualquier otro campo de la herramienta es solo poner el nombre del campo, por
ejemplo: troca##nombredelcampo##
*Fija: no se debe usar letras mayúsculas y espacios en las tags de personalización.
6

Manual para confección de E-Mail Marketing
EJEMPLOS DE CONSTRUCCIÓN DE LAYOUT
Logo - Posicionamiento de la marca de la empresa
Texto
Imagen del Encabezamiento Texto del HTML Imagen del Rodapié
7

Manual para confección de E-Mail Marketing
Logo - Posicionamiento de la marca de la empresa
EJEMPLOS DE
CONSTRUCCIÓN DE LAYOUT
Imagen del
encabezamiento
informativo
Imagen insertada
en tabla
Texto en HTML
insertado en tabla
Punto de interacción
- direcciona para el
site de la empresa
8

A Guide to CSS Support in Email June 2008
Style Element
Windows
AOL Desktop
Outlook '03 Outlook '07 Mail Mac Mail Entourage 2004 Entourage 2008 Thunderbird 1.5 Thunderbird 2 AOL 9 AOL 10 for Mac Notes 6 Eudora Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web .Mac Web Support 13
element In Y Y Y Y Y Y Y Y Y Y N N N Y Y N N Y N Y Y 77%
element In Y Y Y Y Y Y Y Y Y Y N N N Y Y N N Y Y Y Y 77%
Link Element
Outlook '03 Outlook '07
Windows
Mail Mac Mail Entourage 2004 Entourage 2008 Thunderbird 1.5 Thunderbird 2 AOL AOL 10
AOL Desktop
for Mac Notes 6 Eudora Old Yahoo New Yahoo Gmail New Gmail Live Mail Hotmail AOL Web .Mac Web
element in Y Y Y Y Y Y Y Y Y Y N Y N N Y N N Y N Y Y 85%
element in Y Y Y Y Y Y Y Y Y Y N Y N N Y N N Y N Y Y 85%
CSS Selectors
Windows
AOL Desktop
Outlook '03 Outlook '07 Mail Mac Mail Entourage 2004 Entourage 2008 Thunderbird 1.5 Thunderbird 2 AOL AOL 10 for Mac Notes 6 Eudora Old Yahoo New Yahoo Gmail New Gmail Live Mail Hotmail AOL Web .Mac Web
e Y Y Y Y Y Y Y Y Y Y N N N Y Y N N Y Y Y Y 77% SAFE
* Y N Y Y Y Y Y Y Y Y N N N Y Y N N Y Y Y Y 69%
e.className Y Y Y Y Y Y Y Y Y Y N N N Y Y N N Y Y Y Y 77%
e#id Y Y Y Y Y Y Y Y Y Y N N N Y Y N N N Y Y Y 77%
e:link Y Y Y Y Y Y Y Y N Y N N N Y Y N N Y Y Y Y 69% RISKY
e:active, e:hover Y N Y Y Y Y Y Y Y Y N N N Y Y N N Y Y Y Y 69%
e:first-line Y N Y Y Y Y Y Y Y Y N N N Y Y N N Y Y Y Y 69%
e:first-letter Y N Y Y Y Y Y Y Y Y N N N Y Y N N Y Y Y Y 69%
e > f N N N Y Y Y Y Y N N N N N Y Y N N N N N Y 38%
e:focus N N N Y Y Y Y Y N N N N N Y Y N N N N Y Y 38%
e+f N Y N Y N Y Y Y N N N N N Y N N N N Y N N 38%
POOR SUPPORT
e[foo] N N N Y N Y Y Y N N N N N Y Y N N N Y Y N 31%
CSS Properties
Outlook '03 Outlook '07
Windows
Mail Mac Mail Entourage 2004 Entourage 2008 Thunderbird 1.5 Thunderbird 2 AOL AOL 10
AOL Desktop
for Mac Notes 6 Eudora Old Yahoo New Yahoo Gmail New Gmail Live Mail Hotmail AOL Web .Mac Web
color Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y 92%
font-size Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y 92%
font-style Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y 92%
font-weight Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y 92%
text-align Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y 92%
text-decoration Y Y Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y 92%
background-color Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
border Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
display Y N Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y Y Y Y 85%
font-family Y Y Y Y Y Y Y Y Y Y Y Y N Y Y N N Y Y Y Y 92%
font-variant Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
letter-spacing Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
SAFE
RISKY

CSS Properties
Outlook '03 Outlook '07
Windows
Mail Mac Mail Entourage 2004 Entourage 2008 Thunderbird 1.5 Thunderbird 2 AOL AOL 10
AOL Desktop
for Mac Notes 6 Eudora Old Yahoo New Yahoo Gmail New Gmail Live Mail Hotmail AOL Web .Mac Web
line-height Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
padding Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
table-layout Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
text-indent Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
text-transform Y Y Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 85%
border-collapse Y Y Y Y N Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 77%
clear Y N Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 77%
direction Y N Y Y N Y Y Y Y Y Y Y N Y Y Y N Y Y Y Y 77%
float Y N Y Y Y Y Y Y Y Y Y Y N Y Y N Y Y Y Y Y 85%
vertical-align Y N Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 77%
width Y N Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 77%
word-spacing Y N Y Y Y Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 77%
height Y N Y Y Y Y Y Y Y Y Y N N Y Y N Y Y Y Y Y 77%
list-style-type Y N Y Y Y Y Y Y Y Y Y Y N Y Y Y Y Y N Y Y 85%
overflow Y N Y Y N Y Y Y Y Y Y N N Y Y Y Y Y Y Y Y 69%
visibility Y N Y Y Y Y Y Y Y Y Y N N Y Y N N Y Y N Y 77%
white-space N Y N Y Y Y Y Y N N Y N N Y Y Y Y Y Y Y N 54%
background-image Y N Y Y Y Y Y Y Y Y Y N N Y Y N N N Y Y Y 77%
background-repeat Y N Y Y Y Y Y Y Y Y Y N N Y Y N N N Y Y Y 77%
clip Y N Y Y Y Y Y Y Y Y Y N N Y N Y N N Y Y Y 77%
cursor Y N Y Y N Y Y Y Y Y Y N N Y Y N N Y Y Y Y 69%
list-style-image Y N Y Y Y Y Y Y Y Y Y N N Y Y N N N Y Y Y 77%
list-style-position Y N Y Y Y Y Y Y Y Y Y N N N Y Y Y Y N Y Y 77%
margin Y Y Y Y Y Y Y Y N Y Y N N Y Y Y Y N N Y Y 77%
z-index Y Y Y Y Y Y Y Y Y Y Y N N Y N N N N Y Y Y 85%
left Y N Y Y Y Y Y Y Y Y Y N N Y N N N N Y Y Y 77%
right Y N Y Y Y Y Y Y Y Y Y N N Y N N N N Y Y Y 77%
top Y N Y Y Y Y Y Y Y Y Y N N Y N N N N Y Y Y 77%
background-position Y N Y Y Y Y Y Y Y Y Y N N N Y N N N N Y Y 77%
border-spacing N N N Y N Y Y Y Y N Y N N Y Y Y Y N N Y Y 46%
bottom Y N Y Y Y Y Y Y N Y Y N N Y N N N N Y Y Y 69%
empty-cells N N N Y N Y Y Y N N Y N N Y Y Y Y Y N Y Y 38%
position Y N Y Y Y Y Y Y Y Y Y N N N N N N N N Y Y 77%
caption-side N N N N N N Y Y N N N N N Y N Y Y Y N Y Y 15%
opacity N N N Y N Y Y Y Y Y Y N N Y N N N N N Y Y 54%
60 Outlook '03 Outlook '07
Windows
Mail Mac Mail Entourage 2004 Entourage 2008 Thunderbird 1.5 Thunderbird 2 AOL 9 AOL 10
AOL Desktop
for Mac Notes 6 Eudora Old Yahoo New Yahoo Old Gmail New Gmail Live Mail Hotmail AOL Web .Mac Web
RISKY
POOR SUPPORT
Tag Compliance By Mail Client 85% 42% 85% 98% 83% 98% 100% 100% 83% 86% 78% 19% 0% 95% 83% 53% 53% 68% 81% 95% 95%