Inteligente. Focado. E-mail.
E-mail rápido e multiplataforma, projetado para filtrar o ruído.
Definição
💡 E-mail HTML: E-mails codificados em HyperText Markup Language que permitem adicionar formatação, imagens, cores e links. Basicamente, é a diferença entre um documento de texto sem graça e uma mensagem realmente bem projetada. O e-mail HTML oferece recursos de formatação e marcação semântica que não estão disponíveis em texto simples.
Por que o e-mail HTML é importante
E-mails em texto simples são apenas texto. Sem cores, sem imagens, nem mesmo negrito ou itálico. E-mails HTML são todo o resto.
E-mails HTML têm cor, estilo, imagens e, às vezes, multimídia, de forma semelhante a páginas da web entregues à caixa de entrada de e-mail das pessoas. Isso significa que você pode alinhar o e-mail à sua marca, usar seu logotipo e adicionar botões em que as pessoas realmente podem clicar. Você pode usar os elementos visuais inerentes para ajudar a direcionar a atenção para as várias partes do conteúdo do seu e-mail e aproveitar os elementos com os quais os usuários esperam interagir, como imagens e vídeo.
A maioria das empresas envia e-mails HTML hoje em dia. De acordo com pesquisas de empresas de marketing online, a adoção de clientes de e-mail compatíveis com HTML agora é quase universal, com menos de 1 por cento relatando que usam clientes somente de texto. Seus clientes esperam e-mails com design, e o texto simples pode parecer pouco profissional ou desatualizado. Isso sinaliza que você não leva sua comunicação a sério.
Mas HTML não é automaticamente melhor. Existem compensações. E-mails HTML são maiores, demoram mais para carregar e podem apresentar problemas em diferentes clientes de e-mail. Eles também acionam filtros de spam com mais frequência do que o texto simples.
Como os e-mails HTML funcionam
Quando você envia um e-mail HTML, basicamente está enviando uma mini página da web para a caixa de entrada de alguém.
O designer de e-mail escreve código HTML, de forma muito parecida com a codificação de uma página da web, definindo a estrutura com HTML e estilizando-a com CSS. Você adiciona imagens, formata o texto, cria layouts. Então, quando o destinatário abre o e-mail, o cliente de e-mail dele lê esse código HTML e o renderiza como um navegador exibiria uma página da web.
Mas há um detalhe: existem centenas de serviços e aplicativos diferentes que as pessoas usam para ler seus e-mails, como Gmail, Yahoo! e Outlook, e cada serviço exibe HTML e CSS de forma um pouco diferente. O que parece perfeito no Gmail pode quebrar no Outlook. O que funciona no desktop pode falhar no celular.
É por isso que muitos servidores de e-mail são configurados para gerar automaticamente uma versão em texto simples da mensagem e enviá-la junto com a versão HTML, usando Content-Type: multipart/alternative. Se o HTML não for renderizado, o cliente de e-mail recorre ao texto simples. Você fica coberto de qualquer forma.
HTML vs. texto simples
Você tem duas opções:
E-mails HTML dão a você controle total sobre o design. Cores, fontes, imagens, botões clicáveis, layouts que combinam com o seu site. HTML é o melhor formato quando você quer criar mensagens que se pareçam com documentos tradicionais, com várias fontes, cores e listas com marcadores e numeradas, e quando quer mostrar imagens dentro da sua mensagem. Perfeito para newsletters, campanhas de marketing e comunicações com identidade de marca.
E-mails em texto simples são reduzidos ao básico. Apenas texto, sem estilo, sem links incorporados. O formato de texto simples não oferece suporte a texto em negrito ou itálico, fontes coloridas ou outra formatação de texto, e não permite mostrar imagens dentro da mensagem. Menos empolgantes, claro, mas funcionam em qualquer lugar. Eles também parecem mais pessoais e menos comerciais, por isso algumas pessoas os preferem para correspondência individual.
Para contas da Microsoft, você pode escolher como receber seus e-mails na sua caixa de entrada.
Funciona muito bem para cartas de vendas e atualizações e, se você é um vendedor que se comunica individualmente por e-mail, e-mails em texto simples provavelmente são melhores. Mas para a maior parte do marketing? HTML vence.
Criando e-mails HTML
Você tem opções, dependendo do seu nível de conforto técnico.
Codifique você mesmo. Se você conhece HTML e CSS, pode escrever o código do zero. Só lembre que criar um e-mail em HTML é algo especializado e não é exatamente como criar uma página da web. Clientes de e-mail são muito menos tolerantes do que navegadores. Você precisará usar tabelas para o layout (sim, mesmo), CSS inline em vez de folhas de estilo externas e testar em vários clientes.
Use um criador com arrastar e soltar. A maioria dos provedores de serviços de e-mail, como Mailchimp, Constant Contact ou Campaign Monitor, oferece editores visuais. Você arrasta blocos de texto, imagens e botões, e a ferramenta gera o HTML para você. Não é necessário programar.
Comece com um modelo. Pegue um modelo de e-mail HTML pronto em um serviço como Litmus ou Email on Acid e depois personalize-o com seu próprio conteúdo e identidade de marca. Mais rápido do que criar do zero, com mais controle do que um editor de arrastar e soltar.
Independentemente da abordagem usada, você ainda precisa garantir que seus e-mails sejam responsivos para diferentes resoluções e funcionem com diferentes clientes de e-mail. Teste tudo antes de enviar para a sua lista completa.
Boas práticas para e-mail HTML
Projete primeiro para dispositivos móveis. Mais da metade dos e-mails é aberta no celular. Agora que a navegação em dispositivos móveis superou o uso de PCs desktop e laptops, projetar seus e-mails para dispositivos móveis é mais importante do que nunca. Use layouts de coluna única, áreas de toque grandes para botões e tamanhos de fonte legíveis sem precisar dar zoom.
Mantenha a simplicidade. Não exagere no design. Ao desenvolver um e-mail HTML, não se esqueça da simplicidade; não complique seu trabalho, é melhor ficar com a opção de duas colunas. Menos elementos significam carregamento mais rápido e menos coisas que podem dar errado.
Use CSS inline. A tag head, usada para abrigar regras de estilo CSS de um documento HTML inteiro, não é muito bem suportada e às vezes é removida por completo, fazendo com que declarações de estilo inline se tornem o padrão de fato.
Teste em vários clientes. Gmail, Outlook, Apple Mail, Yahoo e clientes móveis renderizam tudo de forma diferente. Você pode tentar enviar seus e-mails para várias contas conectadas a diferentes clientes de e-mail ou usar ferramentas de teste de e-mail para simplificar o processo. Serviços como Litmus e Email on Acid são especializados nisso.
Inclua uma versão alternativa em texto simples. Sempre envie as versões HTML e em texto simples no mesmo e-mail. Se o HTML falhar, os destinatários ainda receberão sua mensagem.
Fique de olho no tamanho do arquivo. E-mail HTML é maior do que texto simples. Imagens pesadas e código inchado deixam o carregamento mais lento e podem acionar filtros de spam. Mantenha o tamanho total do e-mail abaixo de 100 KB, se possível.
Não dependa apenas de imagens. Alguns clientes de e-mail bloqueiam imagens por padrão. Sua mensagem ainda deve fazer sentido sem elas. Use texto alternativo para todas as imagens.
Conteúdo relacionado
- Como criar assinaturas de e-mail profissionais
- Recursos essenciais que um bom aplicativo de e-mail deve ter