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.