Diseñando correctamente el mail en HTML – Parte 1: Contenido, Imágenes, Evitar filtros Anti-SPAM

En esta serie de tutoriales te acercaremos los mejores consejos para que, al llegar a destino, tus mails sean visualizados correctamente.

Veremos en detalle que son varios los puntos a tener en cuenta al enviar un mail hecho en HTML, dado que los clientes de correo (Outlook, Outlook 2007, Outlook 2003, Outlook Express, Thunderbird, Apple Mail, Eudora, Lotus, etc.), y servicios de webmail (Gmail, Yahoo, AOL, AOL Web, Hotmail, MSN, Comcast, Earthlink, etc.) interpretan el código de distinta manera, modificándolo para eliminar porciones o bien alterar sus líneas, de acuerdo a las restricciones que cada uno determina y aplica.

Como cada cliente o servicio de correo por web tiene su manera particular de interpretar el código HTML, vamos a concentrarnos en los puntos fundamentales que tienen en común, para que nuestros mails se vean correctamente.

1. Complejidad y contenido. El mail debe ser pensado como una página web, que debe ser atractiva visualmente, pero sin distraer al lector. Es primordial concentrarse en el mensaje. Es decir, el mail debe ser sencillo, vistoso y con un mensaje claro.

2. Imágenes. En un mail en HTML no pueden faltar las imágenes para hacerlo más atractivo. Al usarlas, es recomendable linkearlas a un servidor web y no attacharlas al mensaje. Si van como un archivo adjunto, dependiendo del cliente de correo, es muy probable que el receptor no llegue a verlas nunca (quedan alojadas en alguna carpeta temporal dentro del disco rígido). En cambio, al alojar las imágenes en un servidor, evitamos un tráfico excesivo innecesario al enviarlo (que aumentará con los rebotes), y que nuestro lector tenga que descargar un mail demasiado grande, que podría llevarlo a sospechar de su origen y hasta de si es seguro abrirlo (puede llegar a pensar que se trata de spam y el adjunto en realidad sea un virus).

Conclusión: nada más fiable que un servidor web para alojar nuestras imágenes. Eso sí, tenemos que asegurarnos que el servidor sea de acceso público. Si utilizamos un servidor de nuestra intranet, uno privado o que esté protegido por contraseña, los lectores no podrán ver las imágenes.

3. Ancho del mail. Si bien a un e-mail para marketing hay que diseñarlo como si se tratara de una página web, es importante comprender que no se puede crearlo con las dimensiones de una web. Hay que olvidarse de las resoluciones tipo 1024×768 u 800×600. Un mail nunca debe tener un ancho superior a los 600 pixeles. Lo mejor al momento de diseñarlos es utilizar tablas, de esa manera es posible establecer el ancho en píxeles o utilizar porcentajes (95% es lo más recomendable). Para conocer más sobre el uso de tablas en mails hechos en HTML, haga click aquí.

4. No usar tags DOCTYPE, BODY y HEAD. Los webmails como Hotmail, Yahoo! Mail, Gmail, etc., eliminan el contenido de esas tags como una medida de seguridad.

Conclusión:
no usarlos para establecer bgcolors, CSS, JavaScript o archivos de música. ¿Cómo diseñar el mail, entonces? Con tablas e inline CSS. Para más información, haga click aquí.

5. Evite que su correo sea tomado como SPAM:

* Evitar escribir todo el asunto en mayúsculas

* Evitar el uso de muchos signos de exclamación o interrogación en el asunto

* Evitar el uso del signo “$” al inicio del asunto

* Evitar el uso de direcciones de e-mail en el asunto

* Evitar incluir las palabras “gratis” o “viagra” en el cuerpo o asunto del mensaje

* Evitar incluir más imágenes que texto en el cuerpo del mail

* Evitar escribir el cuerpo del mensaje en HTML, usando fuentes muy grandes

* Evitar escribir el cuerpo del mensaje en HTML, usando un color de fuente similar al color de fondo

* Evitar mandar el correo desde una dirección de mail que empiece con muchos números

* Enviar el mail tanto en formato texto como en html

* Utiliza un dominio en lugar de una IP para las URL de las imágenes del cuerpo HTML del mensaje

Ahora, vamos a asegurarnos que el mail se vea exactamente como deseamos. Para eso, será necesario que analicemos el uso de tablas e inline CSS.

 

Para continuar con la segunda parte de este tutorial: Click Aquí

 

 

  • 7 Los Usuarios han Encontrado Esto Útil
¿Fue útil la respuesta?

Artículos Relacionados

Diseñando correctamente el mail en HTML – Parte 2: Cómo usar tablas e inline CSS

Para que el mail se visualice de manera correcta desde prácticamente cualquier cliente de correo...

Diseñando correctamente el mail en HTML – Parte 3: Casos especiales – Gmail, Lotus Notes y Outlook 2007

Como veníamos analizando en las entradas anteriores, que un mail se vea exactamente como nosotros...

¿Cómo hago para evitar que los mails enviados lleguen como SPAM?

A continuación te brindamos algunos tips a tener en cuenta para evitar que los mails enviados...