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

Download TEMPLATE RESPONSIVO - CUIDADOS E APLICAÇÕES SIMPLES QUE FAZEM A DIFERENÇA

Post on 08-Jan-2017

141 views

Category:

Internet

4 download

Embed Size (px)

TRANSCRIPT

  • Email Marketing Responsivo10 cuidados e aplicaes que fazem a diferena

    Por Juliana Padron

  • Copyright 2016 Templateria Ltda EPP. Todos os direitos reservados.

    apresentao

    10 anos de experincia 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.

    Restrio de tamanho do HTML (em kb)

    Alterao do cabealho do HTML

    HTML original includo em outro HTML

    Relatrio 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?

    NO!

  • 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

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

  • Copyright 2016 Templateria Ltda EPP. Todos os direitos reservados.

    3. grid fluido Layout elstico. Tamanhos definidos em

    unidades relativas. Contedo se acomoda a

    cada mnima reduo do tamanho da tela.

    Processo intermedirio 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 mudana da diagramao

    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 diferenas.

    Entregar a melhor experincia que cada usurio 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. otimizao dos elementos grficos

    Imagens

    Botes

    Links inline

    Tabelas

    Menus de categorias

    Redes sociais

    Webfonts

    Textos legais

  • Copyright 2016 Templateria Ltda EPP. Todos os direitos reservados.

    9. landing pages responsivas

    Coerncia com o email marketing Continuidade da experincia do usurio Mais recursos a serem explorados

  • Copyright 2016 Templateria Ltda EPP. Todos os direitos reservados.

    10. testes e mais testes

    Litmus(US$ 79,00 / ms)

    Email on Acid (US$ 35,00 / ms)

    Return Path (preos 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

  • 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 trfego das pessoas. Melhor adaptao do contedo.

  • Copyright 2016 Templateria Ltda EPP. Todos os direitos reservados.

    6. links touch-friendly

    Botes com 37px de altura. Cores evidentes. Sublinhados e com espaamento 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 bsicas

    @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 verso 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