Email specifications es (1)

Especi�caciones

Lucini & Lucini Communications México Hipólito Taine #229, Col. Polanco, Mexico, DF, CP 11570 - P +52 55 27 89 99 18 - www.lucinilucini.com

A continuación le presentamos una serie de especificaciones generales sobre un adecuado diseño de las creatividades.

Muchas de estas pueden resultar obsoletas respecto a nuevas tecnologias de programación y estilos CSS, sin embargo,

vale la pena destacar que la mayoria de los clientes de correo (outlook, hotmail, Gmail, Yahoo, BlackBerry, etc) no actuan como

un navegador normal por lo que es importante seguir estas pautas para conseguir los mejores resultados de entregabilidad

en sus campañas de emailing.

HTML

Mantener el ancho de e-mail entre los 550 px y 650 pxCon las resoluciones que utiliza la mayoría de los dispositivos hoy en día y los limites de los paneles de visualización de los clientes de correo, es aconsejable no excederse de estas medidas

Busca equilibrio entre la información que se ofrece en formato texto y los gráficosEvita el uso excesivo de imágenes, por defecto los clientes de correo desactivan las imágenes, ofreciendo una precaria primera impresión de tu email. Cuanto mas texto tenga mas información aportaras al usuario aún con las imágenes desactivadas. Un 40% de área cubierta por grá�cos frente a un 60% de texto sería un equilibrio adecuado

Situar siempre el contenido más importante en la parte de arriba a la izquierda

Utiliza siempre Tablas, mantén una estructura limpia y clara:El diseño para un mailing tiene que ser mas limitado que el de una pagina web ya que tendremos que simpli�carlo al máximo.

Definir los colores de fondo en formato HEXADECIMAL siempre dentro de las etiquetas <table> o <td>:

<table bgcolor="#010101"> <td bgcolor="#010101">

Texto Plano

Es necesario tener una versión en texto plano de tu campaña pues existen clientes de correo que no aceptan email en HTML, o usuarios que deshabilitan esta función, por lo que si no existe una versión equivalente de la campaña en texto, estos usuarios no podrán verla.

From o RemitenteNombre de la marca, empresa o producto, NO cuentas de correo

Subject o Asuntode entre 30 y 40 caracteres incluyendo espacios

Cuentas para pruebaMáximo 6, de preferencia de diferentes clientes de correo para comprobar su correcta visualizacion

Landing PageLa URL de la página a donde llegaran los clientes, usualmente un formulario de registro para generar leads

Tracking Link o PixelEn caso de que quiera contabilizar impresiones o clicks por su cuenta es indispensable enviar URL por separado


Para definir el estilo de texto utiliza siempre CSS inline:No utilices hojas de estilo CSS externas, ni declares los estilos en el HEADER, pues la mayoria de los clientes de correo los eliminan. Aplica los estilos CSS directamente dentro de las etiquetas:

<span style="font-family: sans-serif; font-size: 16px; color: #006971;"></span>

Simplifica los LINKs:Normalmente mostramos un LINK de forma distintiva, por ejemplo en un color, letra o estilo diferente, mismoque se puede especi�car utilizando lenguaje CSS inline y siempre utilizando el atributo target="_blank":

<a href="%LINK0%" target="_blank" style="font-family: sans-serif; font-size: 16px; color: #006971; text-decoration: none; ">Esto es un link en que el definimos el estilo de texto</a>

<a href="%LINK0%" target="_blank"><img src="ruta_de_la_imagen.jpg" width="ancho" height="alto" alt="texto" border="0" align="top"></a>

Siempre especifica dentro de la tabla estos atributos :

align="center" width="" border="0" cellspacing="0" cellpadding="0"

Recomendamos el uso de Arial, u otra fuente similar del estilo sans-serif Existen estudios que demuestran que las fuentes de ese estilo son más legibles en monitores

Los carácteres deben ser del set US-ASCII caracteres para imprimir 0-127Para carácteres que se encuentran fuera de este set deber ser substituidos por un remplazo adecuado, por ejemplo: © for ©

Evita el uso de Javascript, layers, DIVs, formularios, Frames y Adobe FlashLa mayoría de los clientes de correo cortan los mensajes que contengan etiquetas que no sean HTML simple

Evita el uso de etiquetas <p>, <h1>Las etiquetas que normalmente usamos para de�nir un parrafo <p> o título <h1> no se interpretan por igualen los clientes de correo, evita su uso. Utiliza mejor los saltos de línea <br> y de�ne el estilo CSS dentro de una etiqueta <span> , ejemplo:

<span style="font-family: sans-serif; font-size: 16px; color: #006971;"> Esto es un texto<br>que se cortó en la línea anterior, y que se volverá a cortar a continuación<br> no olvides cerrar apropiadamente las etiquetas</span>

Evita el uso de <tbody>No cumple ninguna función y solo hace el codigo mas pesado

Nunca utilizar Mapas de imagen (image Maps) para linkear sus imágenes La mejor manera de hacerlo es cortar sus imágenes e incluir una etiqueta <a> en cada una

Nunca utilice markups o estilos en la sección <body> (bgcolor, imagen de fondo, etc) Clientes de correo electrónico basados en Web a menudo ignoraráneste código

ImágenesEl peso máximo total deberá ser de 150KB Si puede ser menos mejor, hará que las imágenes se cargen más rápidamente y facilitará su apertura

Formatos de imagen aceptados: JPG, JPEG, GIF o PNG

Utilizar siempre el atributo alt=" " en todas las imágenes Aquí se incluye la descripción de las imágenes utilizadas, este texto aparece en la pantalla cuando un cliente de correo tiene desabilitada la función de "mostrar imágenes" y sólamente leen texto.

Siempre especificar el ancho y alto de la imagen con los atributos width=" " y height=" "

Siempre poner border="0" en las imágenesPuesto que cuando incluyen links les pondrá el borde predeterminado de html

Siempre poner aling="top" en las imágenesPermite controlar la alineación de una imagen con respecto a la tabla en la que esta anidada

NUNCA usar imágenes como fondo del tipo:

<table style="background-image:url(img/imagen.jpg);"> <table background="img/imagen.gif">


<img src="ruta_de_la_imagen.jpg" width="ancho" height="alto" alt="texto" border="0" align="top">

Toma como referencia este ejemplo para insertar tus imágenes:

<table align="center" width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><a href="%LINK0%" target="_blank"><img src="ruta_de_la_imagen.jpg" width="ancho" height="alto" alt="texto" border="0" align="top"></a></td> </tr> <tr> <td valign="middle" align="center" style="padding: 10px;"><a href="%LINK0%" target="_blank" style="font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #999999; text-decoration: none;">This is text</a></td> </tr></table>

Sigue este ejemplo para contruir tus tablas:

Email specifications es (1)

Documents

Transcript of Email specifications es (1)