Desenvolvimento

27 fev, 2018

Dicas para desenvolver um template de e-mail responsivo

Publicidade

Nos últimos anos, os smartphones têm sido a forma mais comum das pessoas acessarem a internet. De acordo com números da comScore, o acesso já é maior que o desktop, desde 2014. O crescimento da adoção dos smartphones tem um impacto direto nas ações de marketing. Desde que o uso de mobile cresceu, já não faz mais sentido criar seu site pensando apenas em usuários navegando via desktop. Já faz alguns anos que é quase obrigatório que qualquer coisa que sua empresa faça, funcione bem também em celulares.

A importância dos e-mails responsivos

Por volta de 2011, menos de 10% dos e-mails eram abertos através de um smartphone. Hoje em dia esse número já é de aproximadamente 55%. Mas afinal, qual a grande vantagem de se ter um e-mail responsivo e por que ele aumenta a taxa de abertura e consequentemente as vendas dos seus e-mails?

Pelo simples fato que ele melhora a experiência (UX) dos seus usuários com sua newsletter. Quando falamos que a abertura de e-mails tem crescido em smartphones, não quer dizer apenas que as pessoas preferem utilizar o celular ao invés do desktop, mas sim que elas passaram a utilizar os smartphones em contextos onde não utilizavam o desktop.

Por exemplo, é muito comum ver pessoas lendo e-mails na rua enquanto andam, ou dentro de um restaurante enquanto esperam um amigo. Nesse tipo de situação em que a pessoa quer algo rápido e de fácil acesso, os e-mails responsivos são a grande solução.

As pessoas não querem ler todo o e-mail ou ficar dando zoom em uma mensagem que foi criada para ser lida em um computador e que o texto está muito pequeno. Elas querem apenas olhar rapidamente o conteúdo, ver se algo chama sua atenção e se for o caso, salvar o link para ler o conteúdo com mais calma em um segundo momento.

Texto legíveis no celular, botões chamativos e clicáveis com o dedo e a não necessidade de dar zoom são apenas algumas das coisas que melhoram a experiência dos seus leitores.

Dicas para considerar na hora de criar seu template de e-mail responsivo

O layout do seu e-mail, o template de e-mail, é extremamente importante. Seu e-mail será acessado dos mais diversos celulares e nas mais diferentes telas. Por isso, tenha sempre certeza que a formatação está funcionando adequadamente no mínimo nos principais browsers e celulares do mercado.

Veja algumas dicas abaixo de como montar um HTML bem formatado para smartphones:

  1. Crie seus e-mails com largura entre 600 e 650px, porém, sempre delimite uma largura mínima de 300px (min-width:300px).
  2. Evite trabalhar e-mails com muitas colunas. Ao criar seu template de e-mail, opte sempre por trabalhar com no máximo com duas colunas principais. Se você começar a trabalhar com três ou quatro colunas, pode ter certeza que os elementos ficarão apertados em telas de smartphones ou darão um grande trabalho para você ajustar a programação.
  3. Ao escrever seu código HTML, lembre-se de ajustá-lo para funcionar em todos os provedores de e-mail. Veja algumas dicas simples abaixo:
  • Hotmail não suporta margin ou margin_top, ou seja, sempre limite seu css a margin_left, margin_right e margin_bottom.
  • Problema com o embedded CSS e Gmail. Nesse caso, a dica é sempre trabalhar com inline css. Mas, não é apenas o código que tem de estar bem feito, existem também uma série de cuidados visuais com o seu e-mail:
    • As imagens utilizadas devem estar devidamente otimizadas. Evite imagens pesadas ou de tamanho maior que o necessário.
    • Tenha certeza que o tamanho da imagem não excede o display da tela do cliente. Para isso, você pode sempre definir min-width:100% na própria imagem.
    • Sempre adicione alt text nas imagens do seu e-mail. Isso vai ajudar seus usuários a saberem do que se trata a imagem quando estiverem carregando. Isso é especialmente válido quando seus leitores estiverem com internet lenta.
    • Evite links muitos pequenos ou botões muito próximos uns dos outros. Lembre-se, seus usuários estão lendo seus e-mails na rua, utilizando o dedo para navegar e eles não têm tempo para ficar tentando acertar o botão correto.

Ou seja, o design e desenvolvimento de um bom e-mail responsivo é tão importante quanto a sua estratégia de marketing. Utilize algumas das técnicas citadas acima e com certeza você terá bons resultados.