{"id":7352,"date":"2017-05-15T20:53:34","date_gmt":"2017-05-15T23:53:34","guid":{"rendered":"https:\/\/luizeof.com.br\/?p=5003"},"modified":"2019-10-21T12:32:32","modified_gmt":"2019-10-21T15:32:32","slug":"template-blank-email-mautic","status":"publish","type":"post","link":"https:\/\/powertic.com\/pt-br\/template-blank-email-mautic\/","title":{"rendered":"5 motivos para usar o template Blank em e-mails no Mautic"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Sempre que sou consultado sobre a estrutura de um e-mail, seja uma newsletter, um comunicado ou um simples e-mail transacional eu me deparo com alguns dilemas sobre layout, composi\u00e7\u00e3o, usabilidade e outros tantos itens que devem ser abordados e o template blank auxilia a minha decis\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo listo cinco itens que est\u00e3o na minha checklist e que talvez voc\u00ea n\u00e3o tenha notado no desenvolvimento dos seus e-mails com o template Blank nativo do <a href=\"\/pt-br?page_id=9574\">Mautic<\/a>. Vamos l\u00e1?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Seu e-mail e compat\u00edvel com os principais clientes de e-mail?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Segundo o&nbsp;<a href=\"https:\/\/emailclientmarketshare.com\/\" target=\"_blank\" rel=\"noopener\">relat\u00f3rio<\/a>&nbsp;do litmus ap\u00f3s monitorar mais de 1,2 bilh\u00f5es de e-mails em Abril de 2017, o cliente de e-mail do iPhone segue na lideran\u00e7a seguido com folga pelo Gmail e pelo cliente nativo do iPad. Incrivelmente o Outlook est\u00e1 com menos marketshare que o Apple Mail (para MacOS) seguido pelo cliente de e-mail nativo do Android. Estes n\u00fameros s\u00e3o baseados em estat\u00edsticas de&nbsp;todo o mundo. Recomendo que voc\u00ea adicione nos seus favoritos o&nbsp;<a href=\"https:\/\/emailclientmarketshare.com\/\" target=\"_blank\" rel=\"noopener\">website<\/a>&nbsp;com o relat\u00f3rio que \u00e9 atualizado mensalmente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com estes dados em m\u00e3os e baseado no cen\u00e1rio brasileiro onde Android e Outlook predominam, a pergunta \u00e9: Seu e-mail est\u00e1 compat\u00edvel com os principais clientes de e-mail?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para quem respondeu sim, reveja alguns pequenos itens:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Voc\u00ea alterou a fam\u00edlia de fontes do seu e-mail? Lembre-se que a maioria dos usu\u00e1rios personalizam o tamanho, peso e familia de fontes dos clientes de e-mail. Voc\u00ea esta sobrescrevendo esta prefer\u00eancia.<\/li><li>Voc\u00ea est\u00e1 montando seu e-mail pensando no mobile? Lembre-se que um e-mail simples e bem formatado segue o padr\u00e3o de renderiza\u00e7\u00e3o do cliente de e-mail. N\u00e3o force a barra.<\/li><li>Voc\u00ea est\u00e1 utilizando links de cancelamento de inscri\u00e7\u00e3o como \u00e9 solicitado pelas leis brasileiras? Lembre-se que muitos provedores barram e-mails que n\u00e3o possuem a possibilidade de cancelamento de inscri\u00e7\u00e3o.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Estes 3 itens s\u00e3o essenciais para a compatibilidade do seu e-mail. N\u00e3o durma no ponto pois por padr\u00e3o o template Blank cuida disso pra voc\u00ea \ud83d\ude09<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O template blank nativo do Mautic centraliza o conte\u00fado e aplica um layout de 600px para o conte\u00fado. Caso voc\u00ea n\u00e3o queira esse layout com 600px voc\u00ea pode utilizar a&nbsp;nossa alternativa de layout que remove 100% do layout padr\u00e3o do tema blank.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Baixe o Tema New Blank<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Remova toda a formata\u00e7\u00e3o padr\u00e3o dos e-mails do Mautic com este tema exclusivo desenvolvido pela Powertic.<\/p>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-default\"><a class=\"wp-block-button__link has-background has-luminous-vivid-orange-background-color\" href=\"https:\/\/mkt.powertic.com\/asset\/43:new-blank-theme\">Download do Tema New Blank<\/a><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/powertic.com\/pt-br\/wp-content\/uploads\/sites\/7\/2017\/11\/tema-new-blank.png\"><img decoding=\"async\" src=\"https:\/\/powertic.com\/wp-content\/uploads\/2019\/09\/tema-new-blank-1024x524.png\" alt=\"\" title=\"\"><\/a><figcaption>Clique na imagem para Ampliar&#8230;<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Voc\u00ea sabe como o Outlook e o Outlook.com funcionam? O Template Blank sabe!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Muitos sistemas de e-mail n\u00e3o prestam muita aten\u00e7\u00e3o no Outlook. O Template Blank do mautic \u00e9 compat\u00edvel com diversos padr\u00f5es do outlook e se eu fosse voc\u00ea pensaria duas vezes antes de abandon\u00e1-lo. Mas se voc\u00ea n\u00e3o \u00e9 conhecedor das limita\u00e7\u00f5es do outlook, sugiro que anote no seu checklist pessoal os seguintes itens:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>N\u00e3o h\u00e1 suporte para imagens em Background em DIV e TD (c\u00e9lulas)<\/li><li>N\u00e3o h\u00e1 suporte para Float ou Positions atrav\u00e9s de&nbsp;CSS<\/li><li>N\u00e3o h\u00e1 suporte para sombras em texto (ainda bem n\u00e3o \u00e9 mesmo?)<\/li><li>Suporte prec\u00e1rio e inconsistente para margin e padding<\/li><li>Suporte ainda mais prec\u00e1rio para Largura e Altura atrav\u00e9s de CSS<\/li><li>Problemas com Backgrounds em geral<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Sim, o outlook n\u00e3o \u00e9 capaz da maioria dos itens que torna nossos e-mails mais bonitos. Por isso sempre opte pelo simples \ud83d\ude09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fique atento com o bloqueio de imagens<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Enquanto o Google agora permite que imagens vindas de ambientes seguros sejam exibidas automaticamente, as \u00faltimas vers\u00f5es do Outlook para Windows e Mac bloqueiam imagens por padr\u00e3o. Portanto \u00e9 aconselh\u00e1vel que voc\u00ea trate de escrever atributos ALT consistentes e \u00fateis caso suas imagens sejam bloqueadas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veja um exemplo de um e-mail onde as imagens foram bloqueadas e nada pode ser aproveitado tornando o e-mail ileg\u00edvel:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/powertic.com\/wp-content\/uploads\/2019\/09\/jcrew-images-off.png\" alt=\"Veja um exemplo de um e-mail onde as imagens foram bloqueadas e nada pode ser aproveitado:\" title=\"\"><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Agora com um pouco mais de cuidado, voc\u00ea consegue compor e-mails com mais de 70% de texto de modo que se suas imagens s\u00e3o bloqueadas a sua mensagem \u00e9 consistente e n\u00e3o prejudica a experi\u00eancia do usu\u00e1rio. Veja:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/powertic.com\/wp-content\/uploads\/2019\/09\/exacttarget-images-off-aol-chrome.jpg\" alt=\"voc\u00ea consegue compor e-mails com mais de 70% de texto de modo que se suas imagens \" title=\"\"><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Bot\u00f5es compat\u00edveis com Mobile<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O template blank do <a href=\"\/?page_id=9536\">Mautic<\/a> fornece 3 tamanhos de bot\u00f5es que s\u00e3o totalmente compat\u00edveis com dispositivos m\u00f3veis. Nada \u00e9 mais irritante do que tentar tocar um link e acabar acessando o link ao lado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lembre-se tamb\u00e9m em dar \u00e1rea de respiro ao bot\u00e3o. Evite colocar texto logo acima ou abaixo para evitar uma sele\u00e7\u00e3o involunt\u00e1ria ou uma imagem muito pr\u00f3xima. Pense no seu usu\u00e1rio \ud83d\ude09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cuidados com o Preview Text<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Desde o Mautic 2.8 onde podemos utilizar um widget de c\u00f3digo no Email Builder ficou ainda mais f\u00e1cil incluir o texto de Preview nos seus e-mails. Existe uma dica muito interessante onde podemos inserir uma s\u00e9rie de espa\u00e7os em branco ap\u00f3s o preview para que outros textos n\u00e3o sejam visualizados. Segue o c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>&lt;div style=\"display: none; max-height: 0px; overflow: hidden;\"&gt; Aqui vai o seu preview text e abaixo os espa\u00e7os &lt;\/div&gt;<\/code> <code>&lt;div style=\"display: none; max-height: 0px; overflow: hidden;\"&gt; &nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp;\u200c&nbsp; &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Assim voc\u00ea consegue uma s\u00e9rie de espa\u00e7os em branco no preview do e-mail. Veja este exemplo:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/powertic.com\/wp-content\/uploads\/2019\/09\/hp-preview-text.png\" alt=\"Cuidados com o Preview Text\" title=\"\"><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Finalizando<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Espero que estas 5 dicas auxiliem sua campanhas de e-mail marketing e que voc\u00ea veja o template Blank com bons olhos \ud83d\ude09<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um abra\u00e7o e at\u00e9 mais!<\/p>","protected":false},"excerpt":{"rendered":"<p>Confira neste artigo 5 dicas imperd\u00edveis para a composi\u00e7\u00e3o e constru\u00e7\u00e3o de e-mails no Mautic para suas campanhas e newsletters com o template Blank<\/p>","protected":false},"author":4,"featured_media":43159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-7352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artigos-mautic"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/posts\/7352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/comments?post=7352"}],"version-history":[{"count":0,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/posts\/7352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/media\/43159"}],"wp:attachment":[{"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/media?parent=7352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/categories?post=7352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/powertic.com\/pt-br\/wp-json\/wp\/v2\/tags?post=7352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}