Responsive Design

creating future friendly design systems

Did we break the web?

Yahoo Evolution

Impact of Responsive Designs (Source)

Time Inc. Responsive Redesign

Mobile is up 23% compared to what it had been (source)

O’Neill Clothing Responsive Redesign

591.4% revenue growth on Android devices (source)

Skinny Ties Responsive Redesign

377.6% revenue growth on iPhone (source)

Regent College Responsive Redesign

99% increase in unique visitors (source)

What is Responsive Design?

Providing the Optimal Experience Based on Device Capabilities

CSS Media Queries

@media screen and (min-width: 960px) { // styles here }
@media screen and (max-width: 720px) { // styles here }
@media screen and (max-width: 320px) { // styles here }
@media screen and (orientation:landscape) { // styles here }
A
B
C
D
E

Feature Detection

GPS, screen density and touch capabilities.

Why Use Responsive Design?

One Content Base

Why Use Responsive Design?

One Code Base

Why Use Responsive Design?

Device Blur

Why Use Responsive Design?

Future Friendly

What Can I Do To Get You Into a New
Responsive Web Design Today?

Start from scratch

Discovery, design, development, and deployment

Retrofit

Fastest and low-risk approach to create a better experience for users.

Start with an "m dot"

People.com

Start with an "m dot"

People.com

Responsible Responsive Design


- Jeffrey Zeldman

Content First

Determine A Content & Feature Baseline

Responsible Responsive Design

Mobile First

Conditionally Add Content / Don't Hide / Performance is Design

Responsible Responsive Design

Touch Friendly

Tap Areas, Touch Interactions, Gestures

Make the right choice!

(Gradient Chart)

Possible Roadblocks?

Existing Content, CMS, etc.

Will not happen over night, do plenty of research