Fast tracks: E-Mail Marketing para Mobile Edson Barbieri, Managing Director da ExactTarget Brazil Conrado Muller, Diretor Comercial da Virtual Target Augusto Rocha, Sales Manager da Responsys Brasil Apresentação feita durante o Congresso E-Commerce Brasil Search & Vendas 2013. Mais informações, acesso: http://www.ecommercebrasil.com.br/eventos/congresso-e-commerce-brasil-de-search-vendas-2013/

1. EMAIL MARKETING
Email Marketing para Mobile
Edson Barbieri
PARA MOBILE
Managing Director, ExactTarget Brasil
Edson Barbieri, Managing Director
ExactTarget Brasil

2. O ACESSO A EMAIL
VIA MOBILE

3. Market Share – Email Client
Email Client % de Uso
iPhone 24%
Outlook 16%
iPad 11%
Apple Mail 10% 42%
Live Hotmail 7% Mobile
Google Android 7%
Yahoo! Mail 7%
Gmail 4%
Windows Live Mail 3%
Yahoo! Mail Classic 1%

4. EXPERIÊNCIA
DO USUÁRIO

5. Processo de Conversão

6. Processo de Conversão
Experiência Mobile sem Sucesso

7. O Usuário Mobile
Ela está…
Ouvindo música
Enviado/recebendo SMSs
Usando Skype
No Youtube
Em uma ligação
Checando emails
Navegando
Twittando
etc…
Todas as midias em um
´
unico dispositivo...
Grande expectativa
ao visualizar emails.

8. O Usuário Mobile
A experiência mobile é interativa.
Emails são vistos fase a fase.
De
Assunto
Cabeçalho
Notificação Viewport
Rolagem da Tela

9. O Usuário Mobile
De
Assunto
Cabeçalho
Viewport
Rolagem da Tela

10. O Usuário Mobile
From Name
Subject Line
Preheader
Viewport
Rolagem da Tela Aprox. 320x480px

11. Qual a diferença entre os dispositivos?
Telas Menores &
Interfaces Touch

12. DESIGN
PARA MOBILE

13. Pequenas Telas: Design Básico
• Interface touch = botões maiores
• Conteúdo no topo: pense em uma hierarquia
top-down
• Layout de uma única coluna
• Considere uma navegação completa até o
rodapé
• Aumente o tamanho do texto para garantir
uma boa leitura
• Utilize contraste para garantir uma boa leitura
em diferentes níveis de brilho.
• Não exagere no conteúdo na visualização inicial
inicial – priorize a clareza do conteúdo.
BOM MUITO BOM EXCELENTE!!

14. Interface Touch
Inspire-se nos designs inovadores de Apps!
Botões devem ser atrativos para estimular o seu uso!
http://www.mobile-patterns.com

15. SOLUÇÃO

16. Caixas de Entrada Mobile – Abordagens…
1 Básica
Melhorias simples sem segredos.
Apenas ajustes de design
2 Responsiva
Proporcione uma experiência Mobile
customizada.
Design especial + código

17. Simples Bom Excelente
Desktop Mobile Respons
ivo

18. Caixas de Entrada Mobile – Abordagens…
1 Básica
Estabeleça um visual mobile amigável
e sem excessos
• Coluna única
• Informação Principal & CTA na
coluna esquerda
• Textos e Botões grandes

19. Planeje sua campanha Mobile. Importante: coluna
unica, imagens, textos e botoes grandes.

20. l,
Imagens, cabecalhos e botoes grandes criam um
~ ´
,
estilo facil de manter e que geram bons resultados
em ambos ambientes: Desktop & Mobile.

21. Caixas de Entrada Mobile – Abordagens…
2 Responsiva
Design web responsivo representa
um conjunto de técnicas utilizadas
para desenvolver layouts com
renderização otimizada para
qualquer tela e/ou plataforma em
que seja apresentado.
• Grids
• Media querries
• Imagens ajustáveis
Photo: http://en.wikipedia.org/wiki/Responsive_web_design

22. Email Responsivo: @Media Basics
600 px em multiplasemail becomes 320px, single
600px, multi-column colunas transforma-se em
column.
320px em coluna unica.
@media screen and (max-width: 480px) {…}

23. Email Responsivo: 5 Táticas
1
Empilhar 1 2
2
Ocultar 1 2 1
Substituir 1 2 3
Redimensionar Responsive Responsive
Reestilizar Responsive Responsive

24. 3. Resize, Restyle, Remove
Redimensionar, Reestilizar, Remover

25. Email Responsivo: 3 Abordagens de Layout
Estreitar Alongar Deslocar
http://www.lukew.com/ff/entry.asp?1514

26. Email Responsivo: Complexidade
Recursos Básicos Recursos Especializados
WYSIWYG Alterar Código Email Data Driven
Editor Códigos Customizado Responsivo Email
& Gráficos & Design

27. Importante considerar…
“Nunca penalize os´
usuarios por visitar seu site
em dispositivos com telas
pequenas.”
Brad Frost
Responsive web leader/publisher

28. EXEMPLOS

32. CASOS DE
SUCESSO

33. ESTUDO DE CASO: Rewards Network
Por que uma abordagem Mobile?
• Aberturas mobile estão aumentando entre os
usuários
• A legibilidade Mobile foi baixa com emails
existentes
• Aumento do foco em experiências Mobile
como estratégia de Marketing

34. Before
Antes

35. After
Depois

36. RESULTADOS
• Redução da quantidade de templates de email
• Expansão da estratégia de email marketing para atender as necessidades do
negócios
• Incremento da taxa de cliques em mais de 25% na principal campanha de email

37. PERGUNTAS…

38. OBRIGADO!
Edson Barbieri
Managing Director, ExactTarget Brasil
@ebarbieri