Melhores práticas para E-mail Mobile ou Responsivo

em out 16, 2013:por

José Fortes

Integrante da equipe de criação da Next Target como Designer Pleno. Graduado em Design com ênfase em Marketing pela ESPM.
Views52
Mobile-Email

Uma publicação recente da ReturnPath e outros tantos posts neste mesmo site, indicam que o e-mail mobile, ou responsivo, não mostra nenhum sinal de desaceleração. Pelo contrário, é uma tendência crescente, que pelos números que tem apresentado, merece ser explorada e estudada. Nesse post, separo alguns pontos que devem ser trabalhados nesse tipo de e-mail, garantindo o resultado esperado nas campanhas.

1. Foco na Legibilidade

O componente mais importante de um e-mail responsivo eficaz é a legibilidade (não só de e-mail, claro!). Portanto, tem se seguido fortemente a tendência do “flat design”: fontes grandes e com espaço branco suficiente para tornar mais legível. Tenho minhas reclusas quanto a essa escolha, mas é o que tem sido feito.

Notable:

 post

 

Zurb:

post2

2. Botões Grandes

Essa é uma questão que não se tem muito como questionar. Tela pequena e dedos grandes, os botões e links devem ser grandes o suficiente para que com o dedo o usuário consiga tocar. Considerando que vivenciamos a imprecisão do touchscreen, o botão precisa ser mais destacado ainda. (Mas isso não é regra!)

Postagram e 37 Signals:

post4     post5

3. Layouts Simples

Pelo fato de a tela ter um tamanho limitado e o campo do layout responsivo não ser totalmente explorado, encontramos a simplicidade, o “clean”, na composição do template: uma coluna e a criatividade para não deixar o e-mail tão massante.

post6

Nesse próximo exemplo já se vê uma mudança na posição do bloco de texto para dar mais dinamicidade para o layout.

BlackBlaze:

post7

E claro para as exceções das regras, alguns exemplos usando mais colunas.

MOG:

post8

 

4. Mensagem Simples e Direta

Juntamente com a dica 1, na qual o design auxilia a legibilidade, o texto deve ser direto e conciso para poder explorar a fonte grande e espaços em branco, criando assim hierarquia para o chamadas, títulos, sub-títulos e textos complementares.

Paramore|Redd

post10

5. Livre da Desordem

Devido ao espaço limitado da tela, aquela desordem da tela de um navegador com botoes de compartilhamento, barra de ferramentas, entre outros, a mensagem é a linha de frente, sem interferências e ruídos.

Pinterest:

6. Explore a Plataforma

“Por questões tendenciosas e de limitações estruturais, os layouts devem ser simples e estéticamente minimalistas!”  Não mesmo! O diferencial está em explorar ao máximo os limites. Explorar tipografias, cores e imagens. Lembre-se que um dispositivo mobile é usado de uma forma extremamente diferente do que um computador, notebook, etc. Explore!

Litmus:

Deixe um comentário

O que achou do conteúdo? Compartilhe sua opinião:

Gostou do nosso conteúdo?

Deixe seu e-mail aqui e receba as novidades do mercado

One Comentários

eNext Dashboard

eNext Dashboard

SLI Systems

SLI Systems

Calendário

 
JUL 25