rwd is changing the world
DESCRIPTION
Jeremy Osborn's presentation from Internet Week New York on May 22, 2014TRANSCRIPT
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
12 LESSONS
6+ HOURS OF VIDEO
QUIZZES
PROJECTS & ASSIGNMENTS
CLASS FORUM
THANK YOU!
Q & A