2. Mobile Landing Pages
Como melhorar conversões
+Paul Matthews, Google, Inc.
*Adaptado e apresentado por Lia Carrari (google.com/+LiaCarrari)
AdWords API Workshops – All rights reserved
3. 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
4. Por que otimizar
para dispositivos móveis?
AdWords API Workshops – All rights reserved
5. 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
6. 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%
28%
AdWords API Workshops – All rights reserved
dos planos no Brasil são
de smartphones
de crescimento Y/Y
http://www.kpcb.com/insights/2013-internet-trends
7. Por que otimizar para dispositivos móveis?
77%
28%
das buscas feitas em
dispositivos móveis são
em casa ou no trabalho
das buscas em dispositivos
móveis levam a conversão
(visita a loja, chamada, compra)
AdWords API Workshops – All rights reserved
55%
das conversões em compras
feitas por dispositivos móveis
ocorrem em menos de 1 hora
59%
dos consumidores acham
anúncios em dispositivos
móveis úteis
http://www.google.com/think/research-studies/creating-moments-that-matter.html
8. Dispositivos Móveis na
API do Adwords
Como mostrar anúncios em dispositivos móveis
AdWords API Workshops – All rights reserved
9. Ajuste de lance para Dispositivos Móveis
Nível da Campanha: CampaignCriterionService
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)
Nível do Grupo de Anúncio: AdGroupBidModifierService
AdWords API Workshops – All rights reserved
12. Mobile Ads
AdWords API Workshops – All rights reserved
https://developers.google.com/adwords/api/docs/appendix/templateads?hl=en#flipcup_ad
13. 8 Dicas Essenciais
para páginas de destino de dispositivos móveis
AdWords API Workshops – All rights reserved
14. 1 Entregue rápido
Otmize o server-side
+ Reduza de tempo de processamento
+ Minimize redirects
+ Arquivos:
- concatene recursos
- minifique CSS e JavaScript
+ Caching
- reuse recursos
AdWords API Workshops – All rights reserved
15. 2 Performance
+ Otimize o client-side
+ Evite processar páginas pesadas
+ Use cache
- Far-future cache
- Use DevTools
- Versionamento no
- Evite redesenhar
nome/URL do arquivo
- Eventos JavaScript
- Animações
+ CSS
- Cuidado com geradores
AdWords API Workshops – All rights reserved
16. 3 Conteúdo completo
+ Otimize sem remover conteúdo
+ Mantenha a Consistencia!
+ JavaScript para aprimorar
AdWords API Workshops – All rights reserved
17. 4 Adapte para a tela
+ Use design responsivo/adaptativo
+ Mobile-First
+ @media
AdWords API Workshops – All rights reserved
18. 5 Foco no Usuário
+ 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
+ Pinch-Zoom & Touch
+ Objeto de navegação grande
+ Legível sem fundo
AdWords API Workshops – All rights reserved
19. 6 Acessibilidade
+ Texto em imagens
+ Use ALT
http://www.google.com/accessibility/
AdWords API Workshops – All rights reserved
20. 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
21. 8 Priorize Conteúdo Visível
+ “Above-the-fold”
+ Bloqueio de CSS & JS
+ < ~14KB
+ Web fonts
AdWords API Workshops – All rights reserved
27. Recursos
HTML5 Rocks - http://www.html5rocks.com/mobile
Remote Debugging - http://goo.gl/ruR5LU
Mobile Emulation - http://goo.gl/k5cYA
Google Acessibility - http://www.google.com/accessibility/
Internet Trends 2013 - http://www.kpcb.com/insights/2013-internet-trends
Google Think - http://www.google.com/think/research-studies/creating-moments-that-matter.html
AdWords API Workshops – All rights reserved
40. 1. Deliver Faster
● Optimize server-side
○ Reduce Processing Time
○ Minimize Redirects
AdWords API Workshops – All rights reserved
41. 1. Deliver Faster
● Files
○ Concatenate Assets
○ Minify CSS & JavaScript
● Caching
○ Re-use Assets
AdWords API Workshops – All rights reserved
42. Performance as Feature
● Enhance with client-side optimizations
● Avoid process heavy pages
○ Use DevTools to detect
○ Avoid repaints
○ JavaScript events & animations
AdWords API Workshops – All rights reserved
43. Performance as Feature
● Use the cache
○ Far-future cache
○ Change URL to break cache
● CSS
○ Beware of generators
AdWords API Workshops – All rights reserved
44. Full Content on All Devices
● No second-class citizens
● Consistency is King!
● JavaScript to enhance
AdWords API Workshops – All rights reserved
45. Adapt to the Screen
● Responsive / adaptive design
● Mobile First
○ @media & Breakpoints
AdWords API Workshops – All rights reserved
46. Focus on the User
● Viewport
● Avoid text entry
● Horizontal Scrolling
AdWords API Workshops – All rights reserved
47. Focus on the User
● Pinch-Zoom & Touch
● Large target navigation
● Readable without Background
AdWords API Workshops – All rights reserved
48. Make it accessible
● Text within images
● Covered by fingers
AdWords API Workshops – All rights reserved
49. Code for Robustness
● Too many browsers to test
○ Detect features - not browsers
● Vendor prefixes
● Catch Exceptions
● Avoid Bottlenecks
AdWords API Workshops – All rights reserved
50. Prioritize Visible Content
● “Above-the-fold”
● Blocking CSS & JS
● Ideally less than ~14KB
● Web fonts
AdWords API Workshops – All rights reserved
57. Mobile in AdWords API
● Mobile Bidding
● Mobile Preferred
● Mobile Ads
AdWords API Workshops – All rights reserved
58. 8 Essentials (1)
● Deliver Faster
● Performance as Feature
● Full Content on All Devices
● Adapt to the Screen
AdWords API Workshops – All rights reserved
59. 8 Essentials (2)
● Focus on the User
● Make it accessible
● Code for Robustness
● Prioritize Visible Content
AdWords API Workshops – All rights reserved
60. Tooling
● HTML5 Rocks
● Remote Debugging
● Mobile Emulation
AdWords API Workshops – All rights reserved
61. Resources
Links
HTML5 Rocks - http://www.html5rocks.com/mobile
Remote Debugging - http://goo.gl/ruR5LU
Mobile Emulation - http://goo.gl/k5cYA
AdWords API Workshops – All rights reserved