Voltar
Facebook
Linkedin
Twitter
Copiar link
19/06/2025 
Milhares já recebem nossa news. Vai ficar de fora?
Cadastre-se e receba os melhores conteúdos sobre e-mail marketing e e-commerce.
Compartilhe via:
3 Dicas de HTML para criar peças de e-mail de alta performance
10/04/2017- 2 min de leitura
o uso de html para criar peças de e-mail é fundamental se você quiser assegurar que sua mensagem realmente chegue à sua lista de contatos sem ruídos.
isso porque a maior parte dos serviços de e-mail disponíveis bloqueiam a exibição de arquivos de imagem dentro do corpo dos e-mails, a fim de prevenir o spam. logo, se você sempre achou mais fácil transformar seu e-mail marketing em um grande arquivo de imagem no photoshop, pense duas vezes!
o problema é que não é só hotmail, gmail, ms outlook e outros que deixarão de exibir o conteúdo do seu e-mail, mas seus contatos certamente não terão interesse de aguardar o carregamento, ler e clicar numa estrutura complexa.
mas não se preocupe! neste post, vamos apresentar algumas dicas para que você seja capaz de recorrer à linguagem html para criar peças e e-mails de alta performance. confira.
Conteúdo
O que fazer ao usar html para criar peças e e-mails?
1. Evite o word
isso mesmo. usar o word ou editores mais simples para a geração do html pode fazer com que o seu código não seja interpretado corretamente pelos e-mails, já que não seguem os padrões da web. adote editores avançados, como o dreamweaver da adobe.
2. Tenha o layout sob controle
o principal desafio ao se apostar em um e-mail na linguagem html é tentar prever como o design dele será visto pelo usuário em cada um dos inúmeros serviços de e-mail, além dos dispositivos móveis, é claro. o ideal é que você mantenha o layout sob controle, via código!
– Use tabelas
sim, as tabelas são o primeiro passo para garantir que seu e-mail será lido sem distorções. elas possibilitam dimensionar o espaço entre colunas e rodapé, posicionando logo, imagens e texto de forma definitiva. o número de colunas é regulado pela tag “colspan=(?)”, dentro da tag <body></body>.
– Estilize o e-mail ou a peça com css
além de dimensionar cada elemento, é preciso ter controle sobre a estilização, para que usuários não tenham a leitura comprometida por e-mails ou peças com cores distorcidas. ao ser inserido no conteúdo, o css cria um link para uma página de estilos que definirão a cor do background e das fontes.
mas, atenção! use sempre o css inline (ao lado das tags do código-fonte). quando o css é incorporado externamente ou aparece antes da tag body, ele pode ter o código alterado por webmails.
3. Equilibre imagens e texto
depois de estruturar o layout em html, basta dosar imagens e texto. em primeiro lugar, as imagens não podem ser “pesadas” ou em grande quantidade, pois os e-mails tendem a considerá-las como spam, vindo a bloquear a visualização. a largura ideal das imagens deve ser de 520 a 600 pixels, e os padrões de quebra de linha do html auxiliam a reduzir o peso de cada uma delas.
apesar de toda a precaução, uma ou outra imagem pode não carregar. logo, insira a tag “alt”, com uma descrição acerca do conteúdo da imagem ou do link a que ela se refere para orientar o usuário
bom, agora que você ficou por dentro de algumas dicas para melhorar a performance dos seus e-mails, resta testar tudo. e caso as peças funcionem corretamente em navegadores como internet explorer e firefox, as chances são grandes de que elas funcionem nos demais.
e então, tudo pronto para usar o html para criar peças e e-mails? na próxima etapa, você provavelmente se interessará em medir a taxa de conversão do seu e-mail marketing!
Compartilhe esse artigo