Why Customers Love Responsive Design (And You Should Too!)

R.J. LaCount@rjlacount

rj@portent.com

WHY CUSTOMERS LOVERESPONSIVE DESIGN

The Portent Webinar Series

AND YOU SHOULD TOO!

#PORTENTU

This is the hashtag

portent.co/rj-webinar

These are the links

(Yes, use .co, not .com)

This  is  not  what  I  was  expec.ng  with  the  

Family  Plan!

Source: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

• 90% of people move between devices to accomplish a goal

• 38% of daily media interactions occur on smartphones

RESPONSIVE DESIGN

YEAH, WHATEVER.JUST MAKE IT WORK ON MY IPHONE.

13%

32% 56%

1024 x 768

800 x 600

Desktop Display Resolution (2005)

Source: http://www.w3schools.com/browsers/browsers_display.asp

Larger

600px fold

960px centered wrapper

We  have  to  get  youback  to  2013!

91%

1%

9%

LARGER1024 x 768

Desktop Display Resolution (2013)

Source: http://www.w3schools.com/browsers/browsers_display.asp

800 x 600

WE SHOULD TOTALLY MAKE BIGGER WEBSITES

RIGHT?

WE SHOULD TOTALLY MAKE BIGGER WEBSITES

RIGHT?

Sup  guys

OH MY GOD GIVE ME ONE NOW

IPHONE

3.5’’iPhone

3.1’’Palm Pre

3.7’’Nexus One

Desktop Site

Desktop SiteMobile Site

Why a separate mobile site?

• Complete control of “mobile” experience

• Tiny page size

• Can be cheaper to implement than responsive

Problems with mobile sites?

• Separate URL (m.yoursite.com)

• Social Sharing

• Content Duplication

• How it actually works

Apple-iPhone

User  agent  string

Apple-iPhone1C2/801.293Apple-iPhone2C1/801.293Apple-iPhone1C2/801.306Apple-iPhone2C1/801.306Apple-iPhone1C2/801.400Apple-iPhone2C1/801.400Apple-iPhone1C2/802.117Apple-iPhone2C1/802.117Apple-iPhone1C2/803.148Apple-iPhone2C1/803.148Apple-iPhone2C1/807.4Apple-iPhone2C1/808.7Apple-iPhone2C1/810.2Apple-iPhone2C1/811.2Apple-iPhone2C1/812.1Apple-iPhone2C1/901.334Apple-iPhone2C1/901.405

List of iPhone User Agents

Source: http://enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings

THAT’S A LOT OF MAINTENANCE WORK

I’m  Netscape!

Source: http://webaim.org/blog/user-agent-string-history/

I’m  Firefox! I’m  Safari!

OKAY, IT’S A LOT OF WORK.AT LEAST MY SITE LOOKS GOOD!

RIGHT?

MUST HAVE IT

IPAD

9.7’’

iPad

10.1’’

Galaxy Tab

8.9’’

Kindle Fire HD

7’’

Nexus 7

7.9’’

iPad Mini

3.1’’Palm Pre

3.7’’Nexus One

3.5’’iPhone

4.0’’HTC Windows

Phone 8S

4.3’’Motorola

Droid RAZR M

4.5’’Nokia Lumia

920

4.7’’HTC Nexus 4

5.3’’Samsung

Galaxy Note

5.5’’Samsung

Galaxy Note II

6.3’’Samsung

Galaxy Mega

7’’Asus FonePad

WHAT’S COMING NEXT?

LET’S GET RESPONSIVE

Source: http://www.rjlacount.com

Source: http://www.rjlacount.com

WOAH.

HOW DOES THAT WORK?

HTML: Structure & Content

HTML: Structure & Content

CSS: Style

CSS: Style

CSS: Media Queries

If  width  is  bigger  than  480px...

CSS: Media Queries

Do  this  stuff.

CSS: Media Queries

• 320px

• 480px

• 768px

• 980px

• 1200px

BREAKPOINTS

Why Responsive?

• Better for SEO

• One site to build and manage

• Social sharing

• Future maintenance

• Device-agnostic

Fragmentation Visualized

• OpenSignal - 6 month study

Source: http://opensignal.com/reports/fragmentation.php

- 3,997 distinct devices

Fragmentation Visualized

• OpenSignal - 6 month study

Source: http://opensignal.com/reports/fragmentation.php

- 3,997 distinct devices

GOOGLE RECOMMENDS IT

AND THEY’RE MAKING THE NEXT DEVICES

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

HOLD UP

MY WEBSITE...

IT’S A LITTLE BIGGER THAN YOUR PORTFOLIO

You Could Use a Band-Aid...

• Mobile Plugin

• Uses user-agent detection

• It’s just another plugin

• Selectively implement adaptive pages

• How far do you go?

Mobile Shopping

• 79% have done mobile shopping on smart phone / tablet

• 29% have used smartphone for payment

• Expected to increase

Source: http://portent.co/11FoNte

REVENUE

O’Neill Clothing Responsive Design

Source: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/

O’Neill Clothing Responsive Design

• iPhone / iPod

• +65% Conversions

• +112% Transactions

• +101% Revenue

Source: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/

• Android

• +407% Conversions

• +333% Transactions

• +591% Revenue

Skinny Ties Responsive Design

Source: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/

Skinny Ties Responsive Design

• +377% Revenue from iPhone

• +71% iPhone conversion rate

• +42% Revenue from all devices

• +13% Overall conversion rate

• -23% Bounce rate

Source: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/

MOBILE IS A HUGE OPPORTUNITY.

YOU CAN’T NOT SPEND MONEY AND TAKE ADVANTAGE OF IT

- LUKE WROBLEWSKI

DON’T MISS OUT

portent.co/rj-webinar

These are the links

(Yes, use .co, not .com)

Q&A#PORTENTU

Me:@rjlacount