Responsive Web Design
Jason Milstead @jason_milstead
@whitepages #sicResponsive
2
More devices than humans on earth
3
Mobile search to exceed desktop volume
4
6% of Fortune 100 sites are mobile friendly
5
Not just a trend
“2013 is the Year of
Responsive Web Design” –
Mashable
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
2x Growth from Phone and Tablet
7
1/3 visit on tablet or mobile phone
8
9
Responsive benefits
• Unified experience across all access
points
• Monetize shifting mobile and tablet traffic
• Common web platform
10
Responsive challenges
• Building and testing four views at once
• Not just a design project
• Ad partners need to support mobile
traffic
PRODUCT TEAM
11
12
Web team
• Product
Management
• Design
• Developers
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
DESIGN
14
15
Four breakpoints based on screen size
16
Flat, modern design
17
Touch-friendly search forms
18
Search results card layout
19
Reorganized details page
20
Grid layout – Tablet & Desktop
21
Grid layout – 7in Tablet and Phone
Native Advertising
• People search
native ads
• Responsive design
• “Sponsored by”
content returned
by partner APIs
• Key to monetizing
mobile traffic
23
Custom and standard display ads
MORE THAN DESIGN
24
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
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)
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
28
SEM – Enhanced Campaigns
• Responsive design allows site to adjust to
user’s screen size, improving advertising
ROI
29
SEO – HTML sitemaps
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
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
BEST PRACTICES
32
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
