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.

1. Responsive Web
Design
Jason Milstead
@jason_milstead
@whitepages #sicResponsive

2. More devices than humans on earth
2

3. Mobile search to exceed desktop volume
3

4. 6% of Fortune 100 sites are mobile
friendly
4

5. Not just a trend
“2013 is the Year of Responsive
Web Design” – Mashable
5

6. The Company & The Consumer Site
Top 40
web property
+
over 2B searches/year
+
Largest & most trusted
consumer directory
55 million
monthly unique web
users
50 million iPhone &
Android app downloads
6

7. 2x Growth from Phone and Tablet
7

8. 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
9

10. Responsive challenges
•
•
•
Building and testing four views at once
Not just a design project
Ad partners need to support mobile traffic
10

11. PRODUCT TEAM
11

12. Web team
•
Product
Management
•
•
Design
Developers
12

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
13

14. DESIGN
14

15. Four breakpoints based on screen
size
15

16. Flat, modern design
16

17. Touch-friendly search forms
17

18. Search results card layout
18

19. Reorganized details page
19

20. Grid layout – Tablet & Desktop
20

21. Grid layout – 7in Tablet and Phone
21

22. Native Advertising
•
People search
native ads
•
•
Responsive design
•
Key to monetizing
mobile traffic
“Sponsored by”
content returned by
partner APIs

23. Custom and standard display ads
23

24. MORE THAN DESIGN
24

25. Rebuild Rails architecture
Old: Rails 2.1
Responsive: Rails 4
Address
Railcar
Biz
Railcar
People
Railcar
Phone
Railcar
Ad Railcar: Native & Display
Line: CSS & Static Content
25

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)
26

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
27

28. SEM – Enhanced Campaigns
•
Responsive design allows site to adjust to
user’s screen size, improving advertising ROI
28

29. SEO – HTML sitemaps
29

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
30

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
31

32. 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
33

34. Thanks!jmilstead@whitepages.
com