[
](/files/2014/07/build-your-mailing-swirl.gif)
Si quieres crear y diseñar para tu campaña de mailing un newsletter, boletín, comunicado o una promoción ten en cuenta que los gestores de correos (Gmail, Outloock, Yahoo, etc.) Interpretaran el código html de forma distinta al que lo hace los navegadores tradicionales (Chrome, Firefox, Safari, etc.). Esta es la razón por la cual, si usas programas tipo Word para generar código partiendo de tu diseño el resultado es casi siempre desastroso.
Ahora bien, no te asustes, que hacer que tu mailing se vea bien en la mayoría de los clientes de correo no es tan complicado como te puedes imaginar.
Siempre usa tablas
Primero, para organizar tu plantilla siempre, pero siempre usa tablas, piensa como distribuir allí tu contenido, de manera que cada porción del contenido se ubique en las celdas dentro de las tablas, como te muestro en la siguiente figura:
[
](/files/2014/07/imagenesSegundopost.png)
Un consejo, al crear las tablas ten en cuenta que es un fastidio tener que desplazar el scroll para leer el contenido del email, usa un ancho máximo de 600px, evita que tu correo sea obviado por flojera de desplazar para leer.
Uso de CSS (Hojas de estilos)
Para las páginas web es siempre recomendable usar una hoja de estilo externa, pero como ya te dije los clientes de correo traducen el código de forma diferente, obviara ese archivo así como los css que se colocan en el head. La solución es colocarlos in line, así como te muestro en la siguiente línea:
< td style=”font-family:Verdana, Geneva, sans-serif;color:#333″ >Texto< /td >
Y no así:
< head >
< style type=”text/css” >
td {
font-family:Arial, Helvetica, sans-serif;
color:#333;
}
< / style >
< / head >
Recuerda, siempre los estilos en los diseño de email van in line __es decir, dentro de la instancia, tabla, columna y no en un documento externo ni dentro del head.
Imágenes
Tener imágenes no hará que tu campaña de mailing sea mejor o peor, si decides usarlas ten en cuenta lo siguiente, primero, es muy importante el tamaño, si tu tabla contenedora mide 550px la imagen no debería medir más de eso, puesto que es posible que la hacer el envío se deforme el diseño.
Muchas veces los gestores de correos no abrirán las imágenes si no le indicas que debe hacerlo, ese famoso link de “mostrar imagen” entonces te recomiendo diseñes tu correo pensando de antemano en eso. Incluye siempre dentro de las imágenes en atributo alt:
< img src = “http:// imolko.com / lacasadelapradera.jpg” alt = ”imagen de casa de pradera” >
Esto en caso de que no se muestre la imagen hara saber a tu lector de lo que se trata, un truco que puedes usar para que ese texto se adapte a tu diseño, es usar dentro de la etiqueta los atributos: Font-family, Font-size y colors, así:
< img src = http:// imolko.com /lacasadelapradera.jpg alt= ”imagen de casa de pradera” style =”Font-family:Arial; Font-size:8px; color:#FCFCFC;” />
Indica siempre el tamaño de tus imágenes, con width y height para que al cliente de correo no le de por redefinirlos a sus antojos.
Pasa a veces que por apuro, que cuando diseñamos nuestro boletín, colocamos las imágenes y resulta que dichas imágenes se encuentran guardadas de forma local, es decir, solo en nuestra computadora, puede ser que no te des cuenta pues desde donde diseñas las puedes ver, pero al enviar, tu lector la verá como una imagen rota, por eso te digo, fíjate que la dirección de tu imagen este en un servidor, de esta forma:
http: // www.misitio.com/fotos/foto1.jpg
y no así:
C:\Users\MisDocumentos\foto1.jpg
Quizás quieras usar una imagen de fondo para que resalte más tu correo, eso esta bien, pero te advierto, Outlook no soporta este tipo de imágenes.
Recuerda esto al usar imágenes
- Siempre usa borde con valor 0 (cero).
- Incluye en las imágenes el atributo alt.
- Revisa siempre la dirección de las imágenes, evita dejar apuntando a una ubicación local.
- Toma en cuenta que un email sin imágenes puede ser igual de efectivo.
Más consejos
No uses javascript, los clientes de correo lo evitan por seguridad, tampoco flash, formularios, es muy probable que no se muestren en el contenido y que además seas enviado a la bandeja de spam.
En vez de usar la etiqueta < p > prueba usando esta etiqueta para hacer párrafos , ya que los espacios creados con < p > son interpretados de formas diferentes por cada cliente de email, aumentando o disminuyendo la separación.
El bgcolor en la etiqueta body es mejor dejarlo con color blanco.
Evita , elimina, no tengas espacios en blanco en las celdas , y no resumas jamás los estilos, por ejemplo:Style=”Font-family:Arial; font-size:12px;” está bien, pero hacerlo así: Style=”font:Arial 12px;” solo te servirá para tu sitio web o blog.
Los link dentro de los gestores de correos son leídos con los estilos propios de cada cliente, lo puedes cambiar dándole estilos a la instancia < a > y además crear un < span >. Esto suena un poco complicado, pero te lo aclaro con un ejemplo:
< a href=”http://imolko.com/” style=”color:#ff00ff”>< span style=”color:#ff00ff”>Tu link
Con estos datos que te doy ya puedes crear tu email para que tus usuarios lo lean perfecto en casi todos los clientes y dispositivos, recuerda también tomar en cuenta las buenas prácticas para envios de email masivo , y evita siempre que tus envíos caigan en la bandeja de basura o spam.
¿No quieres crear html?
No eres experto en html y quieres que tu correo se vea bién, en Imolko te ofrecemos con cada plantilla de blog que selecciones una plantilla para que tu email se vea igual que tu blog, solo regístrate en Zenkiu, selecciona tu imagen web, y ya no te tendrás que preocupar por como lucirá tu envío.
