XRL Tech Corner

Blog
Tamaño de fuente: +

Plantillas de email marketing

A la hora de trabajar con plantillas de email marketing, surgen muchas dudas de diversa índole, tanto a nivel de marketing y de negocio como del lado técnico.

En este artículo vamos a ver algunas particularidades de la parte técnica para la construcción las plantillas de correo desde cero. Existen muchos clientes de correo, como Gmail, Outlook, Mail de Apple, etc... muchos de estos clientes aceptan código HTML, pero disponen de unos "filtros" que eliminan gran parte del código y por supuesto no aceptan Javascript.

Con lo que tenemos que ingeniarnos soluciones para que el correo se vea como en un navegador web, o mejor dicho, parecido a un navegador web. Como podréis ver en los siguientes apartados, el arte de construir emails y newsletters es bastante complicado, en el sentido que hay que ir esquivando las excepciones de cada cliente de correo en el diseño.

Para ello, existen programas para hacer newsletters que nos facilitarán mucho la gestión y el diseño de la estrategia de email marketing.

Particularidades de los clientes de correo

Gmail

Por ejemplo, empezando por Gmail, este cliente de correo elimina todos las etiquetas link, style, y sobreescribe los estilos css con los suyos propios, también cambia el DOM significativamente.

Yahoo Mail

Sin embargo Yahoo Mail soporta CSS en etiquetas de style.

Una cosa importante a la hora de insertar imágenes, es que éstas deben estar referenciadas con una ruta absoluta de un servidor que las aloje, de tal manera que sean accesibles desde cualquier sitio. Así pues para poder aplicar estilos tendremos que usar el atributo style dentro de cada etiqueta que queramos cambiar.

Por ejemplo si empezamos por un h1 tendremos que especificar la fuente, el color, el tamaño, los márgenes, el relleno, etc.

Es recomendable envolver todo el contenido dentro de un div con el fondo de imagen y otro para fijar el ancho del contenido.

Outlook

A la hora de utilizar el cliente de correo Outlook es importante saber que el posicionamiento, márgenes,etc... es limitado, además existen versiones que utilizan el motor del IE (las antiguas), y otras versiones que utilizan el motor de Word. Por eso debemos utilizar tablas de HTML a la antigua usanza. Pero que ocurre cuando la pantalla es menor del tamaño habitual de un ordenador?

Para pantallas de móvil podemos usar media queries. Por ejemplo podemos usar una clase en las tablas que ocupe el width con el 100% pero cuando la resolución sea de pc de escritorio queremos que conserve los 700px de máximo.

Tal como comentamos antes hay clientes de email de Outlook basados en el render de internet explorer y otros basados en el render de word, por eso se suelen usar sentencias condicionales para ajustar las propiedades del css.

Esto es si la versión es mayor o igual a office 10 entonces aplica los estilos que se se definen debajo. Para crear botones en los emails, podemos añadir un link con estilos pero los clientes de Outlook basados en Word no lo soportan. Para ello se podría usar VML, pero no vamos a entrar en este artículo en ello.

Podéis ver la Wiki para más información.

Apple Mail

El cliente de Apple Mail fija un font size mínimo de 14px, con lo que no podemos poner texto mas pequeño que eso. Afortunadamente existen códigos propietarios como:

-ms-text-size-adjust: none; -webkit-text-size-adjust:none;

para desbloquear este valor mínimo de 14px.

Conclusión

En este artículo hemos comentado algunas de las particularidades que podemos encontrarnos a la hora de construir plantillas html desde cero. Si queremos enviar correos masivos con nuestro boletín semanal, es recomendable recurrir a soluciones de email marketing como Mailrelay, ya que además de facilitar la construcción de las plantillas, tendremos estadísticas avanzadas de los envíos, un soporte especializado, autorespondedores y un montón de cosas más.

Valora este artículo del blog:
Analizamos el hosting web de Hostinger en detalle
blogpay un nueva criptomoneda para bloggers

Artículos relacionados

 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
Invitado
Martes, 16 Octubre 2018

Imagen Captcha