Como criar e-mails em HTML

Publicados: 2022-01-28

Criar emails em HTML não é tão difícil quanto parece. Você não precisa ser um desenvolvedor, e você realmente não precisa saber como codificar.

Se você já usou um editor de email WYSIWYG (What You See Is What You Get), você já criou um email HTML. Cada um dos módulos que você arrasta e solta consiste em HTML e CSS in-line, definindo como os diferentes elementos de email devem se parecer e se comportar.

Então, se a maioria dos editores de e-mail permite que você projete com ferramentas de arrastar e soltar, por que você precisa saber HTML para criar e-mails?

Boa pergunta.

Enquanto a maioria dos editores de e-mail lhe dá uma boa quantidade de controle dentro dos módulos, você não poderá ajustar todos os aspectos essenciais do seu e-mail. Você provavelmente precisará de HTML para alterar coisas como:

  • Tamanho da fonte
  • texto alternativo
  • Fronteiras
  • Margens
  • Preenchimento
  • Tamanho da imagem
  • Cores

Você já usou o editor de e-mail do Twilio SendGrid ? Ele permite que você crie e-mails com uma combinação de módulos de arrastar e soltar e edição de HTML. Uma combinação de energia como essa oferece controle total sobre a aparência de seus e-mails, garantindo uma experiência de marca consistente e de alto nível em todas as mensagens.

Felizmente, codificar um email em HTML não é muito complicado. Abaixo, daremos as dicas e o conhecimento da estrutura de e-mail que você precisa para criar e-mails melhores.

5 dicas para codificar um email HTML

Codificar um e-mail em HTML é relativamente simples, mas os clientes de e-mail e as caixas de entrada podem ser complicados. Siga estas práticas recomendadas para garantir que suas mensagens tenham uma ótima aparência, independentemente do cliente, navegador ou dispositivo de seus destinatários.

1. Torne seus e-mails responsivos

Os destinatários abrem mensagens de e-mail em vários sistemas operacionais, dispositivos, tamanhos de tela, navegadores e aplicativos de e-mail. Cada um desses fatores renderizará seu e-mail de maneira diferente, portanto, é seu trabalho garantir que seu e-mail seja responsivo e funcione conforme o esperado na maioria das caixas de entrada.

Você pode encontrar muitos modelos de e-mail responsivos, mas a tarefa é um pouco mais complicada quando você codifica um e-mail HTML do zero. Aqui estão algumas coisas que ajudarão a tornar seus e-mails mais responsivos:

  • Incluir consultas de mídia: as consultas de mídia permitem que você adapte seus modelos de e-mail a diferentes dispositivos.
  • Use uma única coluna: pode ser fácil ler e-mails de duas colunas em um desktop, mas pode ficar um pouco denso em dispositivos móveis.
  • Aumente o tamanho da fonte: não use uma fonte menor que 13 ou 14 pontos.
  • Espace seus links: você não quer que os leitores cliquem acidentalmente no link errado porque seus links estavam muito próximos.
  • Adicionar tags alt: as tags Alt descrevem suas imagens caso as imagens não carreguem.

2. Adicione imagens com moderação

As imagens são ótimas adições às suas campanhas de e-mail, mas tome cuidado para não exagerar com elas. Muitas imagens podem prolongar o tempo de carregamento e dificultar a renderização dos e-mails.

Use imagens menores que carregarão mais rápido e não ocuparão a tela inteira. Além disso, adicione elementos de dimensionamento responsivos como “width” e “max-width” para garantir que suas imagens sejam carregadas corretamente em todos os dispositivos e clientes de e-mail.

3. Simplifique

Lembre-se do propósito do seu e-mail. Muitos designers de e-mail se perdem na arte e na criatividade, esquecendo o objetivo geral do e-mail – que não é ganhar oohs e aahs.

Primeiro, você quer que as pessoas abram seus e-mails. Em seguida, você deseja que eles cliquem e ajam. Isso pode ser visitar seu site, ler uma postagem no blog, fazer uma compra ou se inscrever em um evento.

Mantenha as coisas simples. Forneça valor aos seus destinatários, atraia-os com conteúdo e, em seguida, direcione-os para o seu apelo à ação. É isso. Na maioria das vezes, todo o resto é fofo.

Ao adicionar diferentes elementos HTML ao seu e-mail, pergunte a si mesmo: “Isso ajuda o e-mail a cumprir sua finalidade?” Caso contrário, exclua-o do design do seu e-mail.

4. Use modelos de e-mail pré-criados

Você pode encontrar modelos de e-mail HTML pré-criados com tudo o que você precisa para enviar uma campanha estelar. Os modelos já fizeram o trabalho duro para criar um design de e-mail responsivo e de boa aparência.

Se você gosta de um modelo de e-mail, mas não está 100% satisfeito com ele, muitas vezes você pode baixar o HTML e fazer as edições que desejar. Este pode ser um excelente método de edição de e-mail para quem é novo em HTML.

5. Teste seus e-mails

Nunca envie um e-mail sem testá-lo primeiro. A maneira antiga de fazer isso seria enviar um e-mail de teste para vários endereços de e-mail (em clientes de e-mail) e tentar abri-lo em dispositivos diferentes. Se isso soa como muito tempo perdido e dores de cabeça, você está certo.

Felizmente, há uma maneira melhor nos dias de hoje.

A ferramenta de teste de e- mail do Twilio SendGrid é integrada ao seu editor de design, ajudando você a solucionar problemas de um único aplicativo. Isso ajudará você a ver como seu e-mail é renderizado em clientes, navegadores e dispositivos. Por exemplo, você pode ver a aparência do seu e-mail em um dispositivo móvel usando o Gmail e em uma área de trabalho usando o Outlook.

As ferramentas de teste de e-mail também podem ajudá-lo a encontrar links e botões quebrados, conteúdo com aparência de spam e problemas de formatação.

Estrutura de e-mail HTML

Os emails HTML têm uma estrutura simples:

  • DOCTYPE
  • Cabeçalho
  • Corpo

DOCTYPE

Use o <!DOCTYPE> para informar ao navegador o que esperar—neste caso, seria um email HTML.

Cabeçalho

Use a seção de cabeçalho para incluir elementos como estilo, dimensionamento e metatexto.

Corpo

Use o corpo para os elementos visuais do seu e-mail, como texto, imagens, tabelas, links e afins.

Modelo de e-mail com código HTML

Aqui está um exemplo de um modelo de email com código HTML. Você pode ver como este modelo de e-mail de boletim informativo de viagem é renderizado em computadores, tablets e dispositivos móveis.

Gostou do que está vendo? Clique em "Baixar modelo" e enviaremos uma cópia do código HTML para sua caixa de entrada. Você pode então copiar/colar o código em seu editor de design de e-mail para importar o modelo e adaptá-lo à sua marca e campanha.

Confira outros modelos de email do Twilio SendGrid

Quer mais modelos de e-mail? Para sua sorte, temos uma galeria cheia deles . Se você precisa de um boletim informativo, redefinição de senha ou modelo de lembrete de compromisso, nossa galeria de modelos gratuita tem tudo.

Além disso, esses designs são responsivos, garantindo que seu e-mail tenha uma ótima aparência em clientes, navegadores e dispositivos. Ah, e nós mencionamos que os modelos são gratuitos?

Comece a criar e-mails HTML melhores hoje mesmo com um modelo pré-criado.