Guia para crear un buen emailing en html

Premisas que se deben seguir para crear un eMailing en HTML óptimo para todos los clientes mail.

Clientes de Correo que se han tenidos en cuenta

  • Thunderbird
  • Outlook
  • Gmail
  • Hotmail y Live
  • Yahoo

Para los webmails también se han tenido en cuenta diferentes navegadores como Firefox 2 y Internet Explorer (v6 y v7).

De esta forma nos aseguramos que nuestro correo llegará correctamente a un mayor número de personas. Está claro que sobre todo sirve para poder hacer mailings más bonitos gráficamente.

Para crear nuestro mail tenemos que hacer 2 pasos:

Usar un editor HTML para crear el código del correo: lo mejor es usar un editor como tal. No usar Words ni procesadores de texto. Yo uso (aunque es de pago) el Dreamweaver.

Ir a tu cliente habitual (yo uso Thunderbird)

  1. Crear el mail (Redactar)
  2. Click en el cuerpo del mensaje.
  3. Menú Insert / HTML
  4. Pegar el código generado antes en el Dreamweaver.

ejemplo mailing destinia
Y en estos 2 pasos tan sencillos para crear el mail usando HTML, tenemos que tener en cuenta una serie de cosas importantes para que nos salga un perfecto correo en HTML y que independientemente de como lo vayan a leer, se vea perfectamente.

Usar tablas. Está muy bien todo el tema de Layers (DIV) pero para los mails tenemos que volver a las tablas para maquetar.

No usar las siguientes etiquetas: <body>, <title>, <script>, <applet>, <frame>, <head>, <html>, … y alguna menos importante. Esto es básicamente para los webmails que directamente suelen eliminar esa parte del código.

Hay que poner las Imágenes online. Lo mejor es subir las imágenes a tu servidor, y desde el código llamarlas, hay que evitar incrustar imágenes.
Además hay que usar urls absolutas http://www.miweb.com/mailing/foto1.jpg

Insertar en las imagenes el atributo galleryimg=”no” (ej. <img … galleryimg=”no” …>), con esto evitamos el toolbar encima de las imágenes. Se hace bastante pesado en Explorer ver cuando pasas con el ratón una información que te distrae del resto del mail.

Usar urls cortas. Ya que vamos a insertar imágenes online con urls absolutas evita que la url sea larga. www.tusitio.com/mailing/enero/08/imagenes/cabecera/foto1.jpg. Hay algunos webmails que te acortan la url y ponen un %20 en medio.

Evitar la carpeta “images”, las imágenes deberían estar en el mismo directorio que el propio mail.html

Intenta evitar nombres en las imágenes tipo ellogodemiempresa.jpg y poner números 1.jpg. Para que un antispam no nos filtre nuestro mail como spam.

Usar estilos inline. No hay que definir una hoja de estilos externa, ni poner los estilos en el head. Los estilos van inline (ej. <span style=”color: #ffffff;”>mi mailing</span>).

El bgcolor del Body debería ser blanco o mejor dicho, no tener bgcolor. Esto pasa porque algunos clientes (siempre webmail por ejemplo el gmail) pasan de ese atributo y ponen el color por defecto de ellos, el blanco.

Una opción para usar backgrounds de colores es utilizar
<table width=”100%” height=”100%” bgcolor=”#000000″>

Usa alt en las imágenes, mientras carga el mail, o si hay problemas de conexión sabremos que va a salir o que debería salir en esa imagen.

Usa titles en href y las img. Aunque no lo veo del todo necesario es una buena práctica para ver el tooltip en los enlaces.

Si quieres clavar tu diseño tienes que evitar la etiqueta <p></p> ya que dependiendo del cliente de correo te da unos margenes diferentes. Aquí Live directamente los elimina. Lo mejor es usar <br> que siempre es un salto de linea.

– Ya que usamos tablas para que salga un buen diseño podemos recurrir a las imagenes 1×1 transparentes.

– Los forms están muy bien, pero por tema de seguridad algunos clientes los elimina, por ejemplo hotmail. Así que mejor no usar forms.

– Actualmente (año 2008) las pantallas más extendidas son las 1024px para que se vea bien en la mayoría de monitores el ancho del mailing debería ser 750px.

No usar javascript. Supongo que queda claro que muchos antivirus, y directamente los clientes evitan los javascripts por seguridad.

Siempre poner en el pie un mail para poder quitarte de la subscripción del newsletter. mailto:unsubscribe@tusitio.com?subject=unsubscribe

Además es bueno hacer una versión online: www.misitio.com/newsletter/ y poner en el mail, si no ves correctamente este correo puedes visitar nuestra versión online.

No usar palabras clásicas que serían detectadas rápidamente como spam. Algunos ejemplos serían: free, now!, promotion, benefit, customer, click here, … La repetición de estas palabras y algunas más puede aumentar el % de que sea detectado como spam.

Este guía la he escrito basándome en las premisas recogidas en: HTML Email Guide – http://www.anandgraves.com/html-email-guide, he intentado resumirlo y he eliminado información innecesaria dejándo lo más importante.

Nota: Cualquier cosa que queráis comentar con vuestra experiencia será bienvenida y puedo ir actualizando la entrada según vayan apareciendo nuevas cosas.

Spamihilator, un antispam bueno, bonito y gratis

Logo SpamihilatorContinuando con las herramientas útiles y que además uso, hoy os presento Spamihilator. La única pega que le pongo es su nombre.

Viendo que el 95% del correo viene del SPAM es normal que tengamos que tener alguna forma de protegernos. Mucha gente usa correos como hotmail, yahoo o gmail, éstos son webmail y tienen su propio antispam (decir que gmail tienen un potentísimo motor y por ejemplo hotmail vamos a dejarlo en: “ha mejorado”).

Pero la mayoría también disponemos de correos corporativos, del dominio propio o de la empresa y éste hay que leerlo desde un cliente de correo de escritorio (en otro artículo explicaré lo bueno de poner un correo@tudominio.com dentro de gmail). Yo uso y recomiendo Thunderbird, pero hay otros.

Captura SpamihilatorEntonces el problema viene cuando empezamos a recibir correos y la mayoría son basura, es ahí cuando entra Spamihilator. Un programa que no consume recursos, está en español (bajando el language pack), es fácil de configurar (te configura el outlook, el thunderbird, opera, eudora…) y además aprende según te vayan entrando los spams con el área de entrenamiento. Totalmente recomendable, además de ser gratuito.

Página oficial: http://www.spamihilator.com/