mobile landing pages
DESCRIPTION
São Paulo AdWords API WorkshopsTRANSCRIPT
AdWords API Workshops – All rights reserved
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)
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
AdWords API Workshops – All rights reserved
Por que otimizar para dispositivos móveis?
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
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%
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
AdWords API Workshops – All rights reserved
Dispositivos Móveis na API do AdwordsComo mostrar anúncios em dispositivos móveis
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)
AdWords API Workshops – All rights reserved
Ad.devicePreference = 30001
Mobile Preferred
AdWords API Workshops – All rights reserved
Mobile Ads
AdGroupAdService
AdWords API Workshops – All rights reserved
Mobile Ads
https://developers.google.com/adwords/api/docs/appendix/templateads?hl=en#flipcup_ad
AdWords API Workshops – All rights reserved
8 Dicas Essenciaispara páginas de destino de dispositivos móveis
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
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
AdWords API Workshops – All rights reserved
3 Conteúdo completo
+ Otimize sem remover conteúdo
+ Mantenha a Consistencia!
+ JavaScript para aprimorar
AdWords API Workshops – All rights reserved
4 Adapte para a tela
+ Use design responsivo/adaptativo
+ Mobile-First
+ @media
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
AdWords API Workshops – All rights reserved
+ Texto em imagens
+ Use ALT
6 Acessibilidade
http://www.google.com/accessibility/
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
AdWords API Workshops – All rights reserved
+ “Above-the-fold”
+ Bloqueio de CSS & JS
+ < ~14KB
+ Web fonts
8 Priorize Conteúdo Visível
AdWords API Workshops – All rights reserved
FerramentasPara desenvolvimento em dispositivos móveis
AdWords API Workshops – All rights reserved
www.html5rocks.com/mobile/
+ How does your site behave?
+ Great mobile experience
+ Making your site FAST
HTML5 Rocks
AdWords API Workshops – All rights reserved
goo.gl/ruR5LU
Debug Remoto
AdWords API Workshops – All rights reserved
goo.gl/k5cYA
+ Deselvolva sem dispositivo
Emulador de dispositivos
AdWords API Workshops – All rights reserved
goo.gl/JjzS2t
+ Avaliação do seu site
+ Lista de recomendações■ High
■ Medium
■ Low
PageSpeed Insights
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
AdWords API Workshops – All rights reserved
Perguntas?
AdWords API Workshops – All rights reserved
AdWords API Workshops – All rights reserved
AdWords API Workshops – All rights reserved
AdWords API Workshops – All rights reserved
Mobile Landing PagesHow to improve conversion
+Paul Matthews, Google, Inc.
AdWords API Workshops – All rights reserved
Agenda
● Mobile in AdWords API
● 8 Essentials
● Mobile Development Tooling
AdWords API Workshops – All rights reserved
Mobile in AdWords APIHow to make Ads display on mobile
AdWords API Workshops – All rights reserved
Mobile bid adjustment
● CampaignCriterionService
● AdGroupBidModifierService
○ Criterion > Platform
○ bidModifier
AdWords API Workshops – All rights reserved
● Ad.devicePreference = 30001
Mobile Preferred
AdWords API Workshops – All rights reserved
Mobile Ads
● AdGroupAdService
○ MobileAd
○ MobileImageAd
AdWords API Workshops – All rights reserved
Mobile Ads
● TemplateAd
○ App promotion ad
○ TemplateId: 353
AdWords API Workshops – All rights reserved
8 EssentialsOf mobile landing pages
AdWords API Workshops – All rights reserved
● Optimize server-side
○ Reduce Processing Time
○ Minimize Redirects
1. Deliver Faster
AdWords API Workshops – All rights reserved
● Files
○ Concatenate Assets
○ Minify CSS & JavaScript
● Caching
○ Re-use Assets
1. Deliver Faster
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
AdWords API Workshops – All rights reserved
● Use the cache
○ Far-future cache
○ Change URL to break cache
● CSS
○ Beware of generators
Performance as Feature
AdWords API Workshops – All rights reserved
● No second-class citizens
● Consistency is King!
● JavaScript to enhance
Full Content on All Devices
AdWords API Workshops – All rights reserved
Adapt to the Screen
● Responsive / adaptive design
● Mobile First
○ @media & Breakpoints
AdWords API Workshops – All rights reserved
● Viewport
● Avoid text entry
● Horizontal Scrolling
Focus on the User
AdWords API Workshops – All rights reserved
● Pinch-Zoom & Touch
● Large target navigation
● Readable without Background
Focus on the User
AdWords API Workshops – All rights reserved
● Text within images
● Covered by fingers
Make it accessible
AdWords API Workshops – All rights reserved
Code for Robustness
● Too many browsers to test
○ Detect features - not browsers
● Vendor prefixes
● Catch Exceptions
● Avoid Bottlenecks
AdWords API Workshops – All rights reserved
● “Above-the-fold”
● Blocking CSS & JS
● Ideally less than ~14KB
● Web fonts
Prioritize Visible Content
AdWords API Workshops – All rights reserved
Mobile Development Tools
AdWords API Workshops – All rights reserved
● www.html5rocks.com/mobile/
○ How does your site behave?
○ Great mobile experience
○ Making your site FAST
HTML5 Rocks
AdWords API Workshops – All rights reserved
● goo.gl/ruR5LU
○ Develop on mobile
Remote Debugging
AdWords API Workshops – All rights reserved
● goo.gl/k5cYA
○ Develop for mobile
○ No device needed
Mobile Emulation
AdWords API Workshops – All rights reserved
● goo.gl/JjzS2t
○ Scores your page
○ Graded suggestions
■ High
■ Medium
■ Low
PageSpeed Insights
AdWords API Workshops – All rights reserved
Summary
AdWords API Workshops – All rights reserved
● Mobile Bidding
● Mobile Preferred
● Mobile Ads
Mobile in AdWords API
AdWords API Workshops – All rights reserved
● Deliver Faster
● Performance as Feature
● Full Content on All Devices
● Adapt to the Screen
8 Essentials (1)
AdWords API Workshops – All rights reserved
● Focus on the User
● Make it accessible
● Code for Robustness
● Prioritize Visible Content
8 Essentials (2)
AdWords API Workshops – All rights reserved
● HTML5 Rocks
● Remote Debugging
● Mobile Emulation
Tooling
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
AdWords API Workshops – All rights reserved
Questions?
AdWords API Workshops – All rights reserved