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)
- 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.
Jordi Pérez | 17 de Junio de 2008 a las 19:44 #
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
http://jordi.bufi.es/ | 18 de Junio de 2008 a las 06:54 #
¿Volver a las tablas? Oh no, ¡dios mio! xD
Bromas aparte, muy buenos consejos para los que no estamos muy acostumbrados (o nada acostumbrados) a enviar mails en html
PoZu | 18 de Junio de 2008 a las 07:52 #
@Jordi Pérez: Hoy me los enseñas!
@Jordi Bufí: con gifs 1×1 transparentes y otros grandes “trucos”… que tiempos aquellos.
LostSys.com - Albert Coronado Blog - Enginyeria de software, Informatica professional. | 18 de Junio de 2008 a las 15:49 #
[...] de crear un eMailing que, almenys jo, els tindrè presents quan tingui que fer un altre mailing. Guia para crear un buen emailing en html June 18, 2008 | In Links [...]
Albert Coronado | 18 de Junio de 2008 a las 15:58 #
Excelente Post !!! Lo tendré muy en cuenta la próxima vez que tenga que hacer un mailing. Saludos a todos desde Girona,
Albert Coronado | 18 de Junio de 2008 a las 15:59 #
Por cierto, he anotado este post en mi blog para tenerlo presente. Saludos otra vez.
PoZu | 18 de Junio de 2008 a las 16:13 #
Gracias Albert, si te da resultado ya me vas diciendo. Yo ya lo he puesto en práctica
Jordi Catà | 18 de Junio de 2008 a las 16:18 #
hey molt bon article
Sandman | 18 de Junio de 2008 a las 17:23 #
Muy bueno Pozu, te lo has currao. Luego lo enlazaré desde Sleepingcat.es, un abrazo!!!
Cremark » Blog Archive » Links interesantes de la semana_3 | 23 de Junio de 2008 a las 08:22 #
[...] Guía para crear un buen e-mailing en HTML, por Juan Antonio Pozuelos [...]
julian | 15 de Febrero de 2009 a las 18:39 #
increibleeee!!!
muchas gracias!!!
excelente y sencilla la explicación…
y funcionaaaaaa!
sfurlan | 25 de Mayo de 2009 a las 12:03 #
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
PoZu | 25 de Mayo de 2009 a las 14:00 #
@sfurlan: gracias por la recomendación lo miraré y a ver si puedo hacer comentarios del servicio, un saludo
Fabiola Laguna | 18 de Febrero de 2010 a las 22:38 #
Menú Insert / HTML
No entiendo este paso, le doy click al cuerpo del mensaje, y luego no encuentro ningun menu insert….
Help!!!