O guia definitivo para design de e-mail: práticas recomendadas para tamanhos de fonte e dimensões de imagem

Por que o design de e-mail é importante: Importância em comércio eletrônico e marketing.

Fonte e tipografia

Tamanhos de fonte:

Tamanhos recomendados para e-mails em dispositivos móveis e computadores

Para facilitar a leitura do e-mail em dispositivos móveis, geralmente você deseja manter os seguintes tamanhos de fonte:

1. Texto de corpo: 14-16px é um bom intervalo. Fácil de ler sem zoom.
2. Títulos: 22-27px funciona bem para cabeçalhos. Você quer que eles se destaquem, mas não sejam opressores.
3. Subtítulos: Cerca de 18-22px. Eles devem ser maiores que o corpo do texto, mas menores que os títulos principais.
4. Botões de CTA: o texto dentro dos botões deve ter pelo menos 14 px para facilitar o toque.
5. Letras miúdas: mantenha pelo menos 12px para que seja legível, mas claramente secundário.

A legibilidade é fundamental, especialmente para comércio eletrônico, onde você deseja orientar o leitor a agir. Sempre teste seus e-mails em vários dispositivos para ter certeza de que estão bem!

Tipos de fonte

Serif vs. Sans-serif.

Quando se trata de design de e-mail, a escolha entre as fontes Serif e Sans-Serif pode fazer uma grande diferença. Aqui está o resumo:

Fontes serifadas

• Exemplos: Times New Roman, Geórgia
• Vibração: Mais tradicional, muitas vezes visto como formal ou acadêmico.
• Melhor para: conteúdo de formato longo onde a legibilidade é fundamental.
• Mas: pode parecer confuso em telas pequenas, portanto use com cautela em e-mails móveis.

Fontes sem serifa

• Exemplos: Arial, Helvética, Verdana
• Vibração: Moderno, limpo e casual.
• Melhor para: Conteúdo curto e rápido e legibilidade móvel.
• Por que: Mais fácil de ler em telas pequenas e dá um toque contemporâneo.

Dicas para design de e-mail

1. Consistência: opte por uma ou duas fontes para manter o design coeso.
2. Fontes seguras para a Web: use fontes que sejam bem exibidas em todos os clientes de e-mail.
3. Hierarquia: use fontes ou estilos diferentes para títulos e corpo de texto para criar hierarquia visual.
4. Teste: sempre teste como as fontes são renderizadas em diferentes dispositivos e clientes de e-mail.

Dado nosso foco no comércio eletrônico, você pode preferir o Sans-Serif por sua vibração moderna e legibilidade móvel.

Mas se você estiver enviando conteúdo educacional, uma fonte Serif pode adicionar um toque de autoridade. Escolha com base na sua marca e mensagem!

Espaçamento entre linhas

O espaçamento ideal é importante para a legibilidade do e-mail.

• Texto de corpo: procure usar 1,4 a 1,6 vezes o tamanho da fonte. Portanto, se o tamanho da fonte for 16px, o espaçamento entre linhas seria em torno de 22px a 26px.

Por que o espaçamento entre linhas é importante

1. Legibilidade: o espaçamento adequado entre linhas evita que o texto fique apertado, facilitando a leitura.
2. Skimabilidade: um bom espaçamento ajuda os leitores a folhear o conteúdo, que é como a maioria das pessoas lê os e-mails.

Dicas para espaçamento entre linhas

1. Consistência: mantenha o espaçamento entre linhas consistente em todo o e-mail para uma aparência coesa.
2. Títulos e subtítulos: podem ter um espaçamento um pouco menor, pois geralmente são maiores e mais ousados.
3. Móvel: teste em diferentes dispositivos para garantir que o espaçamento fique bom em todos os aspectos.

Para suas campanhas de e-mail de comércio eletrônico, o espaçamento entre linhas pode ajudar a orientar o olhar do leitor para CTAs e informações importantes. Então, não negligencie isso!

Imagens e mídia

Tamanhos recomendados para imagens de e-mail

1. Imagens de largura total: 600-800px de largura. Isso se ajusta às larguras padrão da maioria dos clientes de e-mail.
2. Imagens embutidas ou flutuantes: 200-300px de largura. Estas são imagens que ficam ao lado do texto.
3. Imagens de herói: 800-1200px de largura. Estas são as imagens grandes e que chamam a atenção no topo.
4. Botões de CTA: pelo menos 44x44px para facilitar o toque no celular.

Outras dicas

1. Proporção da tela: siga proporções comuns como 16:9 ou 4:3 para garantir que as imagens sejam bem dimensionadas.
2. Tamanho do arquivo: mantenha-o abaixo de 100 KB, se possível, para um carregamento mais rápido.
3. Telas de alto DPI: considere telas retina e use imagens de resolução mais alta, mas compacte-as para manter o tamanho dos arquivos baixo.

Formatos de imagem por e-mail

• JPEG: Bom para imagens complexas com muitas cores.
• png: Melhor para imagens, textos e logotipos simples.
• GIFs: Para animações simples.

Dado o seu foco no comércio eletrônico, imagens nítidas e de carregamento rápido podem tornar seus produtos atraentes e manter o usuário envolvido. Sempre teste em vários dispositivos para ter certeza de que está tudo certo!

Alt Text para imagens em e-mail

Acessibilidade

1. Deficiente visual: os leitores de tela usam texto alternativo para descrever imagens.
2. Conformidade legal: ajuda você a atender aos padrões de acessibilidade como ADA.
3. Bloqueio de imagens em clientes de e-mail: alguns clientes bloqueiam imagens por padrão. O texto alternativo fornece contexto.

Benefícios de SEO

1. Classificação de pesquisa: embora não afetem diretamente o e-mail, boas práticas de texto alternativo podem ajudar na estratégia geral de SEO.
2. Isso acontece quando você tem uma página de arquivo público para os boletins informativos enviados

Experiência de usuário

1. Internet lenta: se as imagens não forem carregadas, o texto alternativo fornecerá contexto.
2. Esclarecimento: descreve a imagem se ela for complexa ou contiver informações importantes.

Melhores Práticas

1. Descritivo: “Tênis de corrida femininos azuis” é melhor do que apenas “tênis”.
2. Conciso: Seja curto, mas informativo.
3. Palavras-chave: use palavras-chave relevantes, mas evite o excesso de palavras-chave.

Incorporações de vídeo em e-mail

Adicionar vídeo no e-mail pode aumentar o engajamento, mas traz algumas ressalvas. Aqui está o que você pode cobrir:

Os prós

1. Noivado: os vídeos podem aumentar as taxas de cliques.
2. Informação: é mais fácil transmitir informações complexas ou apresentar um produto.

Os contras

1. Compatibilidade: nem todos os clientes de e-mail oferecem suporte a vídeos incorporados.
2. Tempo de carregamento: Vídeos pesados podem retardar o carregamento de e-mails.

Melhores Práticas

1. Imagem substituta: use uma imagem em miniatura com link para o vídeo, caso a incorporação não funcione.
2. CTA: adicione uma sobreposição de botão de reprodução para incentivar cliques.
3. Curto e doce: mantenha os vídeos breves, de preferência com menos de 2 minutos.
4. Reprodução automática: Geralmente evite; permitir que os usuários escolham reproduzir o vídeo.

Como

1. HTML5: para clientes de e-mail compatíveis, você pode usar tags HTML5 para incorporação.
2. Serviços terceirizados: Plataformas como Vibetrace e Mailchimp geralmente possuem opções integradas de vídeo.

Alternativas para incorporar vídeo em e-mails

1. Gifs: GIFs curtos e em loop podem proporcionar uma experiência semelhante à de um vídeo.
2. Miniatura vinculada: uma imagem estática vinculada a um vídeo hospedado em outro lugar.

teste

1. Vários clientes: teste como o vídeo aparece em diferentes clientes de e-mail.
2. Móvel: certifique-se de que seja compatível com dispositivos móveis.

Layout e estrutura para design de e-mail

Layouts de coluna única versus multicoluna: Prós e contras.

Layout de coluna única

Prós

1. Compatível com dispositivos móveis: Mais fácil de reduzir em telas menores.
2. Focado: orienta o leitor de maneira linear e direta.
3. Simplicidade: Mais fácil de projetar e mais rápido de carregar.

Contras

1. Conteúdo limitado: não é ideal para mensagens complexas com múltiplas seções.
2. Menos Dinâmico: podem não chamar a atenção de forma tão eficaz quanto os layouts de várias colunas.

Layout de múltiplas colunas

Prós

1. Rico em conteúdo: ótimo para apresentar uma variedade de produtos ou tópicos.
2. Apelo visual: Mais dinâmico e envolvente.
3. Hierárquico: permite uma estrutura de informação mais complexa.

Contras

1. Complexidade: mais difícil de projetar e pode não renderizar bem em todos os dispositivos.
2. Muito pesado: Risco de desordem ou sobrecarga de informações.

Dicas para seu foco no comércio eletrônico

• Coluna única: ideal para campanhas específicas, como lançamentos de produtos ou ofertas especiais.
• Multicoluna: Ideal para newsletters ou apresentação de uma gama de produtos.

A escolha entre colunas únicas e múltiplas deve estar alinhada com sua estratégia de conteúdo, a complexidade de sua mensagem e as preferências de seu público-alvo. Sempre teste os dois layouts para ver o que funciona melhor com seu público de comércio eletrônico!

Importância do espaço em branco no design de e-mail

No design, o espaço em branco tem uma importância especial. Há muitas vantagens em usar espaços em branco, mas para e-mail as mais importantes são:

Legibilidade e espaço para respirar: O espaçamento entre texto e elementos facilita a digestão do conteúdo.

Foco e atenção: o espaço em branco pode direcionar o olhar do leitor para elementos importantes como CTAs.

Profissionalismo e aparência limpa: Um design descomplicado parece mais profissional e confiável.

Experiência do usuário e passível de leitura: ajuda os leitores a folhear o conteúdo, que é como a maioria das pessoas lê e-mails.

Experiência móvel e fácil de tocar: o espaço extra facilita o toque nos botões em dispositivos móveis.

Para seus e-mails de comércio eletrônico, o espaço em branco pode ajudar a orientar o leitor sobre ações importantes, como fazer uma compra ou conferir um novo produto. Não é apenas um espaço vazio; é um elemento de design funcional!

Capacidade de resposta móvel

Certificando-se de que fica bem em todos os dispositivos. Há uma certeza maior de que dispositivos móveis são usados mais do que o desktop para ler e-mails.

Garantir que seu e-mail seja responsivo e se adapte às telas de dispositivos móveis não é uma opção, mas a maneira de começar a criar um e-mail.

Frases de chamariz (CTA) em e-mail

• Posicionamento de CTA: Onde colocá-los para obter o máximo impacto.
• Design de botão CTA: Tamanho, cor, texto.

Experiência do usuário (UX)

Tempo de carregamento

Importância do tempo de carregamento do email (dependendo do tamanho e quantidade de imagens)

1. Experiência de usuário: e-mails com carregamento lento podem frustrar os usuários e reduzir o engajamento.
2. Usuários móveis: eles estão sempre em trânsito e não esperam por conteúdo lento.
3. Otimizar imagens: mantenha os tamanhos dos arquivos pequenos, mas com alta qualidade.
4. Minimizar código: HTML/CSS limpo e simples carrega mais rápido.
5. E-mails mais curtos: embora possa ser mais fácil tentar adicionar muito aos e-mails, mantê-los mais curtos é, na verdade, melhor.
6. Recorte de e-mail: certos clientes de e-mail (como o Gmail) cortam e-mails se eles ultrapassarem um determinado tamanho.
7. Teste: sempre teste os tempos de carregamento em vários dispositivos, clientes de e-mail e resoluções.

Navegação

Navegação por e-mail

1. Descoberta de conteúdo: para e-mails mais longos, como boletins informativos, a navegação ajuda os usuários a encontrar o que lhes interessa.
2. CTAs: uma navegação clara pode orientar os usuários na ação.
3. Cardápio: para e-mails com muito conteúdo, um pequeno menu na parte superior pode ser útil.
4. Hierarquia: Use títulos e subtítulos para dividir o conteúdo e orientar o leitor.

Acessibilidade

Escolha de fontes no e-mail

1. Escolha da fonte: fontes simples e limpas são mais fáceis de ler.
2. Tamanho da fonte: opte por um tamanho legível, geralmente 14-16px para o corpo do texto.
3. Leitores de tela: teste seu e-mail com um software de leitura de tela para garantir que ele esteja acessível.
4. Disponibilidade de fontes: ao usar fontes personalizadas (que não são instaladas por padrão nos dispositivos), certifique-se de que os arquivos de fontes sejam carregados corretamente.

Contraste de cores

1. Legibilidade: O alto contraste entre o texto e o fundo melhora a legibilidade.
2. Acessibilidade: Ajuda pessoas com deficiência visual ou daltonismo.
3. Texto versus plano de fundo: procure texto escuro em um fundo claro ou vice-versa.
4. CTAs: certifique-se de que os botões se destaquem, mas também sejam legíveis.
5. Ferramentas: use verificadores de contraste para testar suas opções de cores.