Do design ao envio: como criar emails HTML bonitos sem um desenvolvedor

Principais aprendizados

• Criar um design para email é como criar um design para uma impressora muito exigente. O que fica bom em um navegador ou ferramenta de design nem sempre terá a mesma aparência na caixa de entrada.
• Um email pronto para a caixa de entrada é exibido corretamente em todos os clientes de email, é fácil de ler no celular, carrega as imagens e passa pelos filtros de spam.
• Muitos erros comuns de design são fáceis de corrigir: use imagens JPEG ou PNG, textos com alto contraste e fontes seguras para a web. Além disso, sempre faça testes antes de enviar.
• Você não precisa de um desenvolvedor. Ferramentas como a Stripo e a Benchmark Email permitem que equipes pequenas criem e enviem emails HTML profissionais sem escrever código.
• No nosso webinar sob demanda com a Stripo, mostramos todo o fluxo de trabalho ao vivo, desde a criação de um template até o clique em enviar.

Se você já criou um email que ficou perfeito na sua tela e depois viu tudo desandar no Outlook ou o conteúdo encolher até ficar ilegível no celular, saiba que não está sozinho. Isso acontece tanto com iniciantes quanto com profissionais de marketing experientes.

Por isso, nos unimos à Stripo para o nosso webinar mais recente, Do design ao envio: crie emails HTML bonitos com a Stripo + Benchmark Email. Também tive a companhia de Dmytro Kudrenko, CEO da Stripo, em seu segundo webinar da Benchmark, e da Irene, nossa especialista de produto. Juntos, mostramos por que o design de email HTML faz diferença, como criar um template da maneira certa na Stripo e como trazê-lo para Novo editor HTML da Benchmark Email para enviar.

Confira uma prévia do que abordamos, além de algumas etapas que você já pode seguir hoje.

Por que o design de email em HTML é importante (mesmo que você nunca escreva código)

Vou ser sincero: nunca planejo escrever uma linha de código. Mas envio muitos emails, então entender como funciona o HTML de email ainda é importante.

A ideia principal é a seguinte: o HTML de email segue regras diferentes das do restante da web. Muitos profissionais de marketing presumem que, se algo fica bonito em uma ferramenta de design ou no navegador, também ficará bonito na caixa de entrada. Nem sempre é assim, e você não vai querer descobrir isso da pior maneira. O Outlook, em particular, é conhecido por remover estilos e renderizar elementos de maneiras inesperadas.

Criar um design para email é um pouco como criar um design para uma impressora muito rigorosa. Algumas coisas simplesmente não funcionam, e isso é intencional. O Gmail, o Outlook e o Apple Mail podem renderizar o mesmo email de maneiras diferentes. Por isso, os emails ainda dependem de layouts baseados em tabelas, estilos inline e fontes compatíveis com a web. Adote uma mentalidade de “design dentro das limitações” e você evitará muitas dores de cabeça.

O que “pronto para a caixa de entrada” realmente significa

Um email pronto para a caixa de entrada é mais do que um email que fica bonito na sua tela. Ele precisa:

• Ser renderizado corretamente em todos os lugares: Gmail, Outlook e Apple Mail, no computador e no celular.
• Ser fácil de ler no celular: Mais da metade das pessoas lê os emails no celular. Se os assinantes precisarem aumentar e diminuir o zoom, terão menos chances de interagir.
• Carregar as imagens: e ainda fazer sentido se elas não forem carregadas. Evite criar um email em torno de uma única imagem.
• Manter tudo intacto: Sem texto invisível, layouts quebrados ou estilos removidos.
• Passar pelos filtros de spam: para que ele chegue à caixa de entrada antes de tudo.

5 erros comuns de design de email (e o que fazer no lugar)

Isso pode acontecer com qualquer pessoa. Eu mesmo já cometi alguns desses erros.

1. Usar imagens em SVG ou WebP. Muitos clientes de email não são compatíveis com esses formatos. Use JPEG ou PNG.
2. Texto claro em fundos claros. Use cores de texto e de fundo com alto contraste para facilitar a leitura.
3. Confiar em fontes da web. Elas costumam ser substituídas pelas fontes padrão. Use fontes seguras para a web, como Arial ou Georgia.
4. Esquecer de testar. Visualize e envie emails de teste antes de cada campanha para ver como seu email é renderizado em diferentes clientes.
5. Copiar o resultado de uma ferramenta de design diretamente para sua plataforma de email marketing. Crie o email em uma ferramenta específica para email ou limpe o código antes de colar.

Por que criar emails em HTML por conta própria?

Nem todo mundo tem um desenvolvedor à disposição, especialmente se você trabalha sozinho ou faz parte de uma equipe pequena de marketing. Ao criar seus próprios emails em HTML com as ferramentas certas, você tem:

• Campanhas mais rápidas, sem esperar na fila de outra pessoa
• Controle total do design, sem ficar indo e voltando para decidir o que fica melhor
• Mais consistência para a sua marca em todos os canais, incluindo email
• Custos de produção reduzidos para equipes sem um grande orçamento

Uma prévia da criação no Stripo

O Stripo é focado em uma única coisa: o fluxo de produção de emails. É nele que você cria o email antes de exportá-lo para a sua plataforma de envio. No webinar, Dmytro mostrou como o Stripo funciona, incluindo:

• Um editor visual de arrastar e soltar, com um editor integrado de HTML/CSS para quem quer ver todos os detalhes
• Mais de 1.600 templates para diferentes setores, épocas do ano e tipos de email, para você nunca começar com uma página em branco
• Atalhos de conteúdo, como puxar conteúdo de um link para um bloco de post de blog ou inserir um link de vídeo que gera automaticamente uma miniatura e um botão de reprodução
• Colaboração em tempo real e links de aprovação compartilháveis para equipes que precisam da aprovação final antes do envio
• Exportação para mais de 90 ESPs, incluindo a Benchmark Email

Como Dmytro colocou, o Stripo foi desenvolvido para que criar um email ruim seja, na verdade, a parte difícil. Quer ver como funciona? A demonstração completa está na gravação.

Depois, importe-o para a Benchmark Email.

Depois que seu template estiver pronto, Irene mostra como importá-lo para o novo Editor de HTML. Cole seu código ou faça upload do arquivo e visualize o resultado nas versões para desktop e dispositivos móveis. Com o seletor Personalize, você pode adicionar campos dinâmicos, como nome, sem mexer no código. A Benchmark adiciona automaticamente seu link de descadastro e endereço postal, para que tudo fique em conformidade.

Experimente: um checklist rápido.

Antes de enviar seu próximo email em HTML:

• Um objetivo, uma mensagem principal, um CTA
• Mensagem principal e CTA em texto visível, não em imagens
• Imagens JPEG ou PNG com texto alternativo descritivo
• Cores com alto contraste e fontes seguras para a web
• Visualização em dispositivos móveis verificada
• Email de teste aberto no Gmail, Apple Mail e Outlook

Assista ao webinar completo

Este post explica o “porquê”. O webinar mostra o “como”: a criação ao vivo de Dmytro no Stripo e o passo a passo de Irene para exportar, importar e enviar na Benchmark.

Ainda não tem uma conta na Benchmark? Crie sua conta gratuitamente e experimente o Editor de HTML com seu primeiro design.

Perguntas frequentes

Por que meu email aparece diferente no Outlook e no Gmail?

Cada cliente de email usa seu próprio mecanismo de renderização, e o Outlook é conhecido por remover estilos e ignorar muitas propriedades modernas de CSS. Por isso, o HTML de email depende de tabelas, estilos inline e testes em diferentes clientes de email.

Preciso saber programar para enviar um email em HTML?

Não. Construtores visuais como o Stripo criam um HTML compatível com emails para você, e o Editor de HTML da Benchmark Email permite importar, visualizar e personalizar o conteúdo sem editar o código.

Quais formatos de imagem funcionam melhor em emails?

JPEG e PNG são as opções mais seguras. Muitos clientes de email não oferecem suporte a SVG e WebP.

Como faço para levar meu email do Stripo para a Benchmark Email?

O Stripo pode exportar diretamente para a Benchmark Email. Outra opção é exportar seu HTML e colá-lo ou carregá-lo no Editor de HTML da Benchmark.

O webinar é gratuito?

Sim. A gravação completa está disponível sob demanda na página de recursos da Benchmark Email.