{"id":97030,"date":"2014-10-07T07:21:44","date_gmt":"2014-10-07T07:21:44","guid":{"rendered":"https:\/\/mailrelay.com\/blog\/2026\/09\/30\/as-10-dicas-basicas-para-diagramar-suas-newsletters\/"},"modified":"2026-11-01T01:08:15","modified_gmt":"2026-11-01T01:08:15","slug":"as-10-dicas-basicas-para-diagramar-suas-newsletters","status":"publish","type":"post","link":"https:\/\/mailrelay.com\/pt\/blog\/2014\/10\/07\/as-10-dicas-basicas-para-diagramar-suas-newsletters\/","title":{"rendered":"Medidas de uma newsletter: tamanho, largura e 10 dicas para diagram\u00e1-la bem"},"content":{"rendered":"\n

Quais medidas uma newsletter deve ter? Entre 600 e 640 pixels de largura, imagens com o dobro da resolu\u00e7\u00e3o e menos de 102 KB de HTML para que o Gmail n\u00e3o a corte.<\/p>\n\n\n\n

A altura n\u00e3o tem limite, mas o que importa precisa aparecer na primeira tela.<\/p>\n\n

Com essas tr\u00eas medidas, voc\u00ea j\u00e1 pode come\u00e7ar a diagramar. Mas uma newsletter que fica bem no seu computador pode quebrar no celular, no Outlook ou no modo escuro.<\/p>\n\n

Neste guia, voc\u00ea encontra a tabela completa de medidas, como o seu email aparece em cada programa de email e as 10 dicas para diagram\u00e1-lo sem surpresas.<\/p>\n\n\n

Medidas de uma newsletter: tabela de refer\u00eancia<\/h2>\n\n

Estas s\u00e3o as medidas de email marketing que recomendo em 2026. Elas servem tanto se voc\u00ea diagrama \u00e0 m\u00e3o em HTML quanto se usa um editor visual.<\/p>\n\n

Elemento<\/th>Medida recomendada<\/th>Por qu\u00ea<\/th><\/tr><\/thead>
Largura do email<\/td>600-640 px<\/td>Aparece inteiro no painel de leitura dos programas de desktop e se adapta bem ao celular<\/td><\/tr>
Altura do email<\/td>Sem limite fixo<\/td>O que decide se a pessoa continua lendo \u00e9 a primeira tela: uns 300-500 px<\/td><\/tr>
Imagem de cabe\u00e7alho<\/td>600 \u00d7 200-300 px (enviada com 1.200 px de largura)<\/td>Com o dobro da resolu\u00e7\u00e3o, fica n\u00edtida em telas retina<\/td><\/tr>
Imagens do corpo<\/td>A largura da sua coluna, enviadas com o dobro<\/td>Uma imagem de 300 px \u00e9 enviada com 600 px<\/td><\/tr>
Peso de cada imagem<\/td>Menos de 200 KB, como refer\u00eancia<\/td>Carrega r\u00e1pido mesmo com dados m\u00f3veis<\/td><\/tr>
Peso do HTML<\/td>Menos de 102 KB<\/td>Acima disso, o Gmail corta a mensagem e mostra “[Mensagem cortada]”<\/td><\/tr>
Tamanho da fonte do texto<\/td>16 px (m\u00ednimo de 14 px)<\/td>Abaixo de 13 px, o iPhone amplia a fonte e desconfigura o layout<\/td><\/tr>
Tamanho dos t\u00edtulos<\/td>22-28 px<\/td>Hierarquia clara sem ocupar metade da tela<\/td><\/tr>
Bot\u00f5es<\/td>Pelo menos 44 \u00d7 44 px<\/td>\u00c9 a \u00e1rea m\u00ednima de toque que a Apple recomenda para tocar com o dedo<\/td><\/tr>
Pr\u00e9-cabe\u00e7alho (preheader)<\/td>40-100 caracteres<\/td>\u00c9 o que aparece junto ao assunto na caixa de entrada<\/td><\/tr><\/tbody><\/table><\/figure>\n\n
\"Infográfico<\/figure>\n\n

Se voc\u00ea guardar s\u00f3 uma ideia, que seja esta: 600 px de largura e menos de 102 KB de HTML<\/strong>.<\/p>\n\n

Com isso, voc\u00ea evita a maioria dos problemas. As demais medidas refinam o resultado.<\/p>\n\n

Como a sua newsletter aparece em cada programa de email<\/h2>\n\n

Por que \u00e9 preciso diagramar um email com tanto cuidado se um site aparece bem em qualquer navegador? Porque cada programa de email interpreta o c\u00f3digo do seu jeito. E nem sempre da forma que voc\u00ea espera.<\/p>\n\n

Segundo o relat\u00f3rio de participa\u00e7\u00e3o de mercado da Litmus de setembro de 2026, o Apple Mail registra 76,56% das aberturas.<\/p>\n\n

Em seguida v\u00eam o Gmail, com 16,10%, e o Outlook para desktop, com 3,48%.<\/p>\n\n

Aten\u00e7\u00e3o ao n\u00famero da Apple: a prote\u00e7\u00e3o de privacidade do Apple Mail abre os emails automaticamente e o infla. Mesmo assim, ele d\u00e1 uma ideia de onde voc\u00ea precisa testar.<\/p>\n\n

Programa de email<\/th>O que levar em conta ao diagramar<\/th><\/tr><\/thead>
Apple Mail (iPhone e Mac)<\/td>Bom suporte a HTML e CSS. Aplica o modo escuro e amplia fontes pequenas<\/td><\/tr>
Gmail (web e app)<\/td>Corta as mensagens com mais de 102 KB de HTML e pode inverter as cores no modo escuro<\/td><\/tr>
Outlook cl\u00e1ssico para Windows<\/td>Usa o motor do Word: ignora muitas propriedades CSS e precisa de tabelas<\/td><\/tr>
Novo Outlook e Outlook.com<\/td>Motor web, muito mais parecido com um navegador<\/td><\/tr>
Yahoo Mail<\/td>Suporte correto, mas \u00e9 bom testar os bot\u00f5es e o modo escuro<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

O caso mais delicado continua sendo o Outlook cl\u00e1ssico.<\/p>\n\n

A Microsoft est\u00e1 migrando seus usu\u00e1rios para o novo Outlook, mas n\u00e3o definiu uma data de fim para o cl\u00e1ssico.<\/p>\n\n

Enquanto ele continuar presente em tantas empresas, diagramar com tabelas \u00e9 o mais prudente.<\/p>\n\n

O que levar em conta antes de criar o design de um email<\/h2>\n\n

As medidas do email marketing s\u00e3o a base t\u00e9cnica. Mas, antes de abrir o editor, \u00e9 bom ter claras tr\u00eas decis\u00f5es de design.<\/p>\n\n

Fique de olho no peso das imagens<\/h3>\n\n

Imagens pesam. Uma newsletter com cinco fotos sem compress\u00e3o pode levar v\u00e1rios segundos para carregar com dados m\u00f3veis.<\/p>\n\n

E, se demorar, o leitor vai embora.<\/p>\n\n

Comprima cada imagem antes de envi\u00e1-la e n\u00e3o use uma foto de 3.000 px onde ela ser\u00e1 exibida com 600.<\/p>\n\n

Voc\u00ea encontra mais detalhes na dica 8.<\/p>\n\n

Use imagens que acompanhem a mensagem<\/h3>\n\n

Uma imagem precisa dizer o mesmo que o texto. Se voc\u00ea vende uma viagem para a montanha, a foto de um vale faz parte do trabalho.<\/p>\n\n

Se voc\u00ea promove roupas, mostre as pe\u00e7as.<\/p>\n\n

O que n\u00e3o funciona s\u00e3o as imagens de enfeite. Elas ocupam espa\u00e7o, pesam e n\u00e3o acrescentam nada ao leitor.<\/p>\n\n

O design simples tamb\u00e9m funciona<\/h3>\n\n

Nem todos os emails precisam de imagens. Em um envio promocional, o email deve ser visual, porque voc\u00ea busca uma compra, um cadastro ou uma reserva.<\/p>\n\n

Mas, se voc\u00ea quer proximidade ou compartilhar uma opini\u00e3o, um email quase s\u00f3 de texto funciona igualmente bem.<\/p>\n\n

\n
\n

Na hora de criar o design de um email, seja em HTML ou com um editor visual, minha recomenda\u00e7\u00e3o \u00e9 sempre a mesma: quanto mais simples, melhor. N\u00e3o estamos criando uma obra de arte, e sim um email com um objetivo claro e concreto: vender, levar tr\u00e1fego para o site ou obter respostas. Sim, ele precisa ficar bonito, mas n\u00e3o est\u00e1 ali para distrair o leitor com a sua beleza, e sim para que ele fa\u00e7a o que voc\u00ea busca. Mesmo em um email promocional, uma boa foto do produto e um bot\u00e3o claro valem mais do que dez enfeites. Simples e claro: quase sempre \u00e9 o melhor conselho.<\/p>\nJose Argudo<\/strong>, CMO da Mailrelay<\/cite><\/blockquote>\n<\/div><\/div>\n\n

Estrutura da newsletter ideal<\/h2>\n\n

A estrutura decide se o leitor entende a sua mensagem nos primeiros segundos. Esta \u00e9 a que eu recomendo, de cima para baixo:<\/p>\n\n

\u00c1rea<\/th>O que colocar<\/th>Medida aproximada<\/th><\/tr><\/thead>
Pr\u00e9-cabe\u00e7alho<\/td>Uma frase que complemente o assunto<\/td>40-100 caracteres<\/td><\/tr>
Cabe\u00e7alho<\/td>Logo e, se necess\u00e1rio, uma imagem principal<\/td>600 \u00d7 200-300 px<\/td><\/tr>
Primeira tela<\/td>T\u00edtulo, uma frase de contexto e o bot\u00e3o principal<\/td>Os primeiros 300-500 px<\/td><\/tr>
Corpo<\/td>Blocos curtos de texto e imagem, um de cada vez<\/td>Colunas de 600 px ou duas de 300 px<\/td><\/tr>
Chamada para a\u00e7\u00e3o<\/td>Um bot\u00e3o claro com um verbo<\/td>M\u00ednimo de 44 \u00d7 44 px<\/td><\/tr>
Rodap\u00e9<\/td>Dados da empresa, link de descadastro e aviso legal<\/td>Fonte de 12-14 px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

Uma regra que sempre funciona: um email, um objetivo. Se voc\u00ea tem tr\u00eas coisas para contar, priorize uma e deixe as outras para o pr\u00f3ximo envio.<\/p>\n\n

E de nada adianta uma boa estrutura se depois voc\u00ea envia o mesmo para toda a sua lista: segmente os seus assinantes<\/a> para que cada um receba o que lhe interessa.<\/p>\n\n

\n

Diagrame suas newsletters sem programar<\/strong><\/p>\n\n\n\n

Com o editor visual do Mailrelay, voc\u00ea cria newsletters que ficam bem no celular sem escrever uma linha de HTML.<\/p>\n\n\n\n

\n
Criar conta gr\u00e1tis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

10 dicas para diagramar a sua newsletter<\/h2>\n\n

Estas s\u00e3o as 10 dicas que eu reviso em cada newsletter antes de envi\u00e1-la.<\/p>\n\n

Algumas s\u00e3o de design e outras s\u00e3o t\u00e9cnicas, mas todas evitam problemas reais.<\/p>\n\n

1. Escolha um design simples e adapt\u00e1vel ao celular<\/h3>\n\n

Um design simples fica bem em mais lugares.<\/strong> Use fontes padr\u00e3o (Arial, Helvetica, Georgia ou Verdana), fundos de cor s\u00f3lida e uma \u00fanica coluna no celular.<\/p>\n\n

A maioria dos seus assinantes vai abrir o email no celular.<\/p>\n\n

Por isso o design precisa ser responsivo<\/a>: que se adapte sozinho \u00e0 largura da tela.<\/p>\n\n

Se duas colunas n\u00e3o couberem, que passem a ser uma. E, se um bot\u00e3o ficar pequeno, que cres\u00e7a.<\/p>\n\n

2. Use um HTML simples e adicione uma vers\u00e3o em texto<\/h3>\n\n

Quanto mais simples o c\u00f3digo, menos surpresas.<\/strong> Nada de JavaScript, formul\u00e1rios nem efeitos que dependam de scripts: os programas de email os bloqueiam por seguran\u00e7a.<\/p>\n\n

Envie sempre uma vers\u00e3o em HTML e outra em texto simples. Se algu\u00e9m n\u00e3o puder ver o HTML, vai ler o texto.<\/p>\n\n

No Mailrelay, a vers\u00e3o em texto \u00e9 gerada automaticamente a partir do HTML.<\/p>\n\n

Assim as duas dizem o mesmo, e os filtros n\u00e3o desconfiam de uma mensagem com dois conte\u00fados diferentes.<\/p>\n\n

3. Diagrame com tabelas<\/h3>\n\n

As tabelas continuam sendo a forma mais confi\u00e1vel de diagramar um email.<\/strong> Em um site, voc\u00ea usaria camadas (div) e CSS moderno.<\/p>\n\n

No email, n\u00e3o, porque o Outlook cl\u00e1ssico para Windows usa o motor do Word e n\u00e3o entende boa parte desse CSS.<\/p>\n\n

Com tabelas, voc\u00ea controla a largura, as colunas e os espa\u00e7os em todos os programas. Uma dica: n\u00e3o aninhe mais de tr\u00eas n\u00edveis de tabelas.<\/p>\n\n

A partir da\u00ed, o c\u00f3digo fica dif\u00edcil de manter e pesa mais.<\/p>\n\n

4. N\u00e3o passe de 600-640 px de largura<\/h3>\n\n

\u00c9 a medida de email marketing que funciona melhor no desktop e no celular.<\/strong> Os programas de desktop mostram o email em um painel de leitura mais estreito do que a tela.<\/p>\n\n

Com 600-640 px, o email cabe inteiro, sem barra de rolagem lateral.<\/p>\n\n

No celular, um design responsivo reduz essa largura \u00e0 da tela.<\/p>\n\n

O que n\u00e3o conv\u00e9m \u00e9 o contr\u00e1rio: criar o design com 800 ou 1.000 px e esperar que ele se adapte.<\/p>\n\n

Os textos ficariam min\u00fasculos no celular.<\/p>\n\n

5. Aplique os estilos inline<\/h3>\n\n

Alguns programas de email ignoram os estilos do cabe\u00e7alho do email.<\/strong> Por isso, os estilos importantes (cor, tamanho da fonte, margens) v\u00e3o dentro de cada tag com o atributo “style”.<\/p>\n\n

Assim voc\u00ea garante que o texto apare\u00e7a igual no Gmail, no Outlook e no Apple Mail.<\/p>\n\n

Os editores visuais, como o do Mailrelay, fazem isso por voc\u00ea ao salvar o design.<\/p>\n

\n
\"Codifique<\/figure>\n<\/div>\n

6. Prepare bem as suas imagens<\/h3>\n\n

As imagens s\u00e3o o que mais quebra em um email.<\/strong> Revise sempre estes quatro pontos:<\/p>\n\n

O que revisar<\/th>Por qu\u00ea<\/th><\/tr><\/thead>
Estilo “display:block” em cada imagem<\/td>O Gmail adiciona um espa\u00e7o em branco entre imagens que ficam juntas<\/td><\/tr>
Largura e altura definidas no c\u00f3digo<\/td>Voc\u00ea evita que elas se deformem enquanto carregam<\/td><\/tr>
Texto alternativo (alt)<\/td>Se as imagens estiverem bloqueadas, o leitor sabe o que h\u00e1 ali<\/td><\/tr>
Formato JPG, PNG ou GIF<\/td>S\u00e3o os que todos os programas entendem. WebP ainda n\u00e3o<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

E n\u00e3o coloque texto importante dentro de uma imagem. Se ela n\u00e3o carregar, a mensagem desaparece.<\/p>\n\n

Os GIFs animados<\/a> funcionam, com uma ressalva: o Outlook cl\u00e1ssico s\u00f3 mostra o primeiro quadro.<\/p>\n

\n
\"Exemplo<\/figure>\n<\/div>\n

7. N\u00e3o anexe arquivos<\/h3>\n\n

Os anexos complicam a entrega.<\/strong> Os filtros antispam examinam com lupa os arquivos doc, exe ou zip, que al\u00e9m disso aumentam muito o tamanho da mensagem.<\/p>\n\n

Envie o arquivo para o seu site, para o Google Drive ou para o Dropbox e coloque um bot\u00e3o com o link para ele.<\/p>\n\n

Assim o email pesa menos e, al\u00e9m disso, voc\u00ea sabe quantas pessoas fazem o download gra\u00e7as \u00e0s estat\u00edsticas de cliques.<\/p>\n\n

8. Otimize o peso das imagens<\/h3>\n\n

Comprimir uma imagem pode reduzir o peso dela pela metade sem que se perceba.<\/strong> Voc\u00ea pode usar ferramentas gratuitas como TinyPNG ou Squoosh, ou exportar do seu programa de edi\u00e7\u00e3o com qualidade de 70-80%.<\/p>\n\n

Use JPG para fotos e PNG para logotipos ou imagens com fundo transparente.<\/p>\n\n

E envie as imagens com o dobro do tamanho em que ser\u00e3o exibidas: uma imagem de 600 px de largura \u00e9 enviada com 1.200 px.<\/p>\n\n

Ela ficar\u00e1 n\u00edtida em telas retina e, bem comprimida, continuar\u00e1 pesando pouco.<\/p>\n\n

9. Inclua sempre o rodap\u00e9 legal<\/h3>\n\n

O rodap\u00e9 n\u00e3o \u00e9 opcional.<\/strong> Na Espanha, a LSSI obriga a identificar o remetente e a oferecer uma forma simples e gratuita de cancelar a inscri\u00e7\u00e3o em cada comunica\u00e7\u00e3o comercial.<\/p>\n\n

O RGPD exige, al\u00e9m disso, informar como voc\u00ea trata os dados.<\/p>\n\n

Inclua no rodap\u00e9 o nome e o endere\u00e7o da sua empresa, o link de descadastro e um link para a sua pol\u00edtica de privacidade.<\/p>\n\n

Desde 2024 o Gmail e o Yahoo, e desde 2025 o Outlook, tamb\u00e9m exigem o descadastro com um \u00fanico clique de quem envia em volume.<\/p>\n\n

Voc\u00ea encontra os detalhes no gloss\u00e1rio sobre o cabe\u00e7alho List-Unsubscribe<\/a>.<\/p>\n\n

10. Teste antes de enviar<\/h3>\n\n

Nunca envie uma newsletter sem test\u00e1-la.<\/strong> Mande um email de teste para voc\u00ea mesmo e abra-o no celular e no computador, no Gmail e no Outlook, se puder.<\/p>\n\n

Confira se as imagens carregam, se os links levam aonde devem e se o texto pode ser lido sem dar zoom.<\/p>\n\n

Se voc\u00ea envia para listas grandes, ferramentas como Litmus ou Email on Acid mostram como o email aparece em dezenas de programas ao mesmo tempo.<\/p>\n\n

\n

Teste sua newsletter antes de envi\u00e1-la<\/strong><\/p>\n\n\n\n

Envie um email de teste para voc\u00ea mesmo pelo Mailrelay e confira como ele fica antes de mand\u00e1-lo para a sua lista.<\/p>\n\n\n\n

\n
Testar o Mailrelay gr\u00e1tis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

Modo escuro: como diagramar para que o seu design n\u00e3o quebre<\/h2>\n\n

Cada vez mais gente l\u00ea os emails no modo escuro<\/a>.<\/p>\n\n

E cada programa o aplica do seu jeito: alguns s\u00f3 mudam o fundo, outros invertem todas as cores.<\/p>\n\n

Um logo preto sobre fundo transparente pode desaparecer.<\/p>\n\n

Para que a sua newsletter resista \u00e0 mudan\u00e7a:<\/p>\n\n