Si eres diseñador gráfico o web, habrás notado que en el proceso de diseño de Piezas de Email Marketing necesitamos conocer previamente cuales son las limitaciones del medio.
En primer lugar, para encarar el armado del email debemos pensar en un diseño simple que se adapte a las incompatibilidades de los distintos clientes de correo.
Lo segundo, y de lo que hablaremos en este post, es que tenemos que olvidar todo lo que conocemos sobre standards modernos de codificación HTML (CSS, CSS3, DIVS, Javascript), ya que el HTML para emails está a años luz de ello.
Por lo tanto, nos enfrentamos a un panorama bastante áspero aunque debemos enfrentarlo si queremos que nuestra campaña tenga éxito.
Te presento aquí algunos Tips de Codificación de HTML para Emails:
TABLAS Y ETIQUETAS
Utiliza la etiqueta «Table» a la hora de Maquetar tu campaña. No utilices la etiqueta «Div», ya que es muy incompatible en varios clientes de correo. No utilices la etiqueta «Head» dentro del HTML. Coloca todo el contenido dentro de la etiqueta «Body».
ESTILOS
No uses archivos CSS para aplicar los estilos de tu diseño. La forma correcta de aplicarlos es utilizando estilos Inline dentro de las etiquetas «P»
BACKGROUND IMAGE
No utilices «background-image»: lamentablemente ésta limita bastante nuestro diseño ya que muy pocos clientes de correo soportan esta propiedad.
TIPOGRAFÍAS
Limítate a usar tipografías standard en tus diseños (Arial, Verdana, Trebuchet, Times New Roman, Georgia), de esta forma tendrás la seguridad de que la mayoría de las personas que visualicen tu correo cuenten con dichas fuentes instaladas en los sistemas operativos.
Presta atención al usar los caracteres especiales. Algunos clientes de correo no visualizan de manera correcta los tildes y Ñ.
IMÁGENES
Ten especial cuidado a la hora de exportar las imágenes en tus diseños. Los formatos más recomendados son png 8, png 24, png 32, jpg, gif, gif animado.
Recuerda que en Doppler al cargar una imagen de más de 600 px de ancho la aplicación automáticamente muestra un mensaje de advertencia. Por otro lado, no existen limitaciones en el alto de las imágenes.
Recomendamos que la suma del peso en KB de estas imágenes no sea excesivo, de ser así, reduce la calidad de las imágenes para optimizar el peso.
FLASH
No embebas archivos .swf (Adobe Flash) ya que no es compatible con ningún cliente de correo. En el caso de que quieras incluir alguna pequeña animación, puedes usar animaciones en .gif. Ten en cuenta que el peso de la animación no debe ser excesivo, sólo utiliza este recurso si realmente vale la pena.
JAVASCRIPT
Trata de eliminar todo código Javascript en tu HTML, así ayudas a aumentar la taza de entrega de tus campañas.
Como ves, debemos prestar atención y cuidar cada detalle en la maquetación del email. Obviamente, no hay que olvidar un contenido atractivo ni un diseño sencillo y llamativo. ¡Sigue estas recomendaciones y logra tus objetivos con campañas de email exitosas!