JEREMY OSBORNAcademic Director, Aquent Gymnasium

Web designer/developer since the 20th century

Author of books on web technology

Corporate consultant and trainer

Follow me on Twitter: @jeremias

RESPONSIVE WEB DESIGN IS CHANGING THE WORLD

TODAY’S PRESENTATION1. Why Responsive Web Design was needed

2. The benefits of RWD

3. Getting ahead of the curve (The future of RWD)

A BRIEF HISTORY OF HOW WE GOT HERE

1. WHY RESPONSIVE DESIGN WAS NEEDED

4 CATEGORIES FOR “MOBILE”

APPS

DESKTOP SITE(SCALED)

M.DOT SITE

RESPONSIVE SITE

(MOBILE-ONLY)

RWD IS 4 YEARS OLD

AT ITS MOST BASIC

1. Fluid Grids 2. Flexible Images 3. Media Queries

IN MAY, 2010 . . .

THE 3G WAS THE LATEST IPHONE

THE FIRST IPAD WAS ONLY 6 WEEKS OLD

THE HTC DROID INCREDIBLE WAS THE HOTTEST ANDROID PHONE ON THE MARKET

THE WEB WAS THIS

1024 X 768 !

960 X 768 !

800 X 600

I FIND YOUR LACK OF WEB BROWSERS . . . DISTURBING

Much has changed in 4 years

SMARTPHONE AND TABLET GROWTH HAS ROCKETED

PERCENTAGE OF AMERICANS WHO OWN . . .

DESKTOP & LAPTOP SALES IN DECLINE

WORLD COMMUNICATION IS CHANGING DRAMATICALLY

http://www.internetretailer.com/2014/03/06/consumers-spend-33-hours-day-their-smartphones

CONSUMERS SPENDING UP TO 3.3 HOURS/DAY ON THEIR SMARTPHONES!

- Digital marketing firm ExactTarget

Earth population = 7 Billion

In 2011 there were 6 Billion mobile subscriptions1 !

1 http://www.itu.int/ITU-D/ict/facts/2011/material/ICTFactsFigures2011.pdf

87%

“I think PCs are going to be like trucks. Less people will need them. And this transformation is going to make some people uneasy . . .” !

-Steve Jobs June 1, 2010

MOBILE MIGRATION

RWD ADDRESSES THE UNKNOWN FUTURE OF THE WEB

LET US EXAMINE THE HYPE!

TECHNOLOGY TRIGGER

INFLATED EXPECTATIONS

TROUGH OF DISILLUSIONMENT

SLOPE OF ENLIGHTENMENT

PLATEAU OF PRODUCTIVITY

REALITY CHECK

http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/

WHY?

WE HAVE A LOT OF “UNLEARNING” TO DO!

TECHNOLOGY CHALLENGES

USER INTERFACE CHALLENGES

WORKFLOW CHALLENGES

http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/

2. THE BENEFITS OF RWD

BENEFIT #1

RWD IMPROVES REACH

To understand the good, let us first look at the bad

INCONSISTENT EXPERIENCE

“m.dot site”

LIMITED REACH

LIMITED REACH

WHAT WE WANT IS . . .

CONSISTENT EXPERIENCE!

BENEFIT #2

THE GOOGLE LIKES RWD

CONTENT ON “M.DOT” SITES IS HARDER TO SHARE (AND INDEX!)

IT CAN GO WRONG THE OTHER WAY AS WELL

ANOTHER EXAMPLE OF AN M.DOT SITE

GOOGLE’S RECOMMENDATION IS TO USE RWD

https://developers.google.com/webmasters/smartphone-sites/

USER EXPERIENCE IS BECOMING MORE RELEVANT FOR SEO

“The goal of many of our ranking changes is to help searchers find sites that provide a great user experience and fulfill their information needs.” !

-Matt Cutts, Google 4/12, 2012

BENEFIT #3

RWD CAN IMPROVE CUSTOMER EXPERIENCE

READ THIS

http://www.thinkwithgoogle.com/research-studies/

CONSUMER BEHAVIOR ACROSS DEVICES MAY SURPRISE YOU

THE STARTING POINT FOR COMPLEX ACTIVITIES IS STILL THE PC

Planning a Trip Managing Finances Shopping Online

FOR NOW!

IN 2012 . . .PCS: KEPT US PRODUCTIVE AND INFORMED !SMARTPHONES: KEPT US CONNECTEDTABLETS: KEPT US ENTERTAINED

MOVING FORWARD . . . !

ALL BETS ARE OFF

LETS TALK ABOUT THECROSS-DEVICE EXPERIENCE

GOAL: PREVENT FRUSTRATION WHEN USER SWITCHES CONTEXT

GOAL: PREVENT FRUSTRATION WHEN USER SWITCHES CONTEXT

BENEFIT #4

RWD CAN IMPROVE THE BOTTOM LINE

Thanksgiving/Black Friday 2013 (Online Sales) 73.2% of all revenue came from computer 26.8% came from mobile devices

176% increase for mobile over 2012

NUMBER OF TABLETS SHIPPING IN 2014?

315 MILLION

THE IMPACT IS ALREADY MEASURABLE

http://electricpulp.com/notes/ecommerce-and-responsive-web-design/

AFTER REDESIGNING:

RWD SUCCESS STORY

Results New site converts smartphone and tablet users at higher rate than old site converted overall !

Online sales via smartphone and tablet devices have grown tenfold year on year

http://www.thinkwithgoogle.com/case-studies/plusnet-responsive-web-design.html

SUMMARY OF RWD BENEFITS

1. Improves your company’s reach 2. Improves SEO 3. Improves customer experience 4. Improves bottom line

RWD DOES NONE OF THESE THINGS BY ITSELF!

AN OVERALL WEB STRATEGY SHOULD INCLUDE

- Prioritizing user experience

- Integrating content strategy

- Solid technical foundation (Progressive enhancement)

SO WHERE IS RESPONSIVE HEADED?

SOME ADVICE ON HOW TO PREPARE FOR THE FUTURE

3. GETTING AHEAD OF THE CURVE

TIP #1

MAKE SITE PERFORMANCE A TOP PRIORITY

THE WEB IS SLOWER THAN EVER

The average Fortune 500 homepage takes 9.3 seconds to load.

That’s a 21% slowdown from 2013!

http://www.radware.com/winter-sotu2014/

WHY?

PAGE SIZE CONTINUES

TO INCREASE1.4 MB = Average page size

THE PENALTIES

A 1 second delay results in:

- 3.5% decrease in conversion rate

- 2.1% decrease in shopping cart size

- 9.4% fewer page views

- 8.3% increase in bounce rate

http://www.radware.com/winter-sotu2014/

HOW USERS FEEL:

Angry Stressed Out Anxious

There is a direct and measurable link betweenwebsite performance and website revenue.

SO WHY DO WE ACCEPT THESE PENALTIES?*

SO WHY DO WE ACCEPT THESE PENALTIES?*

* I HAVE NO IDEA!

A SIMPLE TESTDoes your site take less than 3 seconds to load?

You win!

Does your site take more than 3 seconds to load? You lose!

“I GET IT, BUT IT’S MY BOSS WHO NEEDS CONVINCING!”

ASK THIS:What do we earn per month if our traffic increases one percent?What do we earn per month if our conversion rate increases one percent?

ASK YOURSELF:

How many customers can we afford to lose before our brand takes a hit?

A site must look good on all devices, but making it fast might be more important.

KEY TAKEAWAY

RESOURCE

TIP #2

YOU DON’T HAVE TO DO IT ALL AT ONCE

REDESIGNING A SITE FROM SCRATCH IS

IDEAL, BUT . . .

“RETROFITTING” A SITE IS A SHORT-TERM

OPTION

http://webstandardssherpa.com/reviews/responsive-retrofitting/

OR TAKE IT ONE STEP AT A TIME . . .

THE BBC: TRANSITIONING SLOWLY

On a smartphone everyone gets the responsive version

THE BBC: TRANSITIONING SLOWLY

Desktop (Fixed) Desktop (Responsive)

THE BBC: TRANSITIONING SLOWLY

RWD IS AWESOME! WHERE DO I START?

RESOURCES

PRIMARY RESOURCE

BIASED RESOURCE!

thegymnasium.com

12 LESSONS

6+ HOURS OF VIDEO

QUIZZES

PROJECTS & ASSIGNMENTS

CLASS FORUM

THANK YOU!

Q & A