Mobile landing pages

63
AdWords API Workshops – All rights reserved

description

São Paulo AdWords API Workshops

Transcript of Mobile landing pages

Page 1: Mobile landing pages

AdWords API Workshops – All rights reserved

Page 2: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile Landing PagesComo melhorar conversões

+Paul Matthews, Google, Inc.*Adaptado e apresentado por Lia Carrari (google.com/+LiaCarrari)

Page 3: Mobile landing pages

AdWords API Workshops – All rights reserved

Agenda

+ Por que otimizar para dispositivos móveis?

+ Dispositivos Móveis na API do Adwords

+ 8 Dicas Essenciais

+ Ferramentas

Page 4: Mobile landing pages

AdWords API Workshops – All rights reserved

Por que otimizar para dispositivos móveis?

Page 5: Mobile landing pages

AdWords API Workshops – All rights reserved http://www.kpcb.com/insights/2013-internet-trends

Por que otimizar para dispositivos móveis?

15% do trafego da internet vem de dispositivos móveis

… e a tendência é aumentar

Page 6: Mobile landing pages

AdWords API Workshops – All rights reserved http://www.kpcb.com/insights/2013-internet-trends

Por que otimizar para dispositivos móveis?

#4 é a posição do Brasil na lista de países com maior número de usuários de smartphones.

23% dos planos no Brasil são de smartphones

de crescimento Y/Y28%

Page 7: Mobile landing pages

AdWords API Workshops – All rights reserved http://www.google.com/think/research-studies/creating-moments-that-matter.html

Por que otimizar para dispositivos móveis?

77% das buscas feitas em dispositivos móveis são em casa ou no trabalho

28% das buscas em dispositivos móveis levam a conversão(visita a loja, chamada, compra)

dos consumidores acham anúncios em dispositivos móveis úteis59%

55% das conversões em compras feitas por dispositivos móveis ocorrem em menos de 1 hora

Page 8: Mobile landing pages

AdWords API Workshops – All rights reserved

Dispositivos Móveis na API do AdwordsComo mostrar anúncios em dispositivos móveis

Page 9: Mobile landing pages

AdWords API Workshops – All rights reserved

Nível da Campanha: CampaignCriterionService

Ajuste de lance para Dispositivos Móveis

Nível do Grupo de Anúncio: AdGroupBidModifierService

Platform+ 30001: high-end mobile (high priority)+ 30000: desktop (low)+ 30002: tablet (low)

bidModifier+ Min: 0.1 (10%)+ Max: 4.0 (400%)+ Opt-Out: 0 (of mobile)

Page 10: Mobile landing pages

AdWords API Workshops – All rights reserved

Ad.devicePreference = 30001

Mobile Preferred

Page 11: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile Ads

AdGroupAdService

Page 12: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile Ads

https://developers.google.com/adwords/api/docs/appendix/templateads?hl=en#flipcup_ad

Page 13: Mobile landing pages

AdWords API Workshops – All rights reserved

8 Dicas Essenciaispara páginas de destino de dispositivos móveis

Page 14: Mobile landing pages

AdWords API Workshops – All rights reserved

Otmize o server-side

+ Reduza de tempo de processamento+ Minimize redirects+ Arquivos:

- concatene recursos- minifique CSS e JavaScript

+ Caching- reuse recursos

1 Entregue rápido

Page 15: Mobile landing pages

AdWords API Workshops – All rights reserved

+ Otimize o client-side

+ Evite processar páginas pesadas

- Use DevTools

- Evite redesenhar

- Eventos JavaScript

- Animações

+ CSS

- Cuidado com geradores

2 Performance

+ Use cache

- Far-future cache

- Versionamento no

nome/URL do arquivo

Page 16: Mobile landing pages

AdWords API Workshops – All rights reserved

3 Conteúdo completo

+ Otimize sem remover conteúdo

+ Mantenha a Consistencia!

+ JavaScript para aprimorar

Page 17: Mobile landing pages

AdWords API Workshops – All rights reserved

4 Adapte para a tela

+ Use design responsivo/adaptativo

+ Mobile-First

+ @media

Page 18: Mobile landing pages

AdWords API Workshops – All rights reserved

+ Viewport

- Configure o viewport com a largura do dispositivo:<meta name="viewport" content="width=device-width, initial-scale=1>

+ Evite entradas de texto

+ Horizontal Scrolling

5 Foco no Usuário

+ Pinch-Zoom & Touch

+ Objeto de navegação grande

+ Legível sem fundo

Page 19: Mobile landing pages

AdWords API Workshops – All rights reserved

+ Texto em imagens

+ Use ALT

6 Acessibilidade

http://www.google.com/accessibility/

Page 20: Mobile landing pages

AdWords API Workshops – All rights reserved

7 Código Robusto

+ Muitos navegadores para testar:

- Detecte recursos - não navegadores

+ Vendor prefix

+ Trate Excessões

+ Evite gargalos

Page 21: Mobile landing pages

AdWords API Workshops – All rights reserved

+ “Above-the-fold”

+ Bloqueio de CSS & JS

+ < ~14KB

+ Web fonts

8 Priorize Conteúdo Visível

Page 22: Mobile landing pages

AdWords API Workshops – All rights reserved

FerramentasPara desenvolvimento em dispositivos móveis

Page 23: Mobile landing pages

AdWords API Workshops – All rights reserved

www.html5rocks.com/mobile/

+ How does your site behave?

+ Great mobile experience

+ Making your site FAST

HTML5 Rocks

Page 24: Mobile landing pages

AdWords API Workshops – All rights reserved

goo.gl/ruR5LU

Debug Remoto

Page 25: Mobile landing pages

AdWords API Workshops – All rights reserved

goo.gl/k5cYA

+ Deselvolva sem dispositivo

Emulador de dispositivos

Page 26: Mobile landing pages

AdWords API Workshops – All rights reserved

goo.gl/JjzS2t

+ Avaliação do seu site

+ Lista de recomendações■ High

■ Medium

■ Low

PageSpeed Insights

Page 27: Mobile landing pages

AdWords API Workshops – All rights reserved

RecursosHTML5 Rocks - http://www.html5rocks.com/mobileRemote Debugging - http://goo.gl/ruR5LUMobile Emulation - http://goo.gl/k5cYAGoogle Acessibility - http://www.google.com/accessibility/Internet Trends 2013 - http://www.kpcb.com/insights/2013-internet-trendsGoogle Think - http://www.google.com/think/research-studies/creating-moments-that-matter.html

Page 28: Mobile landing pages

AdWords API Workshops – All rights reserved

Perguntas?

Page 29: Mobile landing pages

AdWords API Workshops – All rights reserved

Page 30: Mobile landing pages

AdWords API Workshops – All rights reserved

Page 31: Mobile landing pages

AdWords API Workshops – All rights reserved

Page 32: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile Landing PagesHow to improve conversion

+Paul Matthews, Google, Inc.

Page 33: Mobile landing pages

AdWords API Workshops – All rights reserved

Agenda

● Mobile in AdWords API

● 8 Essentials

● Mobile Development Tooling

Page 34: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile in AdWords APIHow to make Ads display on mobile

Page 35: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile bid adjustment

● CampaignCriterionService

● AdGroupBidModifierService

○ Criterion > Platform

○ bidModifier

Page 36: Mobile landing pages

AdWords API Workshops – All rights reserved

● Ad.devicePreference = 30001

Mobile Preferred

Page 37: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile Ads

● AdGroupAdService

○ MobileAd

○ MobileImageAd

Page 38: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile Ads

● TemplateAd

○ App promotion ad

○ TemplateId: 353

Page 39: Mobile landing pages

AdWords API Workshops – All rights reserved

8 EssentialsOf mobile landing pages

Page 40: Mobile landing pages

AdWords API Workshops – All rights reserved

● Optimize server-side

○ Reduce Processing Time

○ Minimize Redirects

1. Deliver Faster

Page 41: Mobile landing pages

AdWords API Workshops – All rights reserved

● Files

○ Concatenate Assets

○ Minify CSS & JavaScript

● Caching

○ Re-use Assets

1. Deliver Faster

Page 42: Mobile landing pages

AdWords API Workshops – All rights reserved

● Enhance with client-side optimizations

● Avoid process heavy pages

○ Use DevTools to detect

○ Avoid repaints

○ JavaScript events & animations

Performance as Feature

Page 43: Mobile landing pages

AdWords API Workshops – All rights reserved

● Use the cache

○ Far-future cache

○ Change URL to break cache

● CSS

○ Beware of generators

Performance as Feature

Page 44: Mobile landing pages

AdWords API Workshops – All rights reserved

● No second-class citizens

● Consistency is King!

● JavaScript to enhance

Full Content on All Devices

Page 45: Mobile landing pages

AdWords API Workshops – All rights reserved

Adapt to the Screen

● Responsive / adaptive design

● Mobile First

○ @media & Breakpoints

Page 46: Mobile landing pages

AdWords API Workshops – All rights reserved

● Viewport

● Avoid text entry

● Horizontal Scrolling

Focus on the User

Page 47: Mobile landing pages

AdWords API Workshops – All rights reserved

● Pinch-Zoom & Touch

● Large target navigation

● Readable without Background

Focus on the User

Page 48: Mobile landing pages

AdWords API Workshops – All rights reserved

● Text within images

● Covered by fingers

Make it accessible

Page 49: Mobile landing pages

AdWords API Workshops – All rights reserved

Code for Robustness

● Too many browsers to test

○ Detect features - not browsers

● Vendor prefixes

● Catch Exceptions

● Avoid Bottlenecks

Page 50: Mobile landing pages

AdWords API Workshops – All rights reserved

● “Above-the-fold”

● Blocking CSS & JS

● Ideally less than ~14KB

● Web fonts

Prioritize Visible Content

Page 51: Mobile landing pages

AdWords API Workshops – All rights reserved

Mobile Development Tools

Page 52: Mobile landing pages

AdWords API Workshops – All rights reserved

● www.html5rocks.com/mobile/

○ How does your site behave?

○ Great mobile experience

○ Making your site FAST

HTML5 Rocks

Page 53: Mobile landing pages

AdWords API Workshops – All rights reserved

● goo.gl/ruR5LU

○ Develop on mobile

Remote Debugging

Page 54: Mobile landing pages

AdWords API Workshops – All rights reserved

● goo.gl/k5cYA

○ Develop for mobile

○ No device needed

Mobile Emulation

Page 55: Mobile landing pages

AdWords API Workshops – All rights reserved

● goo.gl/JjzS2t

○ Scores your page

○ Graded suggestions

■ High

■ Medium

■ Low

PageSpeed Insights

Page 56: Mobile landing pages

AdWords API Workshops – All rights reserved

Summary

Page 57: Mobile landing pages

AdWords API Workshops – All rights reserved

● Mobile Bidding

● Mobile Preferred

● Mobile Ads

Mobile in AdWords API

Page 58: Mobile landing pages

AdWords API Workshops – All rights reserved

● Deliver Faster

● Performance as Feature

● Full Content on All Devices

● Adapt to the Screen

8 Essentials (1)

Page 59: Mobile landing pages

AdWords API Workshops – All rights reserved

● Focus on the User

● Make it accessible

● Code for Robustness

● Prioritize Visible Content

8 Essentials (2)

Page 60: Mobile landing pages

AdWords API Workshops – All rights reserved

● HTML5 Rocks

● Remote Debugging

● Mobile Emulation

Tooling

Page 61: Mobile landing pages

AdWords API Workshops – All rights reserved

Resources

Links

HTML5 Rocks - http://www.html5rocks.com/mobileRemote Debugging - http://goo.gl/ruR5LUMobile Emulation - http://goo.gl/k5cYA

Page 62: Mobile landing pages

AdWords API Workshops – All rights reserved

Questions?

Page 63: Mobile landing pages

AdWords API Workshops – All rights reserved