e-mails incríveis em dispositivos móveis

Post on 20-Jun-2015

322 Views

Category:

Social Media

3 Downloads

Preview:

Click to see full reader

DESCRIPTION

O dedo é o novo mouse: entenda a diferença que faz um e-mail responsivo, touch-enabled, fluido e pensado para ser lido em smartphones.

TRANSCRIPT

ENVIE EMAILS

MÓVEISINCRÍVEIS

EM DISPOSITIVOS

VAMOS FALAR SOBRE:

O INCRÍVEL CRESCIMENTO DO MOBILE

CONHECENDO A AUDIÊNCIA

SEUS LEITORES MÓVEIS

ESTRATÉGIAS E MELHORES PRÁTICAS

EXEMPLOS

Telas, telas, telas e mais telas

Qual o tamanho do mercado móvel para emails?

Webmail

20%

Desktop

29%

Mobile

51%

Mobile: Smartphones (iPhone, Android) e tablets

Desktop: Programas de email instalados(Outlook, Apple Mail)

Webmail: Email acessado através donavegador (Gmail, Hotmail, Yahoo!)

Source: Litmus Email Analytics

Compar he!abcomunica.com.br

Compar he!

Source: Litmus Email Analytics

15

30

45

60

Q1 2011

Q2 2011

Q3 2011

Q4 2011

Q1 2012

Q2 2012

Q3 2012

Q4 2012

Q1 2013

Q2 2013

Q3 2013

Q4 2013

Desktop Mobile Webmail

10%

50%

33%

Olhando para trás até 2011

Compar he!abcomunica.com.br

Compar he!

leituras em dispositivos móveis aumentaram

desde 2011

400%

Principais Clientes de Email

#1 - iPhone

#2 - Outlook

#3 - Android

#4 - iPad

menor maior

Compar he!abcomunica.com.br

Compar he!

O que todos tem em comum

TOUCH.

31% dos marketeiros não sabe a sua

taxa de abertura de email

source: marketingsherpa.com

Compar he!abcomunica.com.br

Compar he!

Colocar código de rastreamento

Compar he!abcomunica.com.br

Compar he! Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013

10%

Delete it

Unsubscribe

View on computer

Don't know

Read anyway

0 25 50 75 100

se você recebe um email com a

aparência ruim o que você faz?

80.3%

30.2%

13.5%

3.8%

6.3%

+68%

+15%

Como um email com aparência pobreafeta sua percepção deuma marca?

75%

negativo

Levemente negativo51%

Neutro25%

FortementeNegativo

24%

Compar he!abcomunica.com.br

Compar he!

3% reabrem em outro

cliente 97% veêm em umúnico ambiente

Comportamento de leitura

Compar he!abcomunica.com.br

Reduza a fricção

Compar he!abcomunica.com.br

Compar he!

NÃOFormulários pequenosAnimações em �ash

Compar he!abcomunica.com.br

Compar he!

SIMFácil de usarAmigável ao toque

Compar he!abcomunica.com.br

Compar he!

Qual o seu objetivo?

É possível criar bons Call to Action no mobile?

É prático para os dedos?

Quantos cliques/toques são necessários?

A landing page está otimizada?

estratégia #1

primeiro o mobiletambém conhecido com escalável

Considere o mobile uma prioridade

Um layout para todas as telas

Design com uma coluna

• 320-500px

Textos e botões grandes

Muito espaço em branco

Call to actions claros

Corpo curto e direto

Compar he!abcomunica.com.br

Compar he!

Compar he!abcomunica.com.br

Compar he!

estratégia #2

fluido

Source: BlueHornet Study: Consumer Views of Email Marketing, 2012 and 2013

A largura do emailse altera de acordocom a janela de leitura do dispositivo

Largura baseada em percentuais

Adapta-se para a largura da tela

Texto se ajusta automaticamente

Compar he!abcomunica.com.br

Compar he!

Menor curva de aprendizado

Melhor para emails commuito texto

Compar he!abcomunica.com.br

Compar he!

estratégia #3

responsivo

Compar he!abcomunica.com.br

Compar he!

Os conteúdos mudam de tamanho de acordo com a tela.Telas maiores permitem textos eimagens maiores.

Esconder conteúdos no mobile

Empilhar colunas

Mudar de um design de 2 colunas para um design de 1 coluna

h ps://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic

Compar he!abcomunica.com.br

Compar he!

Email é uma mídia únicacom considerações também únicas

O dedo é o novo mouse

Compar he!abcomunica.com.br

Compar he!

Usando celular nossos dedos continuam do mesmo tamanho

image: webdesignerdepot.com

Compar he!abcomunica.com.br

Compar he!

Corpo do email: 16px+

Títulos: 22px+

Botões: 44px by 44px

Espaçamento: 10px+

Áreas tocáveis

Maior é melhor

Compar he!abcomunica.com.br

Compar he!

-webkit-text-size-adjust: none;

Evite fontes pequenas

Compar he!abcomunica.com.br

Compar he!

Email é uma aplicaçãoe ocasionalmente no navegador

Compar he!abcomunica.com.br

Compar he!

A renderização é inconsistenteatravés dos dispositivos e sistemas operacionais

Compar he!abcomunica.com.br

Compar he!

1 Conhecça sua audiência

RESUMINDO

2 Planeje o design para o mobile

3 Pense no toque com os dedos

4 Codi�que para a medida e não para o dispositivo

Quer criar campanhas por emailque funcionem de verdade?

Deixe com a gente!

Dúvidas?alexsandro@abcomunica.com.brfacebook.com/cruzalexsandro

twitter.com/alexsandrocruz(79) 3246-0515 | 9876-0333

www.abcomunica.com.br

top related