O documento discute estratégias para emails em dispositivos móveis, enfatizando que: 1) a leitura de emails em dispositivos móveis aumentou drasticamente nos últimos anos e agora representa a maioria dos acessos; 2) os designs devem ser otimizados para telas menores e interação com toque, priorizando simplicidade e espaçamento; 3) as abordagens "primeiro o mobile", "fluida" e "responsiva" podem ser usadas para criar emails adaptáveis entre dispositivos.

1. ENVIE EMAILS
INCRÍVEIS
EM DISPOSITIVOS
MÓVEIS

2. VAMOS FALAR SOBRE:
O INCRÍVEL CRESCIMENTO DO MOBILE
CONHECENDO A AUDIÊNCIA
SEUS LEITORES MÓVEIS
ESTRATÉGIAS E MELHORES PRÁTICAS
EXEMPLOS

3. Telas, telas,
telas e mais telas

4. Qual o tamanho do
mercado móvel para emails?
Mobile:
Smartphones (iPhone, Android)
e tablets
Webmail
20%
Mobile
51%
Desktop
Desktop:
Programas de email instalados
(Outlook, Apple Mail)
29%
Webmail:
Email acessado através do
navegador (Gmail, Hotmail, Yahoo!)
Compar he!
Compar he!
Source: Litmus Email Analytics
abcomunica.com.br

5. Olhando para trás até 2011
Desktop
Mobile
Webmail
50%
60
45
30
Source: Litmus Email Analytics
Compar he!
Compar he!
abcomunica.com.br
Q4
20
1
3
3
20
1
Q3
20
13
Q2
13
20
Q1
20
1
2
20
12
Q4
Q2
Q3
2
20
1
Q1
20
11
Q4
11
20
Q3
20
1
Q2
Q1
20
11
10%
1
15
20
12
33%

6. leituras em dispositivos
móveis aumentaram
400%
desde 2011

7. Principais Clientes de Email
#1 - iPhone
#2 - Outlook
#3 - Android
#4 - iPad

8. maior
menor
Compar he!
Compar he!
abcomunica.com.br

9. O que todos tem em comum
TOUCH.

10. 31%
dos marketeiros não sabe a sua
taxa de abertura de email
source: marketingsherpa.com

11. Colocar código de rastreamento
Compar he!
Compar he!
abcomunica.com.br

12. se você recebe um email com a
aparência ruim o que você faz?
+15%
Delete it
Unsubscribe
13.5%
3.8%
Don't know
10%
6.3%
Read anyway
0
Compar he!
Compar he!
30.2%
+68%
View on computer
80.3%
25
50
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
abcomunica.com.br
75
100

13. Como um
email com
aparência pobre
afeta sua
percepção de
uma marca?
Fortemente
Negativo
24%
75%
negativo
Levemente negativo
51%
Compar he!
Compar he!
Neutro
25%
abcomunica.com.br

14. Comportamento de leitura
3%
reabrem
em outro
cliente
97%
veêm em um
único ambiente
Compar he!
abcomunica.com.br

15. Reduza a fricção
Compar he!
Compar he!
abcomunica.com.br

16. NÃO
Formulários pequenos
Animações em flash
Compar he!
Compar he!
abcomunica.com.br

17. SIM
Fácil de usar
Amigável ao toque
Compar he!
Compar he!
abcomunica.com.br

18. Qual o seu objetivo?
É possível criar bons Call to Action no mobile?
É prático para os dedos?
Quantos cliques/toques são necessários?
A landing page está otimizada?

19. estratégia #1
primeiro o mobile
também conhecido com escalável

20. Considere o mobile uma prioridade
Um layout para todas as telas
Design com uma coluna
• 320-500px
Textos e botões grandes
Muito espaço em branco
Call to actions claros
Corpo curto e direto
Compar he!
Compar he!
abcomunica.com.br

21. Compar he!
Compar he!
abcomunica.com.br

22. estratégia #2
fluido

23. A largura do email
se altera de acordo
com a janela de
leitura do dispositivo
Largura baseada em percentuais
Adapta-se para a largura da tela
Texto se ajusta automaticamente
Compar he!
Compar he!
Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013
abcomunica.com.br

24. Menor curva de aprendizado
Melhor para emails com
muito texto
Compar he!
Compar he!
abcomunica.com.br

25. estratégia #3
responsivo

26. Compar he!
Compar he!
abcomunica.com.br

27. Os conteúdos mudam
de tamanho de acordo com a tela.
Telas maiores permitem textos e
imagens maiores.
Esconder conteúdos no mobile
Empilhar colunas
Mudar de um design de 2 colunas
para um design de 1 coluna
Compar he!
h ps://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
Compar he!
abcomunica.com.br

28. Email
é uma mídia única
com considerações
também únicas

29. O dedo é o novo mouse
Compar he!
Compar he!
abcomunica.com.br

30. Usando celular nossos dedos continuam do mesmo tamanho
image: webdesignerdepot.com
Compar he!
Compar he!
abcomunica.com.br

31. Maior é melhor
Corpo do email: 16px+
Títulos: 22px+
Botões: 44px by 44px
Espaçamento: 10px+
Áreas tocáveis
Compar he!
Compar he!
abcomunica.com.br

32. Evite fontes pequenas
-webkit-text-size-adjust:
Compar he!
Compar he!
abcomunica.com.br
none;

33. Email é uma aplicação
e ocasionalmente no navegador
Compar he!
Compar he!
abcomunica.com.br

34. A renderização é inconsistente
através dos dispositivos e sistemas operacionais
Compar he!
Compar he!
abcomunica.com.br

35. RESUMINDO
1
Conhecça sua audiência
2
Planeje o design para o mobile
3
Pense no toque com os dedos
4
Codifique para a medida e
não para o dispositivo

36. Quer criar campanhas por email
que funcionem de verdade?
Deixe com a gente!

37. Dúvidas?
alexsandro@abcomunica.com.br
facebook.com/cruzalexsandro
twitter.com/alexsandrocruz
(79) 3246-0515 | 9876-0333
www.abcomunica.com.br