13 dicas para criar um email marketing responsivo

Dinamize EspecialistasCapa, Dica, Dicas do Mail2Easy PRO, Dicas do MKT2Easy, 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 deve ser 100% pensado em qual local 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. 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 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

Muitos de seus contatos podem ler um email 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

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 ultrapasse os 600 pixels de largura. Por isso, 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

Além de comprometer a legibilidade, diversos programas de email ou provedores não baixam as imagens de seu email por padrão. 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.

Nesse caso 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. É 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, também podem ser usados para dar um tom mais descontraído aos seus envios. Existem 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. 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: 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 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. Isso 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 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. Também há 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. Use e abuse dos envios de teste para entender o comportamento do seu conteúdo criado dentro do mobile e desktop. 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.

Caso você desconheça os dispositivos utilizados pela sua lista de contatos, faça uso de plataformas como o Mail2Easy Pro e o MKT2Easy, que exibem a informação de quais dispositivos, navegadores e até o sistema operacional utilizados, além de possuir 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 MKT2Easy

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 MKT2Easy

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


Se você ainda não é cliente, entre em contato agora e receba uma conta teste:

image1_280x210

O Inbound Marketing simples, fácil de usar e que entrega.
Faça um teste
image1_280x210

Email marketing com tudo que sua empresa precisa.
Faça um teste

Gostou deste artigo?

Faça o download dele aqui


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. É 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, também podem ser usados para dar um tom mais descontraído aos seus envios. Existem 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. 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: 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 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. Isso 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 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. Também há 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. Use e abuse dos envios de teste para entender o comportamento do seu conteúdo criado dentro do mobile e desktop. 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.

Caso você desconheça os dispositivos utilizados pela sua lista de contatos, faça uso de plataformas como o Mail2Easy Pro e o MKT2Easy, que exibem a informação de quais dispositivos, navegadores e até o sistema operacional utilizados, além de possuir 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 MKT2Easy