Uma boa diagrama\u00e7\u00e3o nas newsletters tem um impacto significativo na percep\u00e7\u00e3o da marca, na taxa de abertura, na taxa de cliques e, em \u00faltima inst\u00e2ncia, na efic\u00e1cia da campanha de email marketing.<\/p>\n
Alguns dos aspectos-chave de uma diagrama\u00e7\u00e3o eficaz s\u00e3o um design simples e limpo, a adapta\u00e7\u00e3o a dispositivos m\u00f3veis, a otimiza\u00e7\u00e3o do tempo de carregamento e a apresenta\u00e7\u00e3o correta de imagens e elementos visuais.<\/p>\n
Coisas a levar em conta na hora de criar o design de um email<\/h2>\n
Vamos direto ao ponto para entrar de cabe\u00e7a no assunto.<\/p>\n
Vou dizer agora mesmo algumas coisas que voc\u00ea deve levar em conta e que ser\u00e3o vitais para que os emails que voc\u00ea enviar a partir de agora ajudem a converter mais:<\/span><\/p>\n As imagens pesam. Disso voc\u00ea n\u00e3o pode duvidar nem por um instante. Otimizar as imagens para email marketing \u00e9 crucial para que os seus envios n\u00e3o fiquem lentos.<\/p>\n Se ficarem lentos, isso pode prejudicar a visibilidade do email (ou simplesmente fazer com que ele nem seja exibido), e isso pode ser um problema grave, especialmente nas convers\u00f5es.<\/p>\n Existem muitas ferramentas de email marketing<\/strong><\/a> que podem ajudar voc\u00ea nessa tarefa. Use-as e otimize as imagens imediatamente.<\/p>\n Dizem que uma imagem vale mais que mil palavras. E embora eu n\u00e3o concorde totalmente, \u00e9 verdade que elas ajudam muito.<\/p>\n Se voc\u00ea colocar imagens que combinem com o texto do email, como por exemplo:<\/p>\n Com certeza, voc\u00ea vai chamar mais a aten\u00e7\u00e3o e suas convers\u00f5es ser\u00e3o maiores.<\/p>\n Seguindo o racioc\u00ednio anterior, se voc\u00ea insere imagens de acordo com o conte\u00fado do seu email, o texto tamb\u00e9m precisa chamar a aten\u00e7\u00e3o.<\/p>\n \u00c9 a melhor maneira de fazer com que tanto as imagens quanto o texto consigam chamar a aten\u00e7\u00e3o do assinante. Consequentemente, ser\u00e1 poss\u00edvel conseguir melhores resultados, porque aqui entra em a\u00e7\u00e3o a persuas\u00e3o<\/a>.<\/p>\n E quando falo de texto, me refiro a todo o conte\u00fado: desde o t\u00edtulo at\u00e9 o \u00faltimo ponto que voc\u00ea escrever.<\/p>\n Mas aten\u00e7\u00e3o: para colocar o assinante no clima, o melhor \u00e9 que o t\u00edtulo seja bem vis\u00edvel e contenha uma mensagem clara, concisa e que destaque os pontos mais fortes da sua promo\u00e7\u00e3o.<\/p>\n Nas duas \u00faltimas se\u00e7\u00f5es, destaquei a import\u00e2ncia das imagens. E realmente \u00e9 assim. No entanto, os designs simples, ou seja, sem imagens, tamb\u00e9m funcionam<\/span>.<\/p>\n Por qu\u00ea? Porque, dependendo das suas inten\u00e7\u00f5es, \u00e9 prefer\u00edvel fazer uma coisa ou outra.<\/p>\n Por exemplo, nos envios promocionais o ideal \u00e9 que o email seja muito visual, porque a inten\u00e7\u00e3o \u00e9 persuadir o assinante a fazer depois uma compra, um cadastro ou uma reserva.<\/p>\n No entanto, se o que voc\u00ea procura \u00e9 proximidade, dialogar diretamente com o leitor ou expressar alguma ideia sua, a simplicidade \u00e9 a chave.<\/p>\n N\u00e3o \u00e9 preciso persuadir com imagens, voc\u00ea j\u00e1 faz isso com as palavras.<\/p>\n Nesse caso, o design simples pode ser ideal para blogueiros<\/strong> embora, como \u00e9 l\u00f3gico, cada um possa ter o seu ponto de vista.<\/p>\n Todas as dicas anteriores valem ouro, porque podem fazer a diferen\u00e7a na newsletter que voc\u00ea criar.<\/p>\n No entanto, a estrutura \u00e9 determinante<\/strong>. \u00c9 ela que ajudar\u00e1 o assinante a entender, desde o primeiro momento, a mensagem que voc\u00ea pretende transmitir.<\/p>\n Para isso, voc\u00ea pode seguir algumas diretrizes que ajudar\u00e3o a criar a newsletter ideal:<\/p>\n Mas de nada adianta fazer uma boa newsletter se depois voc\u00ea n\u00e3o tiver seus assinantes bem segmentados<\/strong>.<\/p>\n \n As newsletters devem ter um design simples, que permita a visualiza\u00e7\u00e3o correta em todos os clientes de email, bem como em diferentes plataformas.<\/p>\n Recomendamos que, ao diagramar sua newsletter, voc\u00ea use fontes padr\u00e3o, fundos de cores lisas e reduza o uso de imagens em favor do texto.<\/p>\n Lembre-se de que, quanto mais leves forem as suas newsletters, mais r\u00e1pido ser\u00e1 o download. N\u00e3o \u00e9 conveniente que o peso do seu HTML seja maior que 1 MB.<\/p>\n A simplicidade no design de uma newsletter \u00e9 crucial para manter a aten\u00e7\u00e3o do leitor e garantir uma leitura f\u00e1cil e confort\u00e1vel.<\/p>\n Um design simples e limpo facilita a identifica\u00e7\u00e3o dos elementos-chave do conte\u00fado e evita a sobrecarga visual, que pode levar os destinat\u00e1rios a parar de ler ou at\u00e9 a cancelar a inscri\u00e7\u00e3o.<\/p>\n Al\u00e9m disso, um design simples costuma ser mais f\u00e1cil de adaptar a diferentes dispositivos e clientes de email.<\/p>\n Cada vez mais pessoas acessam seus emails por dispositivos m\u00f3veis, por isso \u00e9 fundamental garantir que as newsletters fiquem boas em celulares e tablets.<\/p>\n Um design responsivo se adapta automaticamente a diferentes tamanhos de tela, garantindo uma experi\u00eancia de leitura ideal para todos os usu\u00e1rios.<\/p>\n Para conseguir isso, \u00e9 importante usar um design fluido, usar tamanhos de fonte leg\u00edveis e evitar elementos que possam causar problemas em dispositivos m\u00f3veis<\/strong>, como imagens grandes ou elementos interativos complexos.<\/p>\n O tempo de carregamento \u00e9 um fator cr\u00edtico na experi\u00eancia do usu\u00e1rio e pode afetar as taxas de abertura e a intera\u00e7\u00e3o com a newsletter.<\/p>\n Um design simples e leve, com imagens otimizadas e sem elementos desnecess\u00e1rios, ajuda a reduzir o tempo de carregamento.<\/p>\n Isso \u00e9 especialmente importante em dispositivos m\u00f3veis, onde a conex\u00e3o com a internet pode ser mais lenta e os usu\u00e1rios costumam ser menos tolerantes a esperar que o conte\u00fado carregue.<\/p>\n Para reduzir o tempo de carregamento, \u00e9 importante minimizar o uso de imagens grandes, evitar arquivos multim\u00eddia e compactar o c\u00f3digo HTML sempre que poss\u00edvel.<\/strong><\/p>\n \n O HTML que voc\u00ea usar deve ser o mais simples poss\u00edvel, evitando scripts, estilos, efeitos, formul\u00e1rios etc.<\/p>\n Suas newsletters devem incluir na mensagem vers\u00f5es em HTML e em texto simples.<\/p>\n Por padr\u00e3o, o sistema Mailrelay<\/strong> gera a mensagem de texto simples a partir da mensagem HTML, o que \u00e9 mais eficaz, j\u00e1 que a diferen\u00e7a entre os dois textos pode levar a um aumento do spam score.<\/p>\n O uso de HTML puro nas newsletters oferece v\u00e1rias vantagens que contribuem para maior compatibilidade e entregabilidade em diferentes clientes de email e dispositivos. Algumas dessas vantagens s\u00e3o:<\/strong><\/p>\n Embora o uso de CSS e JavaScript possa oferecer vantagens em termos de design e funcionalidade, tamb\u00e9m pode causar problemas nas newsletters pelos seguintes motivos:<\/p>\n Em resumo, \u00e9 recomend\u00e1vel evitar o uso de CSS e JavaScript externos nas newsletters e optar por HTML puro sempre que poss\u00edvel, para garantir maior compatibilidade, entregabilidade e uma melhor experi\u00eancia do usu\u00e1rio.<\/p>\n \n Apesar do avan\u00e7o que representou o surgimento do HTML5 e do CSS3, os clientes de email ainda n\u00e3o incorporaram totalmente essas tecnologias e continuam usando tabelas<\/strong> na codifica\u00e7\u00e3o do HTML.<\/p>\n Por isso, recomendamos que voc\u00ea sempre diagrame sua newsletter usando tabelas, para evitar resultados inesperados.<\/p>\n Embora no design web moderno as divs e o uso de folhas de estilo em cascata (CSS) sejam prefer\u00edveis por sua flexibilidade e facilidade de manuten\u00e7\u00e3o, no caso das newsletters as tabelas continuam sendo a op\u00e7\u00e3o mais confi\u00e1vel.<\/p>\n O principal motivo \u00e9 a compatibilidade e a consist\u00eancia entre os diferentes clientes de email e dispositivos.<\/p>\n Alguns dos benef\u00edcios de usar tabelas em vez de divs nas newsletters s\u00e3o:<\/strong><\/p>\n Para aproveitar ao m\u00e1ximo as tabelas na diagrama\u00e7\u00e3o de newsletters, leve em conta as seguintes dicas:<\/p>\n \n Muitos clientes de email n\u00e3o exibem o seu email em tela cheia, e sim por meio de um painel de pr\u00e9-visualiza\u00e7\u00e3o com uma largura de aproximadamente 600 px.<\/p>\n Voc\u00ea tamb\u00e9m deve ter em mente que as imagens com largura maior t\u00eam mais chances de ser consideradas spam<\/a>.<\/p>\n \u00c9 importante respeitar essa medida para que as suas newsletters sejam visualizadas corretamente.<\/p>\n O principal motivo pelo qual se recomenda n\u00e3o ultrapassar os 600px de largura \u00e9 a adaptabilidade.<\/p>\n A maioria dos clientes de email e dos dispositivos m\u00f3veis, como celulares e tablets, tem limita\u00e7\u00f5es quanto \u00e0 largura m\u00e1xima que podem exibir.<\/p>\n Ao manter sua newsletter dentro dos 600px de largura, voc\u00ea garante que ela seja compat\u00edvel com a maioria das plataformas e seja exibida corretamente em todos os dispositivos, evitando problemas de rolagem horizontal e garantindo uma experi\u00eancia de usu\u00e1rio ideal.<\/p>\n Outro motivo para manter a largura da sua newsletter abaixo dos 600px \u00e9 a legibilidade e a experi\u00eancia do usu\u00e1rio.<\/p>\n Um design mais estreito facilita a leitura do conte\u00fado em dispositivos m\u00f3veis e desktops, j\u00e1 que os usu\u00e1rios n\u00e3o precisar\u00e3o rolar horizontalmente para ler todo o conte\u00fado.<\/p>\n Al\u00e9m disso, ao limitar a largura, voc\u00ea pode controlar melhor o design e a disposi\u00e7\u00e3o dos elementos da sua newsletter, o que facilita a cria\u00e7\u00e3o de um layout limpo e organizado, f\u00e1cil de acompanhar para os seus assinantes.<\/p>\n Em \u00faltima inst\u00e2ncia, manter a largura da sua newsletter dentro dos 600px melhora a legibilidade<\/strong> e garante uma experi\u00eancia de usu\u00e1rio agrad\u00e1vel para os seus assinantes.<\/p>\n \n Alguns clientes de email n\u00e3o suportam a tag style no cabe\u00e7alho do email.<\/p>\n Para evitar esse problema, \u00e9 mais conveniente usar estilos em linha.<\/p>\n Os estilos em linha oferecem v\u00e1rios benef\u00edcios em compara\u00e7\u00e3o com o uso de folhas de estilo em cascata (CSS) externas ou internas:<\/p>\n Para aplicar estilos em linha no HTML, basta adicionar o atributo \u201cstyle\u201d \u00e0s tags HTML e definir as propriedades CSS correspondentes.<\/p>\n Aqui est\u00e1 um exemplo de como aplicar estilos em linha a um elemento:<\/p>\n \n Quando voc\u00ea usa imagens fatiadas ou uma imagem ao lado de outra, com uma estrutura de tabela, \u00e9 necess\u00e1rio que cada imagem tenha o estilo \u201cdisplay:block\u201d.<\/p>\n Isso porque clientes de email como o Gmail geram automaticamente um espa\u00e7o em branco indesejado entre as imagens, desmontando o design das nossas newsletters, exatamente como voc\u00ea pode ver a seguir:<\/p>\n \n Os filtros antispam veem os anexos com maus olhos, ainda mais se forem doc, exe, zip etc., que podem conter v\u00edrus.<\/p>\n \u00c9 recomend\u00e1vel fazer o upload dos anexos para um FTP e inserir um link no corpo da mensagem para que os destinat\u00e1rios possam baix\u00e1-los.<\/p>\n Al\u00e9m disso, assim voc\u00ea ter\u00e1 nas estat\u00edsticas um feedback de quem abriu o arquivo.<\/p>\n \n Para reduzir o peso das suas imagens sem perder qualidade, \u00e9 necess\u00e1rio compact\u00e1-las em um programa de edi\u00e7\u00e3o ou ent\u00e3o voc\u00ea pode usar uma ferramenta como, por exemplo, o Kraken.io, um aplicativo web que funciona \u00e0s mil maravilhas.<\/p>\n \n Para que o seu site esteja em conformidade com a lei, ele deve conter:<\/p>\n \n \u00c9 necess\u00e1rio testar suas newsletters em diferentes clientes de email antes de enviar um mailing<\/a>.<\/p>\n Dessa forma, voc\u00ea garante que os seus destinat\u00e1rios as visualizem corretamente em todos os casos. Com o Mailrelay<\/strong> voc\u00ea pode fazer envios de teste e garantir que suas newsletters cheguem sem inconvenientes.<\/p>\n Realizar testes em diferentes dispositivos (computadores, tablets e smartphones) e clientes de email (Gmail, Outlook, Yahoo Mail etc.) permitir\u00e1 detectar poss\u00edveis problemas de design, formata\u00e7\u00e3o ou compatibilidade. Alguns aspectos-chave a levar em conta ao realizar testes s\u00e3o:<\/p>\n Existem diversas ferramentas e servi\u00e7os que podem ajudar voc\u00ea a testar e otimizar suas newsletters antes de envi\u00e1-las aos seus assinantes. Alguns exemplos incluem:<\/strong><\/p>\n Ao realizar testes exaustivos e usar ferramentas e servi\u00e7os adequados, voc\u00ea poder\u00e1 garantir que suas newsletters cheguem aos seus assinantes com a melhor apar\u00eancia e funcionalidade poss\u00edveis.<\/p>\n \n A diagrama\u00e7\u00e3o de uma newsletter \u00e9 um elemento-chave para garantir o sucesso das suas campanhas de email marketing. <\/p>\n Um design bem estruturado, adapt\u00e1vel e atraente n\u00e3o s\u00f3 facilita a leitura e a compreens\u00e3o do conte\u00fado por parte dos seus assinantes, como tamb\u00e9m melhora a entregabilidade e a taxa de abertura dos seus emails.<\/p>\n Ao aplicar as dicas b\u00e1sicas e as melhores pr\u00e1ticas de diagrama\u00e7\u00e3o apresentadas neste artigo, voc\u00ea poder\u00e1 criar newsletters<\/a> que se destaquem na caixa de entrada dos seus assinantes, ofere\u00e7am uma experi\u00eancia de usu\u00e1rio agrad\u00e1vel e, em \u00faltima inst\u00e2ncia, promovam a intera\u00e7\u00e3o e o engajamento com a sua marca.<\/p>\n N\u00e3o se esque\u00e7a de manter sempre uma atitude proativa na otimiza\u00e7\u00e3o e no aprimoramento das suas newsletters. <\/p>\n \u00c0 medida que as tecnologias e as tend\u00eancias mudam, \u00e9 importante estar por dentro das novidades em design e diagrama\u00e7\u00e3o para garantir que suas campanhas de email marketing continuem sendo eficazes e relevantes para os seus assinantes. <\/p>\n Al\u00e9m disso, n\u00e3o subestime a import\u00e2ncia de monitorar e analisar as m\u00e9tricas das suas campanhas para identificar oportunidades de melhoria e adaptar suas estrat\u00e9gias de acordo.<\/p>\n Se voc\u00ea quer ir um passo al\u00e9m no design, d\u00ea uma olhada no nosso gloss\u00e1rio sobre design de email modular<\/a> e nas dicas para um bom template de email<\/a>.<\/p>\n No artigo de hoje, contamos as 10 dicas essenciais para diagramar sua newsletter.<\/p>\n","protected":false},"author":1,"featured_media":37950,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[561,854],"tags":[],"class_list":["post-97030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-marketing-pt","category-modelos-e-design-de-newsletter"],"yoast_head":"\n\ud83d\udccc Fique de olho no peso das imagens<\/h3>\n
\ud83d\udccc Insira imagens que combinem com o conte\u00fado do email<\/h3>\n
\n
\ud83d\udccc Escreva um texto que chame a aten\u00e7\u00e3o<\/h3>\n
\ud83d\udccc O design simples tamb\u00e9m funciona<\/h3>\n
\ud83d\udccc Estrutura da newsletter ideal<\/h3>\n
\n
![\"Escolha](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2017\/05\/como-hacer-una-newsletter.jpg\")
<\/figure>\n10 dicas para diagramar suas newsletters<\/strong>: medidas, tamanhos\u2026<\/h2>\n
1- Escolha designs simples, responsivos e leves<\/strong><\/h3>\n
\u25ba A import\u00e2ncia da simplicidade no design<\/strong><\/h4>\n
\u25ba Garantir a compatibilidade com dispositivos m\u00f3veis<\/strong><\/h4>\n
\u25ba Reduzir o tempo de carregamento<\/strong><\/h4>\n
![\"Use](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-1.jpg\" "\\"Use")
<\/figure>\n<\/div>\n2- Use HTML puro<\/strong><\/h3>\n
\u25ba Vantagens de usar HTML puro em newsletters<\/strong><\/h4>\n
\n
\u25ba Evitar o uso de CSS e JavaScript externos<\/strong><\/h4>\n
\n
![\"Aproveite](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-2.jpg\" "\\"Aproveite")
<\/figure>\n<\/div>\n3- Diagrame sua newsletter usando tabelas<\/strong><\/h3>\n
\u25ba Por que usar tabelas em vez de divs<\/strong><\/h4>\n
\n
\u25ba Dicas para o uso eficiente de tabelas na diagrama\u00e7\u00e3o<\/strong><\/h4>\n
\n
![\"Use](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-3.jpg\" "\\"Use")
<\/figure>\n<\/div>\n4- Medidas e tamanho: n\u00e3o ultrapasse os 600px de largura<\/strong><\/h3>\n
\u25ba Adaptabilidade a diferentes dispositivos e clientes de email<\/strong><\/h4>\n
\u25ba Legibilidade e experi\u00eancia do usu\u00e1rio<\/strong><\/h4>\n
![\"N\u00e3o](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-4.jpg\" "\\"N\u00e3o")
<\/figure>\n<\/div>\n5- Use estilos em linha (Inline Styles)<\/strong><\/h3>\n
\u25ba Benef\u00edcios dos estilos em linha em newsletters<\/strong><\/h4>\n
\n
\u25ba Como aplicar estilos em linha no HTML<\/strong><\/h4>\n
![\"Codifique](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-5.jpg\" "\\"Codifique")
<\/figure>\n<\/div>\n6- Evite resultados inesperados nas suas imagens<\/strong><\/h3>\n
\u25ba Como otimizar as imagens para diferentes clientes de email<\/strong><\/h4>\n
\n
\u25ba Usar imagens de alta qualidade e bem formatadas<\/strong><\/h4>\n
\n
![\"Exemplo](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-6.jpg\" "\\"Exemplo")
<\/figure>\n<\/div>\n7- Evite anexar arquivos<\/strong><\/h3>\n
\u25ba Problemas de seguran\u00e7a e entregabilidade relacionados a arquivos anexos<\/strong><\/h4>\n
\n
\u25ba Alternativas para compartilhar arquivos em newsletters<\/strong><\/h4>\n
\n
![\"Evite](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-7.jpg\" "\\"Evite")
<\/figure>\n<\/div>\n8- Otimize suas imagens<\/strong><\/h3>\n
\u25ba Redu\u00e7\u00e3o de tamanho e formato adequado<\/strong><\/h4>\n
\n
\u25ba T\u00e9cnicas de otimiza\u00e7\u00e3o para melhorar a velocidade de carregamento<\/strong><\/h4>\n
\n
![\"Otimize](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-8.jpg\" "\\"Otimize")
<\/figure>\n<\/div>\n9- Inclua sempre um texto legal<\/strong><\/h3>\n
\n
\u25ba Cumprir as regulamenta\u00e7\u00f5es e leis aplic\u00e1veis<\/strong><\/h4>\n
\n
![\"Inclua](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-9.jpg\" "\\"Inclua")
<\/figure>\n<\/div>\n10- Certifique-se de testar<\/strong><\/h3>\n
\u25ba Testes em diferentes dispositivos e clientes de email<\/strong><\/h4>\n
\n
\u25ba Ferramentas e servi\u00e7os para testar newsletters<\/strong><\/h4>\n
\n
![\"Certifique-se](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2014\/08\/10-claves-para-maquetar-tus-newsletters-10.jpg\" "\\"Certifique-se")
<\/figure>\n<\/div>\nConclus\u00e3o: criar newsletters eficazes com uma boa diagrama\u00e7\u00e3o<\/strong>, medidas e tamanho<\/h2>\n
![\"Foto](\"https:\/\/mailrelay.com\/wp-content\/uploads\/2022\/07\/jose-argudo-1.jpg\")
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"