template responsivo - cuidados e aplicaÇÕes simples que fazem a diferenÇa
TRANSCRIPT
Email Marketing Responsivo10 cuidados e aplicações que fazem a diferença
Por Juliana Padron
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
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
A. plataformas de envio
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
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 realizadospor template.
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
email no browser do celular?
NÃO!
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
C. aparelhos que acessam emails
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
viewports dos aparelhos
http://viewportsizes.com/http://opensignal.com/reports/fragmentation.php
10 novos conceitos
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
1. mobile-first
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>
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
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
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
5. imagens otimizadas
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
5. imagens otimizadas
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
5. imagens otimizadas
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.
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
7. layouts modulares
http://files.templateria.org/exemplos/smash.html
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
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
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
10 truques
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
1. layout de coluna única
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" />
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
3. truque do Outlook
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
4. textos grandes
YES! ‣ 16px para textos de corpo.
‣ Pode usar webfonts.
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.
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.
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
7. flat design
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;}
}
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
9. remetente, assunto e preheader
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
10. olhar a versão de texto
‣ Smartwatchese carros conectados
‣ Plataformas de envio
Copyright © 2016 Templateria Ltda EPP. Todos os direitos reservados.
estudos e mais estudos…
‣Foundation for Emailshttp://foundation.zurb.com/emails/email-templates.html
‣ Litmus Templateshttps://litmus.com/community/templates
‣Email Boilerplatehttp://www.emailology.org
muuuuuito [email protected]@julliejoe