jason milstead of whitepages - keeping up with the mobile world at sic2013

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

Thanks!jmilstead@whitepages.com