13 dicas para criar um email marketing responsivo

Por Capa, Dicas, Dicas do Dinamize Automation, Dicas do Dinamize Mail, Dinamize, Marketing DigitalLeave a Comment

13 dicas para criar um email responsivo

Exatamente como nas páginas de um site, a criação do layout de um email marketing deve ser 100% responsivo, ou seja, adaptável para qualquer dispositivo que os leitores irão visualizar esse conteúdo. Porém no caso do email, além da tela do leitor, deve ser pensado nas restrições impostas pelos provedores de email e dispositivos.

De acordo com sua estratégia, o conteúdo e design de seu email devem ser criados de forma objetiva e otimizada. Pensando nisso, criamos uma série de dicas para a criação do layout de seu email de forma responsiva visando a conversão.


Saiba todos os passos de como fazer o layout do email marketing responsivo1. Mantenha todo o conteúdo dentro dos 600 pixels de largura

Caso sua mensagem possua uma largura maior que a da tela do destinatário, certamente ele precisará usar a barra de rolagem horizontal para visualizar o conteúdo por completo, ao receber seu envio. Portanto, mantenha a largura máxima de 600 pixels no seu template de email marketing, e com o conteúdo interno adaptável à largura do dispositivo usado, deixando o seu conteúdo legível também no celular ou em telas menores.

Saiba todos os passos de como fazer o layout do email marketing


Limite o número de fontes do email marketing

2. Limite o número de fontes

É recomendado não utilizar mais do que dois tipos de fontes em seu email marketing. Além disso, use fontes padrões, como Arial, Times New Roman ou Verdana, para obter uma melhor legibilidade. Fontes incomuns podem prejudicar o seu envio, pois alguns destinatários podem não possuí-las em seus computadores. Com isso, a fonte será alterada por outra, afetando o design do layout criado. Utilize sempre a fonte adequada para o tipo de mensagem que se quer transmitir.

Conheça as fontes que são aceitas nos diferentes dispositivos ou gerenciadores de email


Utilize imagens no email marketing

3. Utilize imagens

Inserir imagens no seu email pode tornar sua campanha mais atrativa e ajudá-lo a transmitir sua mensagem com maior clareza. Mas fique atento com as imagens que escolherá, para que elas não comprometam o restante do seu conteúdo. Imagens pequenas podem ser exportadas de seu programa de edição com 2 ou 3 vezes o tamanho, isso garantirá sempre uma boa qualidade. Por exemplo, originalmente seu layout tem 3 colunas, mas em dispositivos menores o layout muda ficando com apenas uma coluna, essa mudança de tamanho pode fazer as imagens ficarem pixeladas.

Confira algumas plataformas que otimizam suas imagens gratuitamente

Veja como evitar o bloqueio de imagens no email


Tenha sempre a pré-visualização do email marketing em mente

4. Tenha sempre a pré-visualização em mente (ela é sua melhor amiga para fazer um email marketing responsivo)

Muitos de seus contatos podem ler um email marketing recebido somente através da pré-visualização que fazem dele. Isso significa que diversos usuários podem pré-visualizar sua mensagem pela metade, seja na horizontal ou na vertical.

Tenha sempre a pré-visualização do seu email marketing em mente

Exemplo de como é a pré-visualização na horizontal no Microsoft Outlook.


Mantenha seu objetivo claro logo nos primeiros centímetros do email marketing

5. Mantenha seu objetivo claro logo nos primeiros centímetros

Esta dica não está necessariamente dentro das boas práticas do email marketing responsivo, mas é sempre importante lembrar!

Na hora da criação do layout de seu email, tenha em mente que a maioria das pessoas passará somente alguns segundos visualizando os primeiros centímetros de seu envio para decidir se o conteúdo é relevante ou não. Portanto, garanta que ele terá os atributos certos para chamar a atenção do usuário logo no início de seu email.

Uma dica importante é que antes de prosseguir com a criação de suas tabelas e conteúdos, lembre-se sempre de desenhar o esboço de sua mensagem. Assim será mais fácil definir em quais locais deverão ser criados linhas e células.

Mantenha seu objetivo claro logo nos primeiros centímetros do email marketing

O “espaço de ouro” do seu email será sempre a primeira informação a ser exibida, tanto no desktop, quanto como no mobile. Portanto, ela deve instigar a curiosidade do usuário nas diferentes pré-visualizações.

“Espaço de ouro” sendo aplicado, destacando o objetivo do email.

Utilize sabiamente os centímetros de ouro do seu e-mail marketing


Tenha um BDR especializadoNão use mais do que 3 colunas no seu email marketing

6. Não use mais do que 3 colunas

Como falado no início deste post, não é recomendado que seu email marketing ultrapasse os 600 pixels de largura, pois isso garantirá um ponto a mais para ele ser responsivo. Portanto, utilizar mais do que 3 colunas pode tornar o conteúdo de sua mensagem ilegível para muitos usuários dependendo do tamanho da tela utilizada. Caso o seu código HTML não tenha sido criado para o comportamento responsivo no caso de haver colunas, a visualização ficará prejudicada.

Entenda o que significa responsividade


Nunca inclua o texto dentro da imagem no email marketing

7. Nunca inclua o texto dentro da imagem

Isso pode comprometer a legibilidade, pois diversos programas de email ou provedores não baixam as imagens de seu email marketing por padrão e, ainda que abra, o código responsivo pode mandar a mensagem para que ela seja menor, o que ocasiona na perda de leitura do conteúdo da imagem. Portanto, se todo o conteúdo de seu email, inclusive o texto, tiver sido convertido em imagens, o usuário poderá não visualizar nada além de blocos em branco em seu envio. Neste caso, é importante ter os textos alternativos, assim garante que o seu email será entendido mesmo sem as imagens.

Outro ponto que sempre recomendamos é que sua mensagem mantenha uma proporção de texto e imagem.

Entregabilidade é afetada pela relação entre imagem e texto?

Receba o conteúdo no email

Saiba quais as configurações essenciais para envios de email marketing


Não utilize imagens em background no email marketing

8. Não utilize imagens em background

A funcionalidade HTML de imagens em background (background image) não funciona corretamente em diversos dispositivos e programas, dentre eles versões ainda bastante utilizadas para leitura de email como o Microsoft Outlook, por exemplo. Dica: cor no background está liberado!

Veja toda a lista de dispositivos e gerenciadores de email em que a funcionalidade background image funciona corretamente


GIFs animados engajam e funcionam (quase sempre) no email marketing

9. GIFs animados engajam e funcionam (quase sempre)

Inserir animações nos envios gera, em boa parte dos casos, um bom desempenho de engajamento. Entretanto, é claro que estas animações devem ser usadas como complemento ao conteúdo abordado, descrevendo procedimentos e exemplificando assuntos mais complexos, sempre de maneira objetiva. Lembre-se de não exagerar, pois as imagens em movimento podem afetar a leitura do conteúdo.

Além de utilizá-los de forma mais didática, pois também podem ser usados para dar um tom mais descontraído aos seus envios. Então se quiser testar o uso de gifs em suas peças de email marketing, você pode encontrar alguns sites que disponibilizam Gifs de reação, que podem ser úteis nesses casos. Alguns exemplos: GIPHY, Reaction Gifs e Funny or Die.

Também é possível criar seus próprios Gifs, através de serviços como EZGIF.COM e Giphy Gifmaker. Ambos os sites são gratuitos.

Mais engajamento no email marketing com GIFS animados


Seu email marketing precisa ter um objetivo, e o call-to-action deve dizer qual é ele

10. Seu email precisa ter um objetivo, e o call-to-action deve dizer qual é ele

Alguns estudos feitos comprovam que aproximadamente 70% dos usuários que podem ler uma mensagem através da pré-visualização que fazem dela. No entanto, isso significa que diversos usuários podem pré-visualizar sua mensagem pela metade, seja na horizontal, ou na vertica

Todo email precisa ter um objetivo principal, por exemplo: uma inscrição em um webinar, download de um ebook, recebimento de uma conta teste de seu produto ou até a compra em seu site. Mas como o usuário que recebe seu email sabe qual seu objetivo? Simples, a partir do call-to-action. Selecionamos, sobretudo, algumas dicas para um call-to-action de alta conversão:

  • Use textos com verbos orientados à ação. Da mesma forma que o assunto de seu envio precisa ter verbos direcionados à ação para chamar atenção, o call-to-action precisa seguir a mesma regra. Por exemplo: Inscreva-se agora, Baixe o ebook, Compre agora etc;
  • Call-to-action com fonte maior que o texto do conteúdo do email e cores diferenciadas;
  • Crie uma sensação de urgência: o senso de urgência normalmente gera maior número de conversões, por exemplo: “Somente hoje”, “Compre agora” etc;

Exemplo de aplicação de call-to-action.


Uma mensagem planejada caso as imagens não apareçam no email marketing

11. Uma mensagem planejada caso as imagens não apareçam

A grande maioria dos provedores ou gerenciadores de email não irão exibir suas imagens de imediato. Isto é, significa que todas aquelas lindas imagens que demoraram horas para serem criadas para o seu email marketing, podem não fazer parte da sua mensagem em um primeiro momento. Pensando nisso, seu email deve ser desenhado para que seja legível ao usuário, mesmo que não contenha as imagens.

A inclusão de textos alternativos em todas as imagens é obrigatório para que seu conteúdo seja legível para seus contatos mesmo se a imagem por alguma razão não for exibida.

Saiba como criar um texto alternativo com um layout mais amigável em seu email


Não esqueça de adicionar no email marketing o link de visualização no navegador

12. Não esqueça do link de visualização no navegador

Com este link disponível, aqueles que, todavia, por algum motivo não conseguirem visualizar a mensagem por completo, podem ter acesso ao conteúdo em uma página na web, a partir da visualização em um navegador. E além disso, também dá a possibilidade de compartilhar este link com outros usuários.


Faça testes do seu email marketing nos diferentes dispositivos

13. Faça testes nos diferentes dispositivos

Muitas das respostas sobre o que funciona ou não nos diferentes dispositivos utilizados podem ser descobertas a partir de diferentes testes. Para descobrir, use e abuse dos envios de teste com a finalidade de entender o comportamento do seu conteúdo criado dentro do mobile e desktop. Além disso, a utilização do Teste A/B também é uma funcionalidade que pode lhe ajudar a descobrir o layout que irá trazer uma melhor performance.

Agora, se acaso você ainda desconhece os dispositivos utilizados pela sua lista de contatos, encorajamos que você teste plataformas como o Dinamize Mail e o Dinamize Automation, que exibem a informação de quais dispositivos, navegadores e até o sistema operacional utilizados. E, além disso, estas plataformas ainda possuem uma funcionalidade de simulação de como o seu email marketing irá chegar nos diferentes dispositivos.

A utilização do Teste A/B também é uma funcionalidade que pode lhe ajudar a descobrir o layout que irá trazer uma melhor performance.

Exemplo de relatório de envio no Dinamize Automation

Use e abuse dos envios de teste para entender o comportamento do seu conteúdo criado dentro do mobile e desktop

Você pode simular o conteúdo em diferentes dispositivos no Dinamize Automation

Post por: Caroline Gomes
Diagramação por: Tamiris Arias


O que acha de expandir a sua estratégia de marketing com o Dinamize Automation?

Conheça agora!

Gostou deste artigo?

Faça o download dele aqui


Autor


Caroline Gomes - Diretora de Conteúdo e Ensino na Dinamize
Caroline Sands

Especialista em E-mail Marketing e Entregabilidade de Email, trabalho a mais de 7 anos diretamente com a implementação de softwares de e-mail marketing e automação de marketing digital na empresa Dinamize.

Veja conteúdos do Autor

+ Sobre o Autor

Deixe uma resposta

O seu endereço de e-mail não será publicado.

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.