Embed Size (px)
DESCRIPTION
Keeping up with the Mobile World: Best Practices for Responsive Design Across Platforms A recent study found that only six percent of the web’s most trafficked properties have optimized their websites for mobile users. While Google has made it clear that they will punish sites that are not optimized for mobile, perhaps the more important thing for a company, large or small to consider is, how the absence of responsive design across platforms could be impacting their bottom line. In this presentation, Jason Milstead, General Manager of WhitePages, a company that is currently investing in a complete overhaul of its web and mobile properties, will discuss how enabling responsive design has not only created a better user experience for its 50 MM monthly unique users (mobile + desktop) but has also increased revenue across platforms.
Citation preview
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
