Por Juliana Padron - Templateria #EmailNaCasper

1. Email Marketing Responsivo
10 cuidados e aplicações que fazem a diferença
Por Juliana Padron

2. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
apresentação
• 10 anos de experiência em
email marketing
• Design e HTML de templates
de email marketing
• Plataforma de envio de email
marketing
alguns clientes atendidos

3. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.

4. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
A. plataformas de envio

5. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
› Restrição de tamanho do HTML (em kb)
› Alteração do cabeçalho do HTML
› HTML original incluído em outro HTML
› Relatório dos programas de email utilizados

6. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
B. programas de email
R7 Mail
BOL Mail
UOL Mail
Terra
Gmail
Webmails
Inbox by Gmail
Roundcube
Yahoo!
Outlook.com
Office 365
Apple Mail
Outlook 2000
Outlook 2002
Outlook 2003
Outlook 2007
Desktop
Outlook 2010
Outlook 2013
Outlook 2016
Thunderbird
Windows 10 Mail
Windows Phone Mail
Android Mail
iPhone Mail
iPad Mail
Mobile
Inbox by Gmail
Gmail App
Yahoo! Mail app
Outlook app
+70testes realizados
por template.

7. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
email no browser do celular?
NÃO!

8. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
C. aparelhos que acessam emails

9. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
viewports dos aparelhos
http://viewportsizes.com/http://opensignal.com/reports/fragmentation.php

10. 10 novos conceitos

11. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
1. mobile-first

12. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
2. media queries
<style type="text/css">
body, table, td, a { -webkit-text-size-adjust: 100%; padding:0;}
@media only screen and (max-width:650px) {
table[class*=m-full] { width:100% !important}
td[class*=m-center] { text-align:center !important;}
td[class*=m-hide] { display:none !important;}
table[class*=m-hide] { display:none !important;}
div[class*=m-full] { display:none !important;}
td[class*=m-padding] { padding-bottom: 10px !important;}
}
</style>

13. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
3. grid fluido
‣ Layout elástico.
‣ Tamanhos definidos em
unidades relativas.
‣ Conteúdo se acomoda a
cada mínima redução do
tamanho da tela.
‣ Processo intermediário ao
breakpoint.
http://files.templateria.org/exemplos/tamarindo/index.html

14. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
4. breakpoints
‣ Pontos de quebra do
layout.
‣ Momentos de mudança
da diagramação
‣ limites definidos nas
media queries

15. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
5. imagens otimizadas

16. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
5. imagens otimizadas

17. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
5. imagens otimizadas

18. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
6. aprimoramento progressivo
‣ Aproveitar o que cada
programa de email tem
de melhor.
‣ Aceitar as diferenças.
‣ Entregar a melhor
experiência que cada
usuário pode ter.

19. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
7. layouts modulares
http://files.templateria.org/exemplos/smash.html

20. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
8. otimização dos elementos gráficos
• Imagens
• Botões
• Links inline
• Tabelas
• Menus de categorias
• Redes sociais
• Webfonts
• Textos legais

21. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
9. landing pages responsivas
‣ Coerência com o email marketing
‣ Continuidade da experiência do usuário
‣ Mais recursos a serem explorados

22. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
10. testes e mais testes…
‣ Litmus
(US$ 79,00 / mês)
‣ Email on Acid
(US$ 35,00 / mês)
‣ Return Path
(preços sob consulta)
‣ Plataformas de envio
‣ Testes manuais

23. 10 truques

24. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
1. layout de coluna única

25. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
2. meta tag da viewport
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />

26. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
3. truque do Outlook

27. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
4. textos grandes
YES!
‣ 16px para textos de corpo.
‣ Pode usar webfonts.

28. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
5. poucas e boas imagens
‣ Poupando o tráfego das pessoas.
‣ Melhor adaptação do conteúdo.

29. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
6. links touch-friendly
‣ Botões com 37px de altura.
‣ Cores evidentes.
‣ Sublinhados e com
espaçamento ao redor.

30. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
7. flat design

31. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
8. media queries básicas
@media all and (max-width:640px){
.full {width:100%!important; height:auto!important;}
.break {display:block;}
.hide {display:none !important;}
}

32. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
9. remetente, assunto e preheader

33. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
10. olhar a versão de texto
‣ Smartwatches
e carros conectados
‣ Plataformas de envio

34. Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
estudos e mais estudos…
‣ Foundation for Emails
http://foundation.zurb.com/emails/email-templates.html
‣ Litmus Templates
https://litmus.com/community/templates
‣ Email Boilerplate
http://www.emailology.org

35. muuuuuito obrigada!
juliana@templateria.com
@julliejoe