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


A. plataformas de envio


› 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


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.


email no browser do celular?

NÃO!


C. aparelhos que acessam emails


viewports dos aparelhos

http://viewportsizes.com/http://opensignal.com/reports/fragmentation.php

10 novos conceitos


1. mobile-first


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>


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


4. breakpoints

‣ Pontos de quebra do layout.

‣ Momentos de mudança da diagramação

‣ limites definidos nas media queries


5. imagens otimizadas


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.


7. layouts modulares

http://files.templateria.org/exemplos/smash.html


8. otimização dos elementos gráficos

• Imagens

• Botões

• Links inline

• Tabelas

• Menus de categorias

• Redes sociais

• Webfonts

• Textos legais


9. landing pages responsivas

‣ Coerência com o email marketing‣ Continuidade da experiência do usuário‣ Mais recursos a serem explorados


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


1. layout de coluna única


2. meta tag da viewport

<meta name="viewport" content="width=device-width,

initial-scale=1.0" />


3. truque do Outlook


4. textos grandes

YES! ‣ 16px para textos de corpo.

‣ Pode usar webfonts.


5. poucas e boas imagens

‣ Poupando o tráfego das pessoas.‣ Melhor adaptação do conteúdo.


6. links touch-friendly

‣ Botões com 37px de altura.‣ Cores evidentes.‣ Sublinhados e com espaçamento ao redor.


7. flat design


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;}

}


9. remetente, assunto e preheader


10. olhar a versão de texto

‣ Smartwatchese carros conectados

‣ Plataformas de envio


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

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

Internet