HTML de Mailings: Como hacer que nuestros mailings se vean bien en todos lados 5

Por lo menos en alguna ocasión hemos necesitado mandar una campaña de mailing por correo. Y si para hacer un sitio web teniamos que pelearnos con los diversos navegadores, en los mailings tenemos que pelearnos por todas las formas que usamos para ver nuestro correo.

Algunas consideraciones que debemos recordar para enviar una campaña de mailing:

– La forma de maquetación de un mailing es distinta a la de un HTML normal. Por lo que recuerda que no te debe dar ningún miedo en usar tablas y anidarlas unas y otras para ir armando tus grupos.

– El uso de las etiquetas de CSS es limitada y en lo posible trata de no usarlo mucho. Una de las mejores guías que he encontrado en este aspecto es la lista de CSS permitido en diversos servicios de correo. También hay una versión para descargar de Campaign Monitor.

– Recuerda que los correos (MS Outlook, Lotus Notes, Eudora, cualquier webmail, etc) no interpretan igual los altos y los anchos, por lo que nunca olvides poner en el caso de las imagenes los tags border="0" además de especificar siempre el alto y el ancho a todos los elementos.

– A todos los elementos debes de definir alto y ancho, esto en muchas ocasiones es un gran dolor de cabeza y la solución es tan simple como poner el tamaño a una tabla, a una imagen.

– En muchas ocasiones vemos entre las imágenes espacio en blanco, para solucionar este problema, quita los espacios en tu HTML, es decir, en lugar que se vea:


<table>

<tr>

<td>

<img src=”ruta/imagen.jpg” width=”123″ height=”321″ border=”0″ />

</td>

</tr>

</table>

Tu HTML debe de verse asi:

<table><tr><td><img src="ruta/imagen.jpg" width="123" height="321" border="0" /></td></tr></table>

–  Si el mailing que estas preparando tiene muchas imagenes y luego de algunas pruebas te das cuenta que se descuadran en ciertos sitios vistos desde web, entonces ponle <img style=”display:block” … y olvidate del problema.

– De más esta decir que tus imágenes deben de ser publicadas en un servidor y en lo posible trata de siempre usar nombres distintos, en muchas ocasiones mandamos un mailing de una campaña y una de las personas que lo recibe esta de vacaciones, apenas llegue aún verá la información que le mandamos originalmente.

– Desconfía del encoding, procura usar siempre los códigos ASCII de todos los elementos con tilde, y los caracteres especiales.

– Trata que tus imágenes no pesen tanto, si es así, síguelas cortando

Una vez que tengamos el HTML la mejor forma de probar es simular el envio, por lo que te recomiendo generar tu simulador de envio, la librería phpMAILER. De esta manera podemos comprobar que todo marche bien.

Espero que estos tips te hayan servido para enviar mejores mailings, si tienes alguno nuevo, no dudes en compartirlo por aca.

5 thoughts on “HTML de Mailings: Como hacer que nuestros mailings se vean bien en todos lados

  1. Reply BaseKit Oct 10,2011 7:55 am

    muy útil la entrada… gracias por compartir la info

  2. Reply julia Nov 10,2011 7:14 pm

    gracias x la info, cada dia entiendo mejor las cosas que pasan por tu cabeza.

  3. Reply Pedro Jan 4,2012 11:12 am

    Hola Tio,
    Gracias me salvaste la vida.
    Si tienes mas de estos consejos porfa subelos.

  4. Reply Omar Mar 13,2012 6:44 pm

    bunas tardes, por favor ayudeme. Tngo un lio con un mailing. En Outlook se corre n alguna images hacia la izquierda, pero en hotmail, webmail se ve bien, ya no se que mas hacer

  5. Reply Mau Jul 11,2014 7:21 pm

    Hola Ya probé todo, height y width, display:block, line-height:0; y en cada row se rompen todas las filas y se ve cortado el mail en Outlook, ya busqé soluciones y nada. Te agradezco Urge Respuesta

Leave a Reply