Por lo general, el pensamiento de un diseñador al tener que enfrentarse a la creación de un newsletter es: Tengo que diseñarlo de igual manera que un sitio web? Y aunque en parte “algo” de razón se tiene en ello, el diseño de un newsletter es MUY especial y hay que tomarlo con pinzas.
Pensemos que ese diseño pasará por varios procesos, desde que entra a nuestra bandeja de entrada (o en su peor caso como Spam) el e-mail se verá por default con las imágenes ocultas (y su contenido también, en algunos casos), también pasará por severos analisis para saber si es un e-mail SPAM o nó, será visto por el sistema anti-virus por si posee algún código malicioso, y por último será renderizado de diversas formas dependiendo del soporte de estilos que tenga cada webmail/cliente de correo.
Por eso es recomendable tener presente algunos tips:
Editores WYSIWYG
Al estar codificando el HTML, muchos editores WYSIWYG (como por ejemplo Dreamweaver) pueden incorporan ‘residuos’ en el trabajo final los cuales pueden lograr una mala renderización en los clientes de correo y webmails. Es preferible realizar la codificación de forma manual con algún programa de edición de texto plano/HTML ó en su defecto identificar los ‘residuos’ y eliminarlos.
Etiquetas DOCTYPE , <head> y <body>
La mayorÃa de los webmails eliminan las etiquetas DOCTYPE y <head>, mostrando solamente el contenido dentro del body del mensaje.
Maquetaciones
Realizar maquetaciones simples, de una ó dos columnas, utilizando tablas (no me odien, pero la maquetación a través de CSS utiliza propiedades que no todos los programas/webmails logran soportar, por lo cual se corre el riesgo de visualizar un newsletter desmaquetado).
Ancho del diseño
El diseño no debe sobrepasar los 500-600px de ancho.
Elementos
Flash, Javascript, videos, música, no serán mostrados en ningún programa/webmail y posiblemente el email sea bloqueado por el sistema antivirus por ser sospechoso ó directamente eliminado el código por los webmails.
Bloqueo de imágenes
De forma predeterminada, todos los programas/webmails bloquearan las imágenes de un e-mail.
- Es recomendable no incorporar texto importante (titulares, anuncios, etc) en imágenes.
- Es recomendable utilizar la propiedad ALT en las imágenes y realizar una pequeña descripción de que trata dicha imagen.
- Es una buena práctica realizar la verificación de como queda el diseño con las imágenes desactivadas.
- Los tags <img> deben llamar a las imágenes con su ruta absoluta hacia donde está alojado el archivo en el servidor.
- No llamar a las imágenes a través de su dirección IP.
- Evitar contenido en color blanco o colores claros (al estar las imágenes bloqueadas, el texto se verá con fondo blanco y si este posee un color claro será imperceptible)
- Declarar el ancho y largo de cada imagen incorporada en el diseño
- Varios sistemas anti-spam toman en cuenta que exista un balance entre contenido de imágenes y contenido de texto
URLs
Incorporar el atributo “_blank” para que los enlaces se abran en una nueva ventana.
Estilos
Los estilos CSS deben ser incorporados de manera ‘inline’. No se deben incorporar:
Dentro de las etiquetas <head>
Usando etiquetas <style>
Llamando a estilos externos
Testing en diferentes clientes de correo y webmails
Asà como cada navegador tiene un comportamiento diferente ante un diseño, los clientes de correo y webmails poseen una actitud similar, ya que no todos soportan la misma cantidad de propiedades HTML/CSS. De forma ideal, los diseños se deben testear en diferentes circunstancias (programas, sistemas operativos) para lograr la mayor compatibilidad. Una forma de abarcar a la gran mayorÃa de circunstancias es realizando el testing en los programas y servicios más populares:
Web – Hotmail, Yahoo! y Gmail
PC – Outlook, Windows Mail y Thunderbird
Mac – Mac Mail y Entourage
Asà como debes tener muy en cuenta la Usabilidad en tus proyectos Web, también debes tenerla para tus proyectos con el email.
- No desperdicies el tiempo de tus lectores: Asà que directo al grano y si tu boletÃn es un extenso incluye en primera medida una tabla de contenido.
- Los permisos importan: ¿Tienes el permiso para enviar tu email a cada uno de tus clientes? Además recuérdales quién eres y por qué deben creer en tÃ.
- El contenido le gana al permiso: Además de tener su permiso, a tus clientes debes enviarle información relevante.
- Haz fácil la salida de tu lista: No tienes porque escribirle a quienes no estén interesados.
- El bloqueo de imágenes es común: Muchos clientes y webs de correo bloquean las imágenes por defecto, asà que tu mensaje no debe depender de ellas.
- Usa tablas: Desafortudamente el soporte de CSS no es el adecuado en los clientes de correo. Asà que para diagramar usa tablas.
- Cuando uses estilos, úsalos inline: Por el mismo motivo anterior.
- No te olvides de la versión sólo texto: Muchos de tus clientes la prefieren.
- Conoce las leyes de correo electrónico de tu paÃs: Porque hay leyes que lo controlan y son diferentes en cada uno.
- Prueba, prueba, prueba: Asà como debes probar, probar y probar con tu sitio Web, igual hazlo con tus correos.
Suscríbete a nuestro Feed
Recibe nuestras novedades vía email
Enviame tus sugerencias via Twitter a: 
Twitter
Facebook
Flickr
Feed Webastica
Via Mail
Es una inquietud profesional transformada en blog, un intento por mostrar organizadamente los mejores articulos, tutoriales, tips y recursos inspiracionales, con el objetivo de contribuir a la formacion de mejores desarrolladores web. Es un placer contar con tu visita y decirte
Además, para evitar ser reconocido como spam, el e-mail debe tener la menor cantidad posible de: links, imágenes, variedad de colores; ya que algunos antispam usan una escala de puntos (no recuerdo el nombre de este sistema) para determinar si un mail es spam o no, y estas cosas suman puntos en contra.
Otro punto a tener en cuenta es el soft que se use para el envÃo, lo mejor será que haga el envÃo uno x uno, y desde una dirección de nuestro dominio. Asà y todo hay que tener mucho cuidado, porque aunque nuestros clientes nos den su permiso, algunos proveedores de internet ven la acción del envÃo masivo como spam, y pueden bannear nuestro dominio.
Espero les sirva mi aporte!
Citar
Muy buen aporte Delfina, sin dudas son dos nuevas consideraciones a tener en cuenta antes de desarrollar nuestra estrategia de email marketing. Gracias por el aporte.
Citar