Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013
-
Upload
seattle-interactive-conference -
Category
Technology
-
view
105 -
download
1
description
Transcript of Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013
![Page 1: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/1.jpg)
Responsive Web Design
Jason Milstead @jason_milstead
@whitepages #sicResponsive
![Page 2: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/2.jpg)
2
More devices than humans on earth
![Page 3: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/3.jpg)
3
Mobile search to exceed desktop volume
![Page 4: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/4.jpg)
4
6% of Fortune 100 sites are mobile friendly
![Page 5: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/5.jpg)
5
Not just a trend
“2013 is the Year of
Responsive Web Design” –
Mashable
![Page 6: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/6.jpg)
6
Top 40 web property
55 million monthly unique web users
50 million iPhone & Android app downloads
+ over 2B searches/year
+ Largest & most trusted
consumer directory
The Company & The Consumer Site
![Page 7: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/7.jpg)
2x Growth from Phone and Tablet
7
![Page 8: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/8.jpg)
1/3 visit on tablet or mobile phone
8
![Page 9: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/9.jpg)
9
Responsive benefits
• Unified experience across all access
points
• Monetize shifting mobile and tablet traffic
• Common web platform
![Page 10: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/10.jpg)
10
Responsive challenges
• Building and testing four views at once
• Not just a design project
• Ad partners need to support mobile
traffic
![Page 11: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/11.jpg)
PRODUCT TEAM
11
![Page 12: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/12.jpg)
12
Web team
• Product
Management
• Design
• Developers
![Page 13: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/13.jpg)
13
How we work
• Lean and Agile development
process
• Limited documentation, focus on
direct communication
• Design spec as starting point
• Project sprints for responsive
design
![Page 14: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/14.jpg)
DESIGN
14
![Page 15: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/15.jpg)
15
Four breakpoints based on screen size
![Page 16: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/16.jpg)
16
Flat, modern design
![Page 17: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/17.jpg)
17
Touch-friendly search forms
![Page 18: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/18.jpg)
18
Search results card layout
![Page 19: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/19.jpg)
19
Reorganized details page
![Page 20: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/20.jpg)
20
Grid layout – Tablet & Desktop
![Page 21: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/21.jpg)
21
Grid layout – 7in Tablet and Phone
![Page 22: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/22.jpg)
Native Advertising
• People search
native ads
• Responsive design
• “Sponsored by”
content returned
by partner APIs
• Key to monetizing
mobile traffic
![Page 23: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/23.jpg)
23
Custom and standard display ads
![Page 24: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/24.jpg)
MORE THAN DESIGN
24
![Page 25: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/25.jpg)
25
Responsive: Rails 4Old: Rails 2.1
Rebuild Rails architecture
Line: CSS & Static Content
Ad Railcar: Native & Display
Address Railcar
Biz Railcar
People
Railcar
Phone Railcar
![Page 26: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/26.jpg)
26
Optimizely and Google Analytics
• A/B tested old site vs responsive design
• Optimizely – fast, simple, pay as you go
• Compare key metrics (Bounce rate, CTR, PV/Visit)
![Page 27: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/27.jpg)
27
NewRelic app monitoring
• Upgraded Rails 4 app for site speed
• Measure app performance by browser type and
request
• NewRelic to monitor entire technology stack with
alerts
![Page 28: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/28.jpg)
28
SEM – Enhanced Campaigns
• Responsive design allows site to adjust to
user’s screen size, improving advertising
ROI
![Page 29: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/29.jpg)
29
SEO – HTML sitemaps
![Page 30: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/30.jpg)
30
Responsive rollout
• Q1: Homepage, navigation &
footer
• Q2: People search
• Q3 – Q4:
– Reverse Phone
– Reverse Address
– Business Search
• Constant design iterations to
improve user engagement and ad
performance
![Page 31: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/31.jpg)
31
Key metrics from responsive
• Pageviews/Visit up 15%
• Ad revenue up 20%
– Mobile native ad CTR
higher than desktop
• Bounce rate declined 26%
– Page speed dropped 5
seconds
![Page 32: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/32.jpg)
BEST PRACTICES
32
![Page 33: Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c7af554a7959284b8b45b8/html5/thumbnails/33.jpg)
33
Learn from our experience
• Mobile traffic to your site will
double
• Responsive design is more than
“design”
• Test your way to a successful
rollout