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.

30 comentarios sobre “Guia para crear un buen emailing en html”

  1. Qué buen artículo. Si señor.
    Quien tenga un mínimo de nociones de código HTML (como yo) no debería tener muchos problemas para hacer un e-mailing como dios manda.
    Recuerdame que mañana te enseñe los e-mailings de taller informático. ;P
    Saludos!
    jordi

  2. @Jordi Pérez: Hoy me los enseñas!
    @Jordi Bufí: con gifs 1×1 transparentes y otros grandes «trucos»… que tiempos aquellos.

  3. HOla,

    Recomiendo que pruebes E-nvía. Es una herramienta Online para la creación de Mailings, Newsletters y Boletines Electrónicos. La herramienta permite la creación y gestión de campañas por Internet con seguimiento de resultados/estadísticas, personalización, entre otras funcionalidades.

    En la página Web de E-nvía hay un link para crear una cuenta de prueba para conocer la herramienta sin cargo y sin compromiso.

    La herramienta fue desarrollada para que no requiera conocimientos técnicos, tiene en cuenta todas las premisas para la creación de un emailing html y es bastante fácil de utilizar.

    Así también, en la pagina web de E-nvía hay un blog con las recomendaciones para la realización de un HTML (optimizado para envío de correos):

    Cualquier duda, nos escribimos o llamamos (Tel. 93 534 8842).

    Saludos

  4. Menú Insert / HTML

    No entiendo este paso, le doy click al cuerpo del mensaje, y luego no encuentro ningun menu insert….
    Help!!!

  5. Muy interesante artículo y con buenas prácticas, excepto por las tablas y las imágenes transparentes. Si crees que se diseña peor con divs es que realmente no dominas el diseño con divs. Las tablas están para lo que están, que son datos tabulares. El resto… divs.

    Y las imágenes invisibles son un crimen.

    Hay que usar las propiedades de margen (hay que tener en cuenta que Hotmail sólo aplica las propiedades margin-bottom, margin-left y margin-right; margin y margin-top los ignora por algún motivo).

    😉

  6. Hola Rodrigo, supongo que conoces el servicio de Mailchimp, fíjate que una empresa que tiene 100 trabajadores y que solo se dedica a enviar mails (miles y miles de correos al día) usa tablas.

    Por desgracia aún en los mails hay que usar tablas si quieres que quede perfectamente en todos (o la mayoría) de clientes de correo. Siento que estes en desacuerdo.

  7. Hola buenas tardes, me pareció muy interesante el artículo, lo ensaye y casi bien, solo que para envío a gmail y yahoo las imágenes que previamente llame desde el servidor llegan los destinatarios en el correo las imágenes para descargar y no me gusta esa parte, será que tiene solución? Lo hice desde Thunderbird. Muchas gracias de antemano.

  8. Hola Fredy, siempre lo envío desde Thunderbird, me funciona muy bien.

    Referente a lo que dices de las imagenes en gmail y yahoo tienes razón con lo que hace ahora, no he hecho pruebas en ese sentido, con lo que no puedo ayudarte.

  9. Yo tengo nivel 0,5 sobre 10 en html y estoy en ello a trompicones, prácticamente con nociones muy básicas de lo más conocido comunmente.

    El tema es que tengo hecho un diseño de mailing en html con el Dreamweaver y ahora necesito corgarlo online para que cuando envíe el e-mail se vea correctamente. Hasta ahí OK. La gente para la cual lo estoy haciendo utiliza el programa Transmit, pero no se cómo conseguir (o crear) la url para el html online y así poder mandarlo.
    ¿Quizás a través del hosting que tienen con Joomla?

    Gracias de antemano y saludos!

  10. Genial tutorial. Desde Social Media Global te animamos a seguir publicando y nos vamos a suscribir a tu blog.

    Nos gustaría también si podrías redactar un «tutorial» de cómo realizar dicho mail, un tipo de plantilla o algo de ese estilo estaría muy bien para los «no iniciados» en HTML.

    Saludos

    Fernando

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.