Design de e-mail: guia completo para criar o e-mail ideal

O primeiro passo é sempre o mais difícil. Sim, até quando o assunto é design de e-mail.

Quando você decide criar um e-mail do zero, surgem mil perguntas. Qual é o tamanho, a largura e a altura ideais de um modelo de e-mail? Qual deve ser o tamanho de uma newsletter? E as fontes e as cores?

Para não se perder no caminho do design de e-mail, você precisa de boas orientações, e foi exatamente por isso que decidimos escrever este guia. Por que nós? Criamos mais de 390 modelos de e-mail impecáveis e ainda mais e-mails exclusivos para nossos clientes. Venha com a gente passar por todo o processo de criação de um e-mail perfeito, das dimensões ao rodapé, e veja como montá-lo no Blocks, nosso editor de e-mails sem código.

Parte 1. Vamos começar do começo

Antes de tudo, precisamos entender quais devem ser as dimensões do seu modelo de e-mail. A altura e a largura certas são essenciais para exibir o conteúdo corretamente e fazer a mensagem chegar ao público. E, como as dimensões de um modelo de e-mail (e do conteúdo dele) costumam ser medidas em pixels (px), vamos usar essa medida neste guia também.

Qual deve ser a largura do meu e-mail?

Por muito tempo, a largura média de um e-mail foi de 600px no desktop e de 320px na vertical e 480px na horizontal nos dispositivos móveis. Com o tempo, porém, as resoluções de tela aumentaram. Hoje, segundo este artigo da Selzy, a largura ideal da versão desktop do seu e-mail é de 640px; a largura no celular continua a mesma.

Claro, seu e-mail pode ter mais de 640px, mas tente não passar do limite de 800px. Acontece que cada cliente de e-mail tem suas próprias configurações e limitações, e você precisa caber nesses limites se quiser que todos os destinatários recebam a melhor versão da sua mensagem. E, se o seu e-mail não couber nesse limite, teste-o em todos os clientes de e-mail para garantir que ele não fique desconfigurado ou quebrado.

Lembre-se de mais uma coisa: se a versão para celular do seu e-mail tiver 480px de largura, os usuários vão precisar girar o celular para ver o e-mail direito. Assim como na largura do desktop, você pode passar de 320px, mas teste bem.

Qual deve ser o comprimento do meu e-mail?

Na altura do e-mail, o único limite é a sua imaginação (e o peso do arquivo). O comprimento ideal fica em 1.500px, mas você pode ir além, até 3.000px! Só lembre que, quanto mais longo o e-mail, maior a chance de o usuário pensar “longo demais, nem vou ler” e simplesmente fechá-lo.

E, se você tem muito conteúdo para compartilhar, pense em estruturá-lo: use listas com marcadores, encurte os parágrafos, adicione títulos. Além disso, você pode colocar algumas informações em imagens, usar GIFs ou até incluir um vídeo!

Qual deve ser o tamanho da minha newsletter?

Seu e-mail não deve passar de 102 KB. Tenha isso sempre em mente e tente não sobrecarregar o e-mail com muito conteúdo (e não estamos falando só de imagens ou vídeos).

O peso do e-mail é medido pelo peso do código HTML. Quanto mais linhas de código, maior o arquivo. Por isso, fique de olho no volume de conteúdo: cada bloco conta, por assim dizer.

Mas e se você passar do limite de 102 KB? O resultado é simples: alguns clientes de e-mail (como o Gmail, por exemplo) vão cortar o seu e-mail. Se só o rodapé for cortado, às vezes dá para aceitar, mas se o corte cair no meio do e-mail, a história é outra. Fique atento.

Como criar um e-mail do zero no Blocks?

O Blocks permite criar um e-mail bonito sem escrever uma única linha de código! Comece com um modelo em branco, gere um e-mail com IA ou escolha um na galeria de modelos, depois arraste blocos de conteúdo para a área de edição e ajuste as propriedades dos elementos e as configurações do e-mail no painel à direita.

Parte 2. Como fazer seu e-mail brilhar

A estrutura básica do nosso e-mail está pronta, e agora é hora de olhar com mais atenção para os elementos. Vamos falar do layout do e-mail e de como criá-lo do jeito certo.

1. Pré-cabeçalho e cabeçalho (altura, largura, conteúdo)

O pré-cabeçalho é uma linha fina acima do e-mail. Normalmente, ele também aparece depois do assunto. O pré-cabeçalho pode complementar o assunto (por exemplo, falar de frete grátis ou de descontos extras) ou ter uma função puramente prática (como trazer o link “ver no navegador”).

Na formatação do texto do pré-cabeçalho, há algumas coisas a considerar. A fonte do pré-cabeçalho deve ser menor que a do corpo do e-mail (mas não pequena demais, claro). Por exemplo, se a fonte do corpo do e-mail tem 14px, use algo entre 10-12px no pré-cabeçalho. Já a altura do pré-cabeçalho pode ficar em 55-60px: mais que isso, ele chama atenção demais.

E, claro, não esqueça o tamanho do texto do pré-cabeçalho: ele deve ficar entre 50 e 100 caracteres.

Agora vamos ao cabeçalho do e-mail. Ele costuma trazer o logotipo da empresa junto com botões, menu ou outros elementos. Veja algumas dicas sobre o tamanho dele.

Se o cabeçalho tem um logotipo de tamanho padrão, a melhor altura é de 70px. Se você incluir um botão ou texto no cabeçalho (ou usar um logotipo maior), tudo bem aumentar a altura para 100-150px. Para um cabeçalho com menu, vale aumentar a altura para até 200px. Mas lembre sempre: um cabeçalho alto demais rouba a atenção.

Além dos espaçamentos internos (padding) superior e inferior, você também pode adicionar espaçamentos à esquerda e à direita dos blocos. Diferente dos de cima e de baixo, os laterais devem ser iguais no e-mail inteiro: se você usa 40px de espaçamento lateral no corpo do e-mail, use 40px também no pré-cabeçalho e no cabeçalho.

Quanto ao design do cabeçalho, o limite é a sua imaginação e o estilo geral do e-mail. A única coisa a lembrar é que todos os elementos precisam ficar consistentes tanto no desktop quanto no celular.

2. Banner (altura, largura, o que fazer e o que evitar)

O banner do e-mail é uma imagem JPG, PNG ou SVG que concentra a maior parte da atenção e é a tela perfeita para mostrar criatividade. Você pode brincar com o tamanho do banner, os estilos de fonte (e o tamanho delas) e as cores. Mas, claro, sempre com bom senso: um banner lotado de conteúdo tende a virar uma bagunça, e não algo que chama o olhar.

Dimensões das imagens no e-mail:

A largura do banner costuma depender da largura geral do e-mail. Por exemplo, se o seu e-mail tem 600px de largura no desktop e 320px no celular, o banner pode ter a mesma largura. Você também pode adicionar espaçamentos laterais a ele, mas lembre que eles precisam ser iguais em todo o e-mail (se for 40px nos outros blocos, deve ser o mesmo no banner).

Quanto ao comprimento do banner, não há um limite real, desde que haja bom senso. Ainda assim, recomendamos um banner com 700px-1400px de comprimento. Um banner mais longo provavelmente vai atrapalhar mais do que ajudar.

3. Texto (estilo, tamanho e cor da fonte, formatação)

No design do texto do e-mail, é fácil se confundir. Qual é o melhor tamanho de fonte para e-mail? Existe uma fonte e um tamanho profissionais obrigatórios? Entre dezenas de opções, qual escolher para o meu e-mail?

Calma, não é nada difícil. Vamos ajudar você a escolher o estilo de fonte, o tamanho, o espaçamento entre linhas, a cor e a formatação ideais para o seu e-mail.

Estilo da fonte:

Existem dois grandes grupos de fontes: serifadas (Serif) e sem serifa (Sans Serif). A diferença está nos pequenos traços nas pontas das letras: as fontes da família Serif têm, e as da família Sans Serif não.

No começo, o Blocks tinha só um conjunto limitado de fontes. Mas, depois de uma série de atualizações, agora também suportamos as fontes do Google! O kit inicial traz as fontes seguras: fontes que são exibidas corretamente em todos os tipos de dispositivo e cliente de e-mail. Aqui estão elas:

Já as fontes do Google são um pouco mais delicadas: alguns clientes de e-mail e dispositivos podem exibi-las de forma incorreta. Você ainda pode usá-las, claro, mas, se usar, teste seus e-mails antes de enviar.

Recomendamos usar no máximo dois estilos de fonte no e-mail. Assim, você mantém a consistência e a legibilidade e ainda deixa o texto mais nítido (o que é um recurso de acessibilidade bem importante em qualquer e-mail).

E, falando em legibilidade, veja como ela muda só por causa do estilo da fonte:

Claro, a segunda opção parece muito mais sofisticada, mas é bem mais difícil de ler.

Tamanho da fonte e da linha:

Depois de testar várias combinações de tamanhos para títulos, subtítulos e texto, chegamos aos tamanhos de fonte preferidos:

• 22-24px para títulos;
• 18-20px para subtítulos;
• 14-16px para o texto comum.

Já a altura da linha ideal fica em 150-200%. Assim, o texto fica nítido e agradável aos olhos do leitor.

E lembre-se: não existe fonte nem tamanho profissional para e-mail. Tudo depende do contexto e da sua decisão criativa. Mas, claro, garanta sempre a legibilidade e evite texto grande ou pequeno demais.

Cor da fonte:

Aqui a dica é parecida com a dos estilos de fonte: use no máximo duas cores de fonte no e-mail inteiro. Prefira cores contrastantes para deixar o texto mais acessível.

Formatação do texto:

Existem 3 formas principais de formatar o texto e destacar partes dele: você pode usar negrito, itálico ou sublinhado. Vamos ver como usar cada uma:

• O negrito costuma destacar as palavras que o leitor precisa notar (por exemplo, uma data, as condições de uma promoção etc.).
• O itálico serve para destacar citações e títulos de livros, filmes etc.
• E, por fim, sublinhamos os links: é o uso mais comum desse tipo de formatação.

Não são regras obrigatórias, mas essas práticas viraram costume: as pessoas tendem a prestar atenção ao texto em negrito e a clicar no texto sublinhado. Leve isso em conta no texto do seu e-mail também.

4. Botões (largura e altura, cor, fontes, espaçamentos)

Assim como no tamanho do banner, não existem limites exatos para os botões. Ainda assim, algumas regras gerais e recomendações ajudam a usar esse elemento da forma mais eficaz.

• Os botões precisam se destacar do fundo e do resto do conteúdo do e-mail. Eles devem chamar a atenção e ser notados de imediato pelos leitores.
• Os botões precisam ser grandes o bastante na versão para celular do e-mail, para que o leitor consiga tocar neles sem dificuldade.
• Use cores contrastantes nos botões para que eles se destaquem.
• Aproveite o espaço em branco e adicione espaçamento interno em volta do CTA do botão. Assim, fica mais fácil ler e clicar.

5. Blocos de conteúdo (quantidade de elementos na grade, dimensões e estilo)

Existem muitos tipos de blocos de conteúdo: artigos, grades de produtos, citações etc. No fundo, todos são tabelas com uma ou várias colunas. Uma dica: é melhor usar no máximo 4 colunas em grades de produtos e 2 colunas nos outros tipos de blocos de conteúdo.

Lembre também que um bloco longo demais pode desanimar o destinatário de continuar lendo (e é claro que não queremos isso). Mantenha o bom senso e deixe cada bloco de conteúdo com 200-300px de altura. A altura total dos blocos de conteúdo do e-mail deve ficar em torno de 1.000-1.200px.

6. Rodapé (largura, altura, conteúdo obrigatório e opcional)

Os rodapés têm uma função mais prática nos e-mails. O tamanho do rodapé depende da quantidade de conteúdo que ele traz. Um rodapé típico inclui:

1. Endereço físico da empresa.
2. Links para as redes sociais.
3. Contatos da empresa (telefone e/ou e-mail).
4. Link ou QR code do aplicativo.
5. Um lembrete de por que o destinatário recebeu o e-mail.
6. Link para a política de privacidade.
7. Link “Cancelar inscrição”.

Vale lembrar que a lei CAN-SPAM e o GDPR exigem o link de descadastro para destinatários nos EUA e na UE, respectivamente. Mesmo que você não trabalhe diretamente com esses países, pode ter clientes americanos ou europeus na sua base.

Por isso, é sempre melhor incluir o link “Cancelar inscrição” no rodapé, só por garantia. Deixe-o visível e permita que os assinantes se descadastrem com um clique. E um último ponto: nenhum ESP vai deixar você enviar um e-mail sem o link “Cancelar inscrição”. Mesmo que você esqueça de adicioná-lo, o serviço vai lembrar você ou adicioná-lo automaticamente (como a Selzy).

Além dos elementos já listados, você pode incluir outros itens no rodapé (como menus, informações sobre promoções em andamento e mais).

Por fim, vamos falar das dimensões do rodapé. A largura do rodapé deve ser exatamente igual à do e-mail, e a altura depende da quantidade de conteúdo. Ainda assim, deixe o rodapé com pelo menos 200px de altura.

Parte 3. Acabamento e testes

Nosso e-mail está pronto! Só faltam os últimos passos.

Confira se os espaçamentos entre os elementos têm a mesma altura. Eles não devem ser pequenos nem grandes demais: o tamanho ideal é de 30-40px. Garanta também que o tamanho do texto seja consistente em todos os blocos, que toda imagem tenha texto alternativo e que todos os links estejam no lugar.

Não esqueça de adicionar tags UTM aos links (se precisar). As tags UTM são pequenos trechos de código que permitem acompanhar o desempenho das suas campanhas. Se você codifica o e-mail à mão, precisa adicioná-las link por link, mas no Blocks dá para adicioná-las a todos os links em poucos cliques!

Depois, confira como o e-mail aparece e funciona em dispositivos móveis (já que muita gente lê e-mails no celular). Por fim, envie um e-mail de teste para ver se ele é exibido corretamente em todos os dispositivos e clientes de e-mail.

Conclusão

Como você viu, não é difícil criar um e-mail bonito do zero! É verdade que algumas recomendações (como as dimensões do modelo de e-mail) são mais rígidas que outras (como a escolha do melhor tamanho de fonte para e-mail). Mas, com a ajuda do nosso guia detalhado, temos certeza de que a sua jornada no design de e-mail vai seguir sempre no rumo certo!