template responsivo - cuidados e aplicaÇÕes simples que fazem a diferenÇa

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 obrigada!juliana@templateria.com@julliejoe