Embora um e-mail em HTML permita que você ofereça uma experiência de usuário impressionante aos seus assinantes, projetar e desenvolver um não é fácil.
O exercício de criar um e-mail em HTML é bastante sutil , exigindo que se faça malabarismos com vários processos sem pular uma batida.
O segredo para minimizar a margem de erro está em se familiarizar completamente com todas as práticas recomendadas de design e desenvolvimento. E é exatamente isso que estamos abordando neste artigo. Continue lendo para descobrir o que é necessário para criar um e-mail HTML vencedor e usá-lo em suas campanhas futuras.
Descubra os clientes de e-mail do seu público-alvo
O maior desafio de desenvolver um email HTML, talvez, é que você tem que lidar com muitas limitações. Isso inclui problemas de renderização de cerca de meia dúzia de navegadores da Web — e o dobro de clientes de e-mail durante o processo.
Você não pode nem escolher favoritos porque cada uma dessas entidades possui um market share.
Mas não se preocupe; esta não é uma tarefa tão Sísifo quanto parece até agora. Para uma campanha de e-mail bem-sucedida, primeiro você deve identificar os hábitos de visualização de seus assinantes e determinar quais clientes de e-mail eles estão usando para acessar e ler seus e-mails. Ter esse conhecimento desempenhará um papel significativo na formação de sua jornada de desenvolvimento.
Por exemplo, vamos supor que todos os seus assinantes sejam usuários do Outlook. Nesse caso, você pode concentrar sua atenção exclusivamente na resolução de problemas de renderização específicos do Outlook. Você não precisa se preocupar com os desafios de outros sites.
No entanto, este é um cenário extremamente ideal. No mundo real, é mais provável que sua lista de e-mail use uma variedade de clientes de e-mail. Seu trabalho é identificar aqueles com o menor denominador comum. Essa primeira tarefa não é fácil, mas vale a pena investir tempo e recursos.
Depois de entender esse cliente, você precisa testar todos os seus e-mails em seu sistema antes de enviá-los. Dependendo da distribuição do seu público, você ainda pode se ver testando seus e-mails em todos os clientes, mas pelo menos você não estará mais fazendo isso à toa.
Onde a maioria do seu público se inclina para um determinado cliente , você pode priorizar o teste sobre o público restante.
Maximize sua dependência de tabelas
A melhor maneira de garantir que seus e-mails HTML tenham um layout é codificando-os usando tabelas.
E quanto ao layout CSS, você pergunta? Infelizmente, a maioria dos clientes de e-mail não aceita bem o layout CSS. Ou o CSS não fornece suporte para o sistema de e-mail — ou seu e-mail não está formatado além do reconhecimento.
Enquanto nossas contrapartes da web continuam a garantir CSS à esquerda e à direita – as tabelas são nossas ferramentas de desenvolvimento de escolha na comunidade de e-mail.
Usando as tags de tabela, você poderá evitar os problemas que Outlook, Gmail, Lotus Notes e outros têm ao encontrar elementos flutuantes.
Subsequentemente, as tabelas HTML permitem que você crie modelos de e-mail responsivos também. Dito isto, as mesas também não estão isentas de problemas. Felizmente, na busca de resolver tabelas, os especialistas geraram algumas práticas recomendadas.
Melhores práticas para tabelas HTML
-
- Defina as larguras em cada célula — e defina uma especificamente
Ao usar tabelas HTML, você lidará com margens e preenchimento HTML, larguras na tabela, margens e preenchimento CSS e larguras nas células. Esse é um prato bastante ocupado.
Se você definir larguras em toda a mesa, você não fará nada além de convidar ao caos. Para evitar isso, defina larguras em cada célula. Tenha em mente que a maioria dos clientes de e-mail são inconstantes ao determinar a largura correta de uma célula. Portanto, o melhor curso de ação é definir um especificamente.
Para configurar o preenchimento da célula, você pode usar o parâmetro cellpadding. Isso permitirá que você o defina uma vez em toda a tabela. Como alternativa, você pode especificar o preenchimento em células individuais usando CSS. Seja qual for a abordagem que você escolher, mantenha-a. Abster-se de misturá-los.
Aninhamento de tabelas dentro do seu principal Tabela
Mesmo que os clientes de e-mail ofereçam suporte para preenchimento e margens, nunca se pode ter certeza do resultado final. Portanto, se o espaçamento é importante para você (como deveria!), você deve praticar aninhar tabelas dentro de sua tabela principal. Pode parecer um pouco antiquado, mas garante um espaçamento consistente até uma falha.
Especifique uma tabela envolvente envolvendo todo o seu conteúdo
Ocasionalmente, você notará clientes de e-mail fazendo vista grossa para o plano de fundo definido em sua folha de estilo, ou um em sua etiqueta do corpo. Para evitar isso, especifique uma tabela de envolvimento envolvendo todo o seu conteúdo e defina um atributo bgcolor (usado para definir a cor de fundo de um elemento HTML).
Elimine meticulosamente as lacunas
Caso haja espaços em branco entre as células da sua tabela, eles desencadeará um tsunami de problemas de renderização. Elimine meticulosamente as lacunas, se houver, presentes entre a tag de fechamento de uma célula e a tag de abertura da sucessiva. Isso fará muito bem à consistência do seu layout.
Tenha cuidado com as imagens
Claro, as imagens revigoram seus e-mails, mas a dura verdade é que a maioria dos clientes de e-mail, incluindo os muito populares, como Gmail, Windows 10, O Outlook 2019 e o Outlook.com bloqueiam imagens por padrão.
Além disso, inúmeros destinatários não sabem que é possível habilitar manualmente as imagens bloqueadas pelo cliente. A conclusão é que, se o seu e-mail HTML for excessivamente baseado em imagens, suas taxas de sucesso provavelmente cairão. Certamente não. As imagens são necessárias; apenas que eles devem ser usados para complementar o conteúdo e não transmitir nenhuma informação importante por conta própria.
Se a proporção imagem-texto em seus e-mails for desequilibrada (mais imagens, menos texto), você’ Irá acionar imediatamente vários filtros de spam.
Mantenha imagens e texto balanceados
Se o seu e-mail for parecido com este por Danner, você não tem nada para se preocupar. Imagem e texto são perfeitamente equilibrados – como todos os bons e-mails devem ser.
Soluções alternativas para clientes que bloqueiam imagens por padrão
Layouts de coluna única promovem bastante a acessibilidade de e-mail
A maioria dos templates de email HTML são desenvolvidos usando tabelas. Nesse arranjo, torna-se extremamente importante acertar a ordem do conteúdo.
Se a sequência não estiver de acordo com a ordem de leitura padrão da esquerda para a direita e de cima para baixo, os leitores de tela não poderão para interpretar o conteúdo adequadamente para seus usuários.
Estabelecer uma ordem de leitura lógica é extremamente vital, e é exatamente isso que um layout de coluna única ajuda você a alcançar.
Preste atenção às linhas de assunto e pré-cabeçalhos
Suas linhas de assunto e pré-cabeçalhos são o que determinam se seus e-mails serão abertos ou não. Assim, você deve otimizá-los para seu público mobile. Os especialistas acreditam que o ponto ideal para ambos está entre 25 e 30 caracteres.
Escusado será dizer que suas linhas de assunto e pré-cabeçalhos precisam ser absolutamente impactantes, atraentes, mas concisos.
Se você deseja que seus e-mails HTML sejam compatíveis com dispositivos móveis, não pense duas vezes antes de usar uma coluna única disposição. Além de melhorar a legibilidade, a implementação de um layout de coluna única elimina uma série de problemas de renderização, como sobreposição de colunas, excesso de texto e deslocamento de imagens. Normalmente, esses e-mails são mais fáceis de navegar para o leitor.Observe como Itálico é configurado com um layout de coluna única que fornece um email de marketing HTML responsivo. Preste atenção ao tamanho da fonte )
A visão dos leitores apertando os olhos na tela do celular para entender seu e-mail não é nada bonita. Seja qual for o tamanho da fonte que você está vendo em seus e-mails de desktop – use pelo menos 2-3 pontos a mais do que para suas versões móveis. convidar a suspeita e a ira dos filtros de spam.
Incentive seus leitores a colocar você na lista de permissões
Quando seus leitores colocarem você na lista de permissões, você será classificado como um “remetente conhecido”. E os clientes de e-mail exibem mensagens recebidas de remetentes conhecidos. Depois que um assinante ativar seus e-mails e boletins informativos, continue cutucando-o, ainda que levemente, em suas comunicações futuras para colocar você na lista de permissões.
O que a maioria das marcas faz é incluir um apelo distinto para a lista de permissões em suas boas-vindas campanhas em si, apenas para seguir com menções sutis no rodapé do e-mail ou no final do corpo em outros e-mails.
Dê uma olhada em como o Atlas Obscura encorajou os leitores a mantê-los na lista de permissões.
Trabalhe para melhorar sua proposta de valor
Lembre-se, seus clientes estão inscritos em dezenas de outras empresas além de você. Portanto, é importante que você peça a eles para colocar você na lista de permissões e certifique-se de que eles notem cada e-mail seu.
No entanto, ganhar um lugar na lista de remetentes seguros do seu assinante não é tarefa fácil. Você tem que trabalhar continuamente para melhorar sua proposta de valor. Quando um novo contato se inscreve em seu boletim informativo, seu objetivo principal é obter novas informações dele. Se você não fornecer isso, seus leitores gradualmente deixarão de se envolver com você, muito menos na lista de permissões.
Enviar e-mails personalizados
Outra forma de chamar a atenção de seus assinantes é enviar e-mails personalizados. Mas, para implementar a personalização de forma eficaz, você deve primeiro segmentar sua lista de e-mail.
A lista de contatos deve ser dividida em várias seções com base em parâmetros como idade, sexo, ocupação, localização, preferências e interesses, passado compras, histórico de navegação e posição no funil de vendas.
Não inicie o corpo do seu email com uma imagem
O primeiro elemento do corpo do seu email é o que o destinatário vê na pequena janela de visualização. Se esse elemento for uma imagem não exibida, seu e-mail parecerá essencialmente em branco.
Esse e-mail tem uma probabilidade muito baixa de ser aberto. Para melhorar as aberturas, olhe além das imagens em algo como um texto de pré-cabeçalho que fornece uma visualização melhor para seus assinantes.
-
Sempre use atributos Alt
Quando você usa atributos alt, mesmo que sua imagem seja bloqueada, pelo menos seus leitores poderão entender o que a imagem continha, para começar. Essa é uma excelente prática para promover a acessibilidade de e-mail também.
As pessoas que usam tecnologias assistivas, como leitores de tela, contam com atributos alt para interpretar suas imagens de e-mail.
Adicionar legendas de texto
Se uma determinada imagem for extremamente importante, inclua uma legenda de texto para ele. Agora, mesmo que o cliente de e-mail bloqueie sua imagem e o texto alternativo, os leitores ainda poderão interpretar sua imagem.
Priorize o design responsivo
Com os clientes móveis representando 41,6% de todos os emails abertos, as empresas não podem se dar ao luxo de olhar além do email responsivo projeto de modelo. No esquema atual das coisas, desenvolver e-mails HTML compatíveis com dispositivos móveis é absolutamente inegociável.
Os e-mails devem ser renderizados de maneira ideal em todos os dispositivos
Como profissional de marketing , você precisa garantir que seus e-mails sejam renderizados de maneira ideal em todos os dispositivos e clientes de e-mail. Ter uma cópia e design de e-mail excepcionais não é suficiente. Garantir que seus modelos sejam responsivos é igualmente vital. Sem isso, suas campanhas nunca serão capazes de gerar o hype e o buzz a que estão destinadas.
Com o marketing por e-mail se tornando cada vez mais centrado no usuário ao longo dos anos, suas taxas de sucesso atualmente são tanto na experiência do usuário que você está entregando quanto na sua proposta de valor.
Crie um modelo de e-mail HTML responsivo
Pense em implementar um layout de coluna única
Adicione comentários em seu código
O desenvolvimento de e-mail HTML é uma jornada complexa e envolve vários desenvolvedores. Adicionar comentários em seu código pode ajudar a acelerar o processo de edição, pois informará explicitamente qual elemento ou estilo serve para qual propósito.
E quanto aos comentários?
Toda vez que você modificar algo com base no feedback do cliente, faça questão de destacar o mesmo usando comentários para a clareza dos outros envolvidos (economiza muito tempo). Mas, assim que o processo de desenvolvimento chegar ao fim, certifique-se de remover seus comentários.
A falha em remover comentários aumentará desnecessariamente o tamanho do arquivo do seu e-mail, afetando o tempo de carregamento.
Idealmente, você deve sempre tentar manter o tamanho do seu e-mail abaixo de 100kb. Além de otimizar o tempo de carregamento, isso também evitará que seu e-mail seja cortado pelo Gmail.
Encerrando
Tudo bem se o escopo da criação de um email HTML o sobrecarregar no início – a maioria das pessoas tem essa reação. No entanto, esperamos que este artigo preencha você com a motivação necessária e, eventualmente, guie você para projetar e desenvolver e-mails que sejam tão impactantes e cativantes para o seu negócio.
