2. Search Powers Apps
2
0 20,000 40,000 60,000 80,000 100,000
*Apple Maps
Yahoo Stocks
Apple App Suite
*Google Maps
Gmail
Pandora Radio
*YouTube
*Google Search
*Google Play
Facebook
Avg. Monthly Smartphone Visitors
Source: ComScore 2014 U.S. Digital Future in Focus
Search
48%
Other
52%
Search Apps vs. Other
86% of time on iOS and Android devices is spent on apps
5. mad men
whiskey
old fashioned
Mobile Search Data and SERP Analysis
Identify In-Demand Content:
• Understand your audience personas
• Audit social search results for in-demand media
5
Source: Google Trends
Mobile
45%
Tablets
12%
Laptops
43%
Searches by Devices
old fashioned
7. Mobile User Experience
• Embrace mobile design constraints
• Optimize for PageSpeed
• Focus on goals and the path of least resistance
7
Mobile friendly video
content.
Properly sized
tap targets.
Legible font sizes.Small screen sizes and
slow connections.
Source: Google PageSpeed Insights
8. Design for Conversion
Make it easy and fun for users to create content
and complete tasks:
• Minimize requirements
• Use HTML5 input elements if possible
• Use autocomplete, autocapitalize, autocorrect
• Show completion progress where applicable
• Implement client-side validation
• Use top-aligned and/or in-field labels
• Test forms on iOS and Android devices
• Test form designs with keyboard in view
• Favor new content input methods
– camera, mic, location
8
9. Supported Mobile Configurations
DYNAMIC SERVING
Different HTML on the same URL based on user agent
SEPARATE MOBILE URLS
Separate mobile website best hosted on a subdomain
RESPONSIVE WEB DESIGN (recommended)
CSS drives the experience mostly based on screen size
9
10. Dynamic Serving
JavaScript agent detection generates different HTML on one URL:
– Most difficult for Google to interpret
– Slower than other configurations
– Requires Vary: User-Agent in HTTP header
10
GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)
11. Separate Mobile Site
Hosts a mobile version of each page on a subdomain (m.example.com)
– Fastest of the three configurations
– Most complex setup, most maintenance, and most prone to error
– Not a solution for large screens
11
12. Separate Mobile URLs Done Correctly
12
• A desktop search returns the
desktop page
• A mobile search returns the
corresponding mobile page
13. Responsive Web Design
• Responsive web design is the recommended configuration:
– Avoids the complicated setup of a separate mobile site
– Consolidates all experiences to one URL
– More future-ready as new devices become mainstream
13
14. Selecting the Right Configuration
The primary drawback to responsive web design is load time:
– RWD is the future, but is currently slow and not feature-phone compliant
– A separate mobile site is the fastest and most tailored mobile experience
– The future of RWD includes adaptive content and dynamic properties
14
2.81
13.55
11.64
0
5
10
15
Separate Mobile Site RWD Desktop
Average Load Time in Seconds
Source: High Performance Responsive Design By Tom Barker – O'Reilly Media
15. Mobile First Social Search Networks
Mobile first social networks are surging:
• Camera content is driving traffic and engagement
• Emerging networks have virtually no laptop traffic
15
Source: ComScore 2014 U.S. Digital Future in Focus
99%
PINTEREST
98%
INSTAGRAM
99%
VINE
86%
TWITTER
16. Prepare for Google Now
Next generation search minimizes the need for search queries:
• Improved support for natural language and question answering
• Improved context and location awareness
• Increased personalization around user personas
16
18. 18
GLOBAL SMARTPHONE PENETRATION
0 50 100 150 200 250 300
Spain
France
Italy
UK
Germany
Japan
USA
With Smartphones Without Smartphones
Source: ComScore MobiLens, 3 month average ending July 2013. Figures in millions.
74%
59%
59%
70%
59%
36%
60%
19. 19
MOBILE IS DAILY LIFE
use their smartphone to visit
a social network every day 53%
Source: Google Our Mobile Planet: United Kingdom May 2013 – http://goo.gl/7HpOII
search on their smartphone
every day54%
20. 20
17%
ON-THE-GO
MOBILE NEVER SLEEPS
A mobile user is more likely to be at home than on the go!
68%
ATHOME
2%
INASTORE
9%
ATWORK
Source: Google – Creating Moments that Matter
22. 22
MOBILE CLOSES THE DEAL
Source: Google – Creating Moments that Matter
of mobile searches result in
conversions 28%
of mobile searches trigger
additional action and
conversions
73%
23. SEPARATE MOBILE URL CHECKLIST
23
Requirement Details
Sitemap Alternate: Alternate URL appears in sitemap
Page Alternate: Alternate URL appears on page via rel=“alternate” tag
Alternates Match: Alternate URLs in sitemap and on page must match exactly
Canonical Match: Mobile canonical URL must match desktop canonical and sitemap URL
Mobile Page Web Response: The mobile page should return a 302 redirect to web users
Mobile Page Web Vary: Use Vary: User-Agent in the HTTP header
Mobile Page Smartphone Response: The mobile page should return a 200 status code to smartphone users
Mobile Page Smartphone Vary: Use Vary: User-Agent in the HTTP header
Mobile Page Mobile Response: The mobile page should return a 200 status code to feature phone users
Mobile Page Mobile Vary: Use Vary: User-Agent in the HTTP header
Desktop Page Web Response: The desktop page should return a 200 status code to web users
Desktop Page Web Vary: Use Vary: User-Agent in the HTTP header
Desktop Page Smartphone Response: The desktop page should return a 302 redirect to smartphone users
Desktop Page Smartphone Vary: Use Vary: User-Agent in the HTTP header
Desktop Page Mobile Response: The desktop page should return a 302 redirect to feature phone users
Desktop Page Mobile Vary: Use Vary: User-Agent in the HTTP header
Source: http://goo.gl/ytqD55
24. CITED AND ADDITIONAL RESOURCES
Google
• Mobile Search Moments Study: http://goo.gl/X6Gg7u
• Mobile Path to Purchase: Five Key Findings: http://goo.gl/yT4XDH
• Building Smartphone-Optimized Websites: http://goo.gl/o0pOFS
• Our Mobile Planet: http://goo.gl/yTGIkY
Other
• Developing Web Content for Safari: http://goo.gl/RFTh9M
• Organizing Mobile: http://goo.gl/rIEuyR
• Google Lays Out It’s Mobile User Experience Strategy:
http://goo.gl/WatWwS
• 2014 U.S. Digital Future in Focus: http://goo.gl/KWGVM1
24
Editor's Notes
Content, data and design
Smartphone video consumption increased 38% in 2013
Slower than other configurations since it uses client-side redirection and JavaScript to alter the markup
Google compliance guidelines require the Vary HTTP header
Ensure ISP caching doesn’t serve the wrong version
Helps Google discover the mobile optimized content
47% of the top US sites use the separate mobile config., these sites weigh 55% less than the average responsive site.
Separate sites have segmented source code, separate URLs and require redirects. This creates additional setup and maintenance as well as a slower and more error prone user experience.
Hosting on a subdomain is recommended over the folder structure.
Twitter = 86%
Facebook = 68%
Snapchat = 100%
Siri, Google Now and Bing’s Cortana
“Smartphones are becoming the ultimate shopping companion” –Google
Since users have their smartphones with them at all times, they can create content whenever they feel the urge.