Responsividade dupla e otimização de headers e footers são soluções ótimas e viáveis.
Mais da metade de todos os e-mails são abertos (e 38% dos cliques acontecem) em dispositivos móveis. Portanto, é fundamental otimizar as estratégias mobile de e-mail marketing. O chamado Design Responsivo pode ajudar nesse objetivo. Mas, é importante destacar que o e-mail responsivo não é um projeto de codificação típico, já que requer planejamento, uma nova metodologia e uma mudança potencial no fluxo de trabalho. Entenda melhor:
Design responsivo clássico
O chamado “design responsivo clássico” baseia-se em um esqueleto de e-mail construído para se adaptar ao desktop e aos dispositivos móveis. Trata-se de um design sistemático e matemático, com duas colunas de layout e divisões entre imagens e textos – ou seja, contém muitas orientações e especificações, sem espaço para desvios.
É como um sonho para o gerenciamento de conteúdo: uma vez codificado e testado, é possível deixar tudo sob variáveis dinâmicas, e o processo é simplificado quando torna-se necessário mexer no conteúdo do mailing. Mas, mesmo sendo ótima para mensagens disparadas (onde a automação é o modus operandi), essa estratégia não é a melhor solução para os e-mails promocionais.
Nesses casos, a evolução constante é a regra. Há um monte de testes e reações criativas ao que os outros estão fazendo, em tempos que temos um novo layout criado a cada semana. Então, como acompanhar essa torrente e otimizar o design para mobile? Como dar uma “cara nova” para o e-mail que seja atraente e funcione bem tanto no desktop quanto nos dispositivos móveis – sem sacrificar muito tempo de produção dos designers e desenvolvedores?
A maneira mais fácil é deixar o responsivo de lado e tornar o design amigável ao mobile: mais fino, com grandes manchetes e botões para facilitar a leitura, além do amplo espaço de margem para rolagem e botões.
Se a ideia é ter uma solução sensível, existem duas maneiras fáceis para otimizar os e-mails para dispositivos móveis:
Design responsivo 2 em 1
Como um shampoo e condicionador juntos em uma mesma embalagem, esse conceito conta com dois e-mails projetados de forma independente (um para desktop, outro para mobile) em um único HTML. Sim, é preciso projetar duas vezes, bem como codificar dois e-mails, mas sem as regras duras do wireframe. Aqui pode-se optar por uma tela aberta para projetar o que quiser, garantindo uma liberdade criativa. Não há necessidade de se preocupar muito com CSS (e a pesada bagagem que isso carrega). O tamanho do código pode aumentar um pouco, mas mantê-lo abaixo de 100kb já é suficiente.
Cabeçalhos e rodapés otimizados para mobile
Uma alternativa usada para economizar espaço no topo é mover links de navegação e mídias sociais para o pé do e-mail, com largura suficiente para que sejam clicados. Seja exibindo headers e footers alternativos com design responsivo, ou mesmo estruturando todo o e-mail dessa forma, é imprescindível considerar a experiência do usuário mobile. Ainda assim, é preciso ser cauteloso ao utilizar o design responsivo, pois sempre há o risco de perder as proporções do que é um conteúdo estilizado e responsivo do não-responsivo.
Ao invés de focar no conteúdo do corpo do e-mail, é preferível fazer o design dos cabeçalhos e rodapés proporcionalmente mais largos. Dessa forma, quando o e-mail for aberto via mobile, as “peças de quebra-cabeça” criativas serão dispostas uniformemente e não haverá necessidade de se preocupar com páginas de estilo CSS para cada um. É possível ainda quebrar os dados de textos e imagens e reorganizá-los no corpo do conteúdo.
O design de e-mail marketing sempre se ateve às mudanças, com atalhos e soluções criadas de acordo com o comportamento dos usuários. Com tanta gente interagindo nos dispositivos móveis, codificar e criar o design de e-mails nunca foi tão desafiador – e divertido. Desenhe para o mobile primeiro, mas planeje os cenários alternativos. Tudo está relacionado às boas experiências dos usuários, então a dica é criar uma estratégia inteligente que permita uma produção suave e livre de erros no futuro.
