Guia para crear un buen emailing en html
17 de Junio, 2008 por PoZu
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)
- Crear el mail (Redactar)
- Click en el cuerpo del mensaje.
- Menú Insert / HTML
- Pegar el código generado antes en el Dreamweaver.
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.
Ese paso se empezó en Octubre 2007(más o menos), hasta que el pasado 1 de Enero del 2008 empieza y nace oficialmente 
Con el titular “
Después del artículo que hice en su día sobre la 
Yo desde siempre he apostado por los ordenadores para todo, incluso para jugar. Mucho mejor que cualquier consola. A día de hoy la cosa ha cambiado un poco y me ha hecho replantearme mi idea.
Bueno, como hace poco PoZu buscó un sustituto del cargante Adobe pdf reader. Me ha dado por buscarle sustituto al Winamp (versión 5.23 que tenía), que entre lo que tarda en arrancar, y los recursos que consume me ponía nervioso.
