{"id":38136,"date":"2015-07-21T06:28:43","date_gmt":"2015-07-21T06:28:43","guid":{"rendered":"https:\/\/wp.lvh.me\/blog\/2015\/07\/21\/por-que-mi-plantilla-de-newsletter-no-se-ve-bien\/"},"modified":"2022-05-08T15:02:45","modified_gmt":"2022-05-08T15:02:45","slug":"por-que-mi-plantilla-de-newsletter-no-se-ve-bien","status":"publish","type":"post","link":"https:\/\/wpstaging.mailrelay.com\/es\/blog\/2015\/07\/21\/por-que-mi-plantilla-de-newsletter-no-se-ve-bien\/","title":{"rendered":"\u00bfPor qu\u00e9 mi plantilla de newsletter no se ve bien?"},"content":{"rendered":"

\"plantilla<\/p>\n

Hoy voy a tratar un tema que seguro que te resulta de mucha utilidad: revisar\u00a0la correcta visualizaci\u00f3n de la plantilla de newsletter.<\/p>\n

Depende de con que herramientas trabajes a la hora de dise\u00f1ar tu newsletter podr\u00e1s encontrarte con m\u00e1s o menos problemas de visualizaci\u00f3n m\u00e1s tarde, ten en cuenta que muchas de las herramientas m\u00e1s conocidas no fueron creadas\u00a0para dise\u00f1ar plantillas de newsletter, sino p\u00e1ginas web.<\/p>\n

En esto debemos de poner especial cuidado porque el html empleado en una p\u00e1gina web no siempre es compatible con todos los clientes de correo y no se ver\u00e1 bien cuando lo env\u00edes.<\/p>\n

NOTA:<\/strong> Tambi\u00e9n debes tener en cuenta que el previsualizador de Mailrelay es una p\u00e1gina web, por lo que la forma m\u00e1s segura de ver tu newsletter como realmente la ver\u00e1n tus suscriptores es realizar env\u00edos de prueba y revisarlos en diferentes clientes de correo.<\/div>\n

 <\/p>\n

\"pregunta\"<\/div>\n
\n

\u00bfEn qu\u00e9 debemos fijarnos?<\/h3>\n<\/div>\n

Si quieres comprobar de un vistazo las compatibilidades de tu plantilla de newsletter puedes mirar el c\u00f3digo fuente.<\/p>\n

No te preocupes, no es necesario ser un experto o experta en programaci\u00f3n, hay algunos puntos clave que indicar\u00e1n posibles problemas de visualizaci\u00f3n de tu plantilla de newsletter, y detectarlos es muy f\u00e1cil:<\/p>\n

\"plantilla<\/p>\n

1) Enlace a ficheros CSS externos<\/strong><\/div>\n

Esto es muy habitual en las p\u00e1ginas web, porque permite reutilizar los estilos entre varias p\u00e1ginas sin necesidad de duplicarlos.<\/p>\n

El problema es que un email no podr\u00e1 acceder a estos ficheros externos por lo que los estilos se perder\u00e1n.<\/p>\n

La soluci\u00f3n es incluir los estilos CSS dentro del propio c\u00f3digo del email, de forma que est\u00e9 todo incluido.<\/p>\n

2) Enlace a ficheros JS externos<\/strong><\/div>\n

Otro aspecto muy frecuente es el uso de ficheros de c\u00f3digo JavaScript, que pueden ser utilizados para diversos fines, desde animaciones, a transiciones, sliders, etc.<\/p>\n

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\u00f3digo JavaScript que incluyamos en nuestra newsletter.<\/p>\n

La soluci\u00f3n es no utilizar c\u00f3digo JavaScript<\/p>\n

\"plantilla<\/p>\n

3) C\u00f3digo HTML \u00abweb\u00bb<\/strong><\/div>\n

Los dos puntos anteriores nos pueden dar una buena idea de lo que tenemos entre manos con nuestra plantilla de newsletter.<\/p>\n

Y hasta cierto punto son solucionables.<\/p>\n

Pero ahora f\u00edjate en la imagen anterior.<\/p>\n

Ver\u00e1s muchas etiquetas como \u00abheader<\/em>\u00ab, \u00abmain<\/em>\u00ab, \u00abdiv<\/em>\u00ab, \u00abid<\/em>\u00ab, \u00abclass<\/em>\u00ab, etc. Mala se\u00f1al, estamos ante un HTML dise\u00f1ado para renderizar una web, no un email.<\/p>\n

Deber\u00edamos estar viendo cosas como \u00abtable<\/em>\u00ab, \u00abtr<\/em>\u00ab, \u00abtd<\/em>\u00ab, \u00abstyle<\/em>\u00ab, y en general un c\u00f3digo m\u00e1s, digamos, denso a la vista.<\/p>\n

Modificar este tipo de c\u00f3digo para que se vea bien como newsletter es bastante complicado y es dif\u00edcil garantizar que se ver\u00e1 igual al terminar, no es una muy buena idea.<\/p>\n

La verdad es que es mejor partir desde otra base si tenemos la posibilidad.<\/p>\n

\"plantillas<\/p>\n

4) Estilos en el \u00abhead\u00bb<\/strong><\/div>\n

Esto es mucho menos problem\u00e1tico, pero a\u00fan as\u00ed puede darnos m\u00e1s de un quebradero de cabeza.<\/p>\n

Si te fijas en la imagen anterior tenemos una etiqueta \u00abstyle<\/em>\u00bb dentro de la cabecera de la plantilla \u00abhead<\/em>\u00ab.<\/p>\n

Se definen diversas clases que se aplicar\u00e1n luego a los elementos de la newsletter, mira un detalle de la misma:<\/p>\n

\"plantilla<\/p>\n

En el editor de Mailrelay se ve bien, y en muchos clientes de correo tambi\u00e9n se ver\u00e1 bien, pero en Gmail:<\/p>\n

\"plantilla<\/p>\n

Gmail parece tener otros planes para nuestra newsletter, y muestra otro color de fondo y diferencias en el texto.<\/p>\n

B\u00e1sicamente no est\u00e1 aplicando los estilos, bueno, no es que no los est\u00e9 aplicando, es que Gmail elimina la etiqueta \u00abstyle<\/em>\u00bb que encuentra dentro del \u00abhead<\/em>\u00ab.<\/p>\n

De entrada es mejor colocar esta etiqueta dentro del \u00abbody<\/em>\u00ab, as\u00ed:<\/p>\n

\"plantilla<\/p>\n

Esto ya va a hacer que nuestros estilos no sean eliminados, pero a\u00fan as\u00ed, es bastante probable que en algunos clientes de correo, tampoco se apliquen.<\/p>\n

\"pregunta\"<\/div>\n
\u00bfPor qu\u00e9?<\/strong><\/div>\n

Porque estamos utilizando selectores, por ejemplo:<\/p>\n

td.titulo<\/em><\/p>\n

Aqu\u00ed estamos indicando que debe aplicar esos estilos cuando encuentre un \u00abtd<\/em>\u00bb que tenga una clase, \u00abclass<\/em>\u00ab, de nombre \u00abtitulo<\/em>\u00ab, lo puedes ver:<\/p>\n

\"plantilla<\/p>\n

El problema es si el cliente de correo no es capaz de hacer caso a estas indicaciones<\/p>\n

\"pregunta\"<\/div>\n
\u00bfC\u00f3mo lo har\u00edamos entonces?<\/strong><\/div>\n

Bueno, la opci\u00f3n m\u00e1s segura y soportada ampliamente por la mayor\u00eda de clientes de correo es utilizar estilos \u00abinline<\/em>\u00bb<\/p>\n

\"pregunta\"<\/div>\n
\u00bfQu\u00e9 es esto de estilos inline?<\/strong><\/div>\n

Simplemente se trata de definir los estilos que queremos aplicar \u00abdentro<\/em>\u00bb del propio elemento al que se deben de aplicar, as\u00ed:<\/p>\n

\"plantilla<\/p>\n

Aqu\u00ed ves que dentro de la etiqueta \u00abtd<\/em>\u00bb hay una etiqueta \u00abstyle<\/em>\u00bb con los diferentes estilos que queremos aplicar.<\/p>\n

Aqu\u00ed no hay error posible, el elemento incluye los estilos que queremos aplicar, de forma que se ver\u00e1n, por ejemplo en Gmail:<\/p>\n

\"plantilla<\/p>\n

La soluci\u00f3n m\u00e1s efectiva entonces esta clara.<\/p>\n

Tenemos que incluir dentro de cada elemento los estilos que queremos que tenga.<\/p>\n

Esto, si lo tenemos en cuenta mientras creamos la plantilla de newsletter no es demasiado dif\u00edcil.<\/p>\n

Pero si queremos hacerlo cuando ya tenemos la plantilla terminada, eso ya es otra cosa.<\/p>\n

Y nos puede llevar bastante tiempo.<\/p>\n

Estamos ante el caso de que la soluci\u00f3n m\u00e1s efectiva es tambi\u00e9n la que m\u00e1s trabajo nos puede dar.<\/p>\n

Afortunadamente …<\/h3>\n

Hay herramientas que hacen este trabajo de forma autom\u00e1tica por nosotros.<\/p>\n

Es el caso de Premailer\u00a0<\/strong><\/p>\n

\"plantilla<\/a><\/p>\n

Una herramienta muy f\u00e1cil de utilizar que pasar\u00e1 los estilos de nuestra plantilla de newsletter al formato \u00abinline<\/em>\u00ab.<\/p>\n

Lo hacemos en 3 pasos muy r\u00e1pidos:<\/p>\n

1) Pegamos nuestro c\u00f3digo donde pone \u00abPaste HTML as the source\u00bb<\/strong><\/div>\n

\"plantilla<\/p>\n

2) Hacemos click en el bot\u00f3n \u00absubmit\u00bb<\/strong><\/div>\n

\"plantilla<\/p>\n

3) Y en la siguiente p\u00e1gina, donde indica \u00abClick to view the html results\u00bb encontraremos nuestro c\u00f3digo preparado, listo para copiar y pegar en Mailrelay<\/strong><\/div>\n

\"plantillas<\/p>\n

\u00bfHa sido f\u00e1cil verdad?<\/strong><\/p>\n

Sin duda es una herramienta muy \u00fatil que te puede ayudar a solucionar muchos problemas de visualizaci\u00f3n que tengas en tus plantillas de newsletter.<\/p>\n

Pero cuidado, no funciona en el 100% de los casos, no es capaz de corregir todos los problemas de todas las newsletters.<\/p>\n

Tampoco va a cambiar el c\u00f3digo base HTML (lo que coment\u00e1bamos en el punto 3), no llega a corregir tanto, esta parte ser\u00eda m\u00e1s dif\u00edcil. Pero para lo que hemos comentado va genial y puede ahorrarte mucho trabajo.<\/p>\n

Antes de terminar me gustar\u00eda recomendarte otro art\u00edculo complementario de estos temas, se trata de \u00abhablemos seriamente de plantillas de email marketing<\/a>\u00ab. \u00a0Y un v\u00eddeo donde te ense\u00f1o como dise\u00f1ar una newsletter, con el proceso paso a paso:<\/p>\n