{"id":9182,"date":"2018-11-07T11:10:54","date_gmt":"2018-11-07T10:10:54","guid":{"rendered":"https:\/\/www.makingscience.com\/blog\/como-hacer-que-tu-newsletter-se-visualice-bien-a-tu-clientes\/"},"modified":"2018-11-07T11:10:54","modified_gmt":"2018-11-07T10:10:54","slug":"como-hacer-que-tu-newsletter-se-visualice-bien-a-tu-clientes","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/como-hacer-que-tu-newsletter-se-visualice-bien-a-tu-clientes\/","title":{"rendered":"C\u00f3mo hacer que tu newsletter se visualice correctamente en la mayor\u00eda de clientes de correo"},"content":{"rendered":"
C\u00f3mo hacer que tu newsletter se visualice correctamente en la mayor\u00eda de clientes de correo<\/div>\n
ZZZ<\/div>\n
Si est\u00e1s familiarizado con el env\u00edo de campa\u00f1as a trav\u00e9s de newsletters, sabr\u00e1s ya que uno de los principales problemas al que siempre nos enfrentamos, es el hecho de conseguir que los emails se visualicen de forma correcta en la mayor\u00eda de clientes de correo.<\/strong><\/span> Est\u00e1 dificultad surge por la forma en la que los clientes de correo interpretan el HTML y el CSS, que son los dos lenguajes con los que construimos los emails. A diferencia de los navegadores actuales, en los que se ha hecho un gran trabajo de estandarizaci\u00f3n, los clientes de correo renderizan el HTML, y sobre todo el CSS, de forma muy diferente entre ellos, dejando sin funcionar algunas etiquetas HTML y muchas propiedades CSS.<\/span> Una vez conocido el heterog\u00e9neo contexto tecnol\u00f3gico en el que trabajamos, podemos trazar nuestra estrategia a la hora de dise\u00f1ar y maquetar emails.<\/strong> Nosotros planteamos una basada en dos puntos fundamentales:<\/span> <\/p>\n
    \n
  • Enfoque inicial.<\/strong><\/li>\n
  • Adecuaci\u00f3n del c\u00f3digo al contexto tecnol\u00f3gico.<\/strong><\/li>\n<\/ul>\n

    Enfoque inicial<\/span><\/h2>\n

    Es evidente que una newsletter es un medio muy eficaz a la hora de difundir campa\u00f1as u otro tipo de informaci\u00f3n entre nuestros clientes, pero a veces tendemos a tratarla como si se tratase de una p\u00e1gina web y esto es un error. Por dos motivos: uno, el hecho ya comentado de la deficiencia a la hora de interpretar el lenguaje HTML\/CSS por parte de los diferentes clientes de correo. Otro, que la forma de recibir, abrir, leer, interactuar y cerrar los emails es diferente, mucho m\u00e1s r\u00e1pida. <\/span> \u00bfY esto c\u00f3mo influye a la hora enfocar la creaci\u00f3n de un email? Quiz\u00e1s una buena forma de resumirlo sea con una frase: \u201cHazlo simple\u201d.<\/strong><\/span> <\/p>\n

      \n
    • Informaci\u00f3n breve y concisa.<\/span><\/li>\n
    • Enlace(s) a la p\u00e1gina objetivo de nuestra campa\u00f1a bien visible.<\/span><\/li>\n
    • Dise\u00f1o sencillo: ancho de 600-800 px y grid a una columna (preferiblemente).<\/span><\/li>\n<\/ul>\n

      De esta forma nos aseguramos de que el usuario va a leer, comprender e interesarse por nuestro mensaje y de que, al evitar una maquetaci\u00f3n compleja, la visualizaci\u00f3n del email sea siempre correcta en la mayor\u00eda de clientes de correo. <\/span> <\/p>\n

      Adecuaci\u00f3n del c\u00f3digo al contexto tecnol\u00f3gico<\/span><\/h2>\n

      Maquetar de forma correcta un email es un trabajo en el que intervienen infinidad de factores:<\/strong> qu\u00e9 queremos comunicar, c\u00f3mo lo vamos a dise\u00f1ar, si tenemos m\u00e9tricas de otras campa\u00f1as, a qu\u00e9 clientes de correo vamos a enviar nuestra campa\u00f1a, etc.<\/span> Pero aun as\u00ed, existen reglas y recomendaciones que son comunes a todos los emails para newsletters.<\/span> <\/p>\n

      Reglas b\u00e1sicas<\/strong><\/h3>\n
        \n
      • Siempre debemos maquetar con tablas<\/b>. Desde hace muchos a\u00f1os el uso de tablas en web ha quedado reducido a su funci\u00f3n inicial: organizar datos en filas y columnas, pero maquetar un email es como comprar un billete de regreso a 2003\u2026 El motivo es sencillo, como hay clientes que no soportan la etiqueta <\/span><div><\/span> y tambi\u00e9n hay clientes que no soportan las propiedades <\/span>float<\/span> y <\/span>position<\/span> , la \u00fanica forma que tenemos de que nuestra maquetaci\u00f3n se mantenga en todos los clientes de correo, es utilizar las tablas como elemento estructural (incluso anidando tablas dentro de tablas para mantener la consistencia de los diferentes elementos de nuestro email) <\/span><\/li>\n
      • Debemos usar estilos CSS en l\u00ednea<\/b>. Esto no significa que no usemos la etiqueta <\/span><style type=\u00bbtext\/css\u00bb><\/span> en el head de nuestro email para incluir estilos, pero como el soporte de \u00e9sta por parte de los clientes no es total, declarar estilos en las etiquetas de HTML a trav\u00e9s de <\/span>style=\u00bb\u00bb<\/span>, es la \u00fanica forma que tenemos de asegurarnos de que se apliquen correctamente en la mayor\u00eda de clientes. Usar una hoja de estilos externa a trav\u00e9s de la etiqueta <\/span><link><\/span> no es buena idea, ya que su soporte en clientes es muy reducido.<\/span><\/li>\n
      • No podemos usar Javascript<\/b>. Por un tema de seguridad, la mayor\u00eda de clientes de correo bloquean el c\u00f3digo de Javascript. Si no hiciesen esto, \u201clos malos\u201d tendr\u00edan la posibilidad de inyectar c\u00f3digo malicioso en nuestros dispositivos.<\/span><\/li>\n<\/ul>\n

        Recomendaciones<\/span><\/h3>\n
          \n
        • Usa fuentes tipogr\u00e1ficas del sistema<\/b> (Arial, Helvetica, Georgia, Times New Roman, etc.). Esto no significa que no puedes usar fuentes propias, pero si lo haces, que sea teniendo claro que muchos clientes de correo no las van a mostrar e, indicando en tus estilos, cu\u00e1les son las fuentes del sistema que marcas como alternativa: <\/span>font-family: ‘Tu fuente’, Helvetica, Arial, sans-serif;<\/span><\/li>\n
        • Evita confiar en las im\u00e1genes.<\/b> Como muchos clientes bloquean de entrada las im\u00e1genes de un email, no es buena idea dejar en sus manos toda el peso de la comunicaci\u00f3n. Para esto podemos:<\/span>\n
            \n
          • Alternar siempre texto e imagen<\/b>. Hay empresas que env\u00edan newsletters s\u00f3lo con im\u00e1genes, mala idea\u2026<\/span><\/li>\n
          • No usar una imagen como primer elemento de la newsletter<\/b>. As\u00ed en el caso de que las im\u00e1genes est\u00e9n bloqueadas, el usuario podr\u00e1 ver de forma r\u00e1pida sobre qu\u00e9 trata el email.<\/span><\/li>\n
          • Usar el atributo <\/b>alt<\/b>. De esta forma, aunque de inicio no se cargue la imagen, al menos veremos un texto que la describe.<\/span><\/li>\n
          • Usar pi\u00e9s de im\u00e1genes<\/b>. La idea es la misma que la del punto anterior, pero en este caso al contrario que el <\/span>alt<\/span>, que no es soportado por todos los clientes de correo, esta t\u00e9cnica es 100% segura.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

            Outlook 2007\u201316<\/span><\/h2>\n

            \u201cOutlook 2007-16 is the new IE8<\/span><\/i>\u201d<\/span> <\/span>An\u00f3nimo.<\/span> Cualquier historia que se precie debe tener un villano y en esta este papel lo representa el Outlook 2007-2016. Atr\u00e1s quedan ya los tiempos en los que Internet Explorer 8 (y versiones anteriores) resultaba un dolor de cabeza a la hora de desarrollar p\u00e1ginas webs, pero, quiz\u00e1s como recordatorio de aquella \u00e9poca, en el campo de la maquetaci\u00f3n de emails aun tenemos el Outlook 2007-2016.<\/span> Este cliente es con diferencia el que m\u00e1s problemas de visualizaci\u00f3n genera y esto se debe fundamentalmente a que usa Word (\u00a1el procesador de texto!) para renderizar el HTML y CSS de los emails, lo que hace que el soporte de muchas propiedades sea nulo.<\/span> Bueno, realmente no es tan grave si se sabe lidiar con \u00e9l, pero esto mejor lo dejamos para otro post! <\/span><\/div>\n","protected":false},"excerpt":{"rendered":"

            C\u00f3mo hacer que tu newsletter se visualice correctamente en la mayor\u00eda de clientes de correo ZZZ Si est\u00e1s familiarizado con el env\u00edo de campa\u00f1as a trav\u00e9s de newsletters, sabr\u00e1s ya que uno de los principales problemas al que siempre nos enfrentamos, es el hecho de conseguir que los emails se visualicen de forma correcta en […]<\/p>\n","protected":false},"author":21,"featured_media":9183,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[910],"tags":[68],"class_list":["post-9182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology-ai-es","tag-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=9182"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9182\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/9183"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=9182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=9182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=9182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}