Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

¿Por qué mi plantilla de newsletter no se ve bien?

Publicado por Mailrelay en julio 21, 2015

plantilla de newsletter

Hoy voy a tratar un tema que seguro que te resulta de mucha utilidad: revisar la correcta visualización de la plantilla de newsletter.

Depende de con que herramientas trabajes a la hora de diseñar tu newsletter podrás encontrarte con más o menos problemas de visualización más tarde, ten en cuenta que muchas de las herramientas más conocidas no fueron creadas para diseñar plantillas de newsletter, sino páginas web.

En esto debemos de poner especial cuidado porque el html empleado en una página web no siempre es compatible con todos los clientes de correo y no se verá bien cuando lo envíes.

NOTA: También debes tener en cuenta que el previsualizador de Mailrelay es una página web, por lo que la forma más segura de ver tu newsletter como realmente la verán tus suscriptores es realizar envíos de prueba y revisarlos en diferentes clientes de correo.

 

pregunta

¿En qué debemos fijarnos?

Si quieres comprobar de un vistazo las compatibilidades de tu plantilla de newsletter puedes mirar el código fuente.

No te preocupes, no es necesario ser un experto o experta en programación, hay algunos puntos clave que indicarán posibles problemas de visualización de tu plantilla de newsletter, y detectarlos es muy fácil:

plantilla de newsletter

1) Enlace a ficheros CSS externos

Esto es muy habitual en las páginas web, porque permite reutilizar los estilos entre varias páginas sin necesidad de duplicarlos.

El problema es que un email no podrá acceder a estos ficheros externos por lo que los estilos se perderán.

La solución es incluir los estilos CSS dentro del propio código del email, de forma que esté todo incluido.

2) Enlace a ficheros JS externos

Otro aspecto muy frecuente es el uso de ficheros de código JavaScript, que pueden ser utilizados para diversos fines, desde animaciones, a transiciones, sliders, etc.

El problema es doble, por un lado es un fichero externo que no se puede utilizar, y por otro los clientes de correo por motivos de seguridad no van a ejecutar el código JavaScript que incluyamos en nuestra newsletter.

La solución es no utilizar código JavaScript

plantilla de newsletter

3) Código HTML “web”

Los dos puntos anteriores nos pueden dar una buena idea de lo que tenemos entre manos con nuestra plantilla de newsletter.

Y hasta cierto punto son solucionables.

Pero ahora fíjate en la imagen anterior.

Verás muchas etiquetas como “header“, “main“, “div“, “id“, “class“, etc. Mala señal, estamos ante un HTML diseñado para renderizar una web, no un email.

Deberíamos estar viendo cosas como “table“, “tr“, “td“, “style“, y en general un código más, digamos, denso a la vista.

Modificar este tipo de código para que se vea bien como newsletter es bastante complicado y es difícil garantizar que se verá igual al terminar, no es una muy buena idea.

La verdad es que es mejor partir desde otra base si tenemos la posibilidad.

plantillas de newsletter

4) Estilos en el “head”

Esto es mucho menos problemático, pero aún así puede darnos más de un quebradero de cabeza.

Si te fijas en la imagen anterior tenemos una etiqueta “style” dentro de la cabecera de la plantilla “head“.

Se definen diversas clases que se aplicarán luego a los elementos de la newsletter, mira un detalle de la misma:

plantilla de newsletter

En el editor de Mailrelay se ve bien, y en muchos clientes de correo también se verá bien, pero en Gmail:

plantilla de newsletter

Gmail parece tener otros planes para nuestra newsletter, y muestra otro color de fondo y diferencias en el texto.

Básicamente no está aplicando los estilos, bueno, no es que no los esté aplicando, es que Gmail elimina la etiqueta “style” que encuentra dentro del “head“.

De entrada es mejor colocar esta etiqueta dentro del “body“, así:

plantilla de newsletter

Esto ya va a hacer que nuestros estilos no sean eliminados, pero aún así, es bastante probable que en algunos clientes de correo, tampoco se apliquen.

pregunta
¿Por qué?

Porque estamos utilizando selectores, por ejemplo:

td.titulo

Aquí estamos indicando que debe aplicar esos estilos cuando encuentre un “td” que tenga una clase, “class“, de nombre “titulo“, lo puedes ver:

plantilla de newsletter

El problema es si el cliente de correo no es capaz de hacer caso a estas indicaciones

pregunta
¿Cómo lo haríamos entonces?

Bueno, la opción más segura y soportada ampliamente por la mayoría de clientes de correo es utilizar estilos “inline

pregunta
¿Qué es esto de estilos inline?

Simplemente se trata de definir los estilos que queremos aplicar “dentro” del propio elemento al que se deben de aplicar, así:

plantilla de newsletter

Aquí ves que dentro de la etiqueta “td” hay una etiqueta “style” con los diferentes estilos que queremos aplicar.

Aquí no hay error posible, el elemento incluye los estilos que queremos aplicar, de forma que se verán, por ejemplo en Gmail:

plantilla de newsletter

La solución más efectiva entonces esta clara.

Tenemos que incluir dentro de cada elemento los estilos que queremos que tenga.

Esto, si lo tenemos en cuenta mientras creamos la plantilla de newsletter no es demasiado difícil.

Pero si queremos hacerlo cuando ya tenemos la plantilla terminada, eso ya es otra cosa.

Y nos puede llevar bastante tiempo.

Estamos ante el caso de que la solución más efectiva es también la que más trabajo nos puede dar.

Afortunadamente …

Hay herramientas que hacen este trabajo de forma automática por nosotros.

Es el caso de Premailer 

plantilla de newsletter

Una herramienta muy fácil de utilizar que pasará los estilos de nuestra plantilla de newsletter al formato “inline“.

Lo hacemos en 3 pasos muy rápidos:

1) Pegamos nuestro código donde pone “Paste HTML as the source”

plantilla de newsletter

2) Hacemos click en el botón “submit”

plantilla de newsletter

3) Y en la siguiente página, donde indica “Click to view the html results” encontraremos nuestro código preparado, listo para copiar y pegar en Mailrelay

plantillas de newsletter

¿Ha sido fácil verdad?

Sin duda es una herramienta muy útil que te puede ayudar a solucionar muchos problemas de visualización que tengas en tus plantillas de newsletter.

Pero cuidado, no funciona en el 100% de los casos, no es capaz de corregir todos los problemas de todas las newsletters.

Tampoco va a cambiar el código base HTML (lo que comentábamos en el punto 3), no llega a corregir tanto, esta parte sería más difícil. Pero para lo que hemos comentado va genial y puede ahorrarte mucho trabajo.

Antes de terminar me gustaría recomendarte otro artículo complementario de estos temas, se trata de “hablemos seriamente de plantillas de email marketing“.  Y un vídeo donde te enseño como diseñar una newsletter, con el proceso paso a paso:

En conjunto gracias a ambos artículos podrás solucionar muchos problemas en tus plantillas de newsletter.

Suscríbete al blog y recibe los mejores contenidos semana a semana:







Acepto la política de privacidad.



Comentarios

  1. David

    Hola, muchas gracias por los consejos y recursos que dais. Pero tengo una duda, cuando envío los newsletters con mailrelay las imágenes no se muestran en Gmail, tengo que pinchar en el enlace de “mostrar imágenes” en cambio en recibo newsletter de otros proveedores y las imágenes se muestran de forma auotmática. Esto ¿a qué puede ser debido? Muchas gracias y seguir así!!

    26/01/2016 - 13:30:30 Publicar una respuesta
  2. Juan Antonio

    Realmente interesante. Puede evitar a mucha gente (entre ellos yo) quebraderos de cabeza innecesarios y fácilmente solucionables. Muchas veces he desechado una plantilla que me gustaba por no saber la causa exacta de que no funcionase. Ahora tengo una guía para seguir unos pasos de comprobación gracias a vosotros.
    Genial!

    10/11/2015 - 10:26:25 Publicar una respuesta
  3. Borja

    ¡Hola! Gracias por todos los contenidos tan útiles que publicáis en este blog, ¡no me pierdo ninguno!.

    He probado la herramienta de Premalier en vuestra plataforma y el resultado, al menos para mí, no ha sido muy positivo. Me ha reducido mucho el ancho del newsletter, por lo que al hacer el envío de prueba quedaba demasiado estrecho.

    ¡Un saludo!

    09/09/2015 - 15:00:11 Publicar una respuesta
    • Mailrelay

      ¡Gracias Borja! Me alegra que te sean útiles los contenidos 🙂

      El premailer a veces falla, sobre todo si la newsletter incluye responsive, en esos casos la suele reducir a su mínimo como comentas, ¿quizá fué eso?

      09/09/2015 - 16:16:25 Publicar una respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Menu Title