Responsive Web
Design

Jason Milstead
@jason_milstead

@whitepages #sicResponsive
More devices than humans on earth

2
Mobile search to exceed desktop volume

3
6% of Fortune 100 sites are mobile
friendly

4
Not just a trend

“2013 is the Year of Responsive
Web Design” – Mashable

5
The Company & The Consumer Site

Top 40
web property
+

over 2B searches/year

+

Largest & most trusted
consumer director...
2x Growth from Phone and Tablet

7
1/3 visit on tablet or mobile phone

8
Responsive benefits
•
•
•

Unified experience across all access points

Monetize shifting mobile and tablet traffic
Common...
Responsive challenges
•
•
•

Building and testing four views at once

Not just a design project
Ad partners need to suppor...
PRODUCT TEAM

11
Web team

•

Product

Management

•
•

Design
Developers

12
How we work

•
•

Lean and Agile development process

Limited documentation, focus on direct
communication

•
•

Design sp...
DESIGN

14
Four breakpoints based on screen
size

15
Flat, modern design

16
Touch-friendly search forms

17
Search results card layout

18
Reorganized details page

19
Grid layout – Tablet & Desktop

20
Grid layout – 7in Tablet and Phone

21
Native Advertising

•

People search
native ads

•
•

Responsive design

•

Key to monetizing
mobile traffic

“Sponsored b...
Custom and standard display ads

23
MORE THAN DESIGN

24
Rebuild Rails architecture
Old: Rails 2.1

Responsive: Rails 4

Address
Railcar

Biz
Railcar

People
Railcar

Phone
Railca...
Optimizely and Google Analytics
•
•
•

A/B tested old site vs responsive design
Optimizely – fast, simple, pay as you go
C...
NewRelic app monitoring
•
•
•

Upgraded Rails 4 app for site speed
Measure app performance by browser type and request
New...
SEM – Enhanced Campaigns
•

Responsive design allows site to adjust to

user’s screen size, improving advertising ROI

28
SEO – HTML sitemaps

29
Responsive rollout

•
•
•

Q1: Homepage, navigation & footer

Q2: People search
Q3 – Q4:

– Reverse Phone
– Reverse Addres...
Key metrics from responsive

•

Pageviews/Visit up 15%

•

Ad revenue up 20%

– Mobile native ad CTR higher
than desktop

...
BEST PRACTICES

32
Learn from our experience

• Mobile traffic to your site will double
• Responsive design is more than
“design”

• Test you...
Thanks!jmilstead@whitepages.
com
Upcoming SlideShare
Loading in...5
×

Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013

1,351

Published on

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.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,351
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Over 7 billion mobile-connected devices by the end of the year
  • Jason Milstead of WhitePages - Keeping up with the Mobile World at SIC2013

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×