Why Customers Love Responsive Design (And You Should Too!)
-
Upload
portent-inc -
Category
Design
-
view
1.599 -
download
0
description
Transcript of Why Customers Love Responsive Design (And You Should Too!)
![Page 1: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/1.jpg)
R.J. LaCount@rjlacount
WHY CUSTOMERS LOVERESPONSIVE DESIGN
The Portent Webinar Series
AND YOU SHOULD TOO!
![Page 2: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/2.jpg)
#PORTENTU
This is the hashtag
![Page 3: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/3.jpg)
portent.co/rj-webinar
These are the links
(Yes, use .co, not .com)
![Page 4: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/4.jpg)
This is not what I was expec.ng with the
Family Plan!
![Page 5: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/5.jpg)
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
![Page 6: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/6.jpg)
![Page 7: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/7.jpg)
RESPONSIVE DESIGN
YEAH, WHATEVER.JUST MAKE IT WORK ON MY IPHONE.
![Page 8: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/8.jpg)
![Page 9: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/9.jpg)
13%
32% 56%
1024 x 768
800 x 600
Desktop Display Resolution (2005)
Source: http://www.w3schools.com/browsers/browsers_display.asp
Larger
![Page 10: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/10.jpg)
600px fold
960px centered wrapper
![Page 11: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/11.jpg)
We have to get youback to 2013!
![Page 12: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/12.jpg)
91%
1%
9%
LARGER1024 x 768
Desktop Display Resolution (2013)
Source: http://www.w3schools.com/browsers/browsers_display.asp
800 x 600
![Page 13: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/13.jpg)
WE SHOULD TOTALLY MAKE BIGGER WEBSITES
RIGHT?
![Page 14: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/14.jpg)
WE SHOULD TOTALLY MAKE BIGGER WEBSITES
RIGHT?
Sup guys
![Page 15: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/15.jpg)
OH MY GOD GIVE ME ONE NOW
IPHONE
![Page 16: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/16.jpg)
3.5’’iPhone
3.1’’Palm Pre
3.7’’Nexus One
![Page 17: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/17.jpg)
Desktop Site
![Page 18: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/18.jpg)
Desktop SiteMobile Site
![Page 19: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/19.jpg)
Why a separate mobile site?
• Complete control of “mobile” experience
• Tiny page size
• Can be cheaper to implement than responsive
![Page 20: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/20.jpg)
![Page 21: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/21.jpg)
![Page 22: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/22.jpg)
Problems with mobile sites?
• Separate URL (m.yoursite.com)
• Social Sharing
• Content Duplication
• How it actually works
![Page 23: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/23.jpg)
Apple-iPhone
User agent string
![Page 24: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/24.jpg)
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
![Page 25: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/25.jpg)
List of iPhone User Agents
Source: http://enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings
![Page 26: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/26.jpg)
THAT’S A LOT OF MAINTENANCE WORK
![Page 27: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/27.jpg)
I’m Netscape!
Source: http://webaim.org/blog/user-agent-string-history/
I’m Firefox! I’m Safari!
![Page 28: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/28.jpg)
OKAY, IT’S A LOT OF WORK.AT LEAST MY SITE LOOKS GOOD!
RIGHT?
![Page 29: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/29.jpg)
MUST HAVE IT
IPAD
![Page 30: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/30.jpg)
9.7’’
iPad
10.1’’
Galaxy Tab
8.9’’
Kindle Fire HD
7’’
Nexus 7
7.9’’
iPad Mini
![Page 31: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/31.jpg)
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
![Page 32: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/32.jpg)
5.3’’Samsung
Galaxy Note
5.5’’Samsung
Galaxy Note II
6.3’’Samsung
Galaxy Mega
![Page 33: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/33.jpg)
7’’Asus FonePad
![Page 34: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/34.jpg)
![Page 35: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/35.jpg)
![Page 36: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/36.jpg)
![Page 37: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/37.jpg)
![Page 38: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/38.jpg)
WHAT’S COMING NEXT?
![Page 39: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/39.jpg)
LET’S GET RESPONSIVE
![Page 42: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/42.jpg)
WOAH.
HOW DOES THAT WORK?
![Page 43: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/43.jpg)
HTML: Structure & Content
![Page 44: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/44.jpg)
HTML: Structure & Content
![Page 45: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/45.jpg)
CSS: Style
![Page 46: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/46.jpg)
CSS: Style
![Page 47: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/47.jpg)
CSS: Media Queries
If width is bigger than 480px...
![Page 48: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/48.jpg)
CSS: Media Queries
Do this stuff.
![Page 49: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/49.jpg)
CSS: Media Queries
• 320px
• 480px
• 768px
• 980px
• 1200px
BREAKPOINTS
![Page 50: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/50.jpg)
Why Responsive?
• Better for SEO
• One site to build and manage
• Social sharing
• Future maintenance
• Device-agnostic
![Page 51: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/51.jpg)
Fragmentation Visualized
• OpenSignal - 6 month study
Source: http://opensignal.com/reports/fragmentation.php
- 3,997 distinct devices
![Page 52: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/52.jpg)
Fragmentation Visualized
• OpenSignal - 6 month study
Source: http://opensignal.com/reports/fragmentation.php
- 3,997 distinct devices
![Page 53: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/53.jpg)
GOOGLE RECOMMENDS IT
AND THEY’RE MAKING THE NEXT DEVICES
Source: https://developers.google.com/webmasters/smartphone-sites/details
![Page 54: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/54.jpg)
HOLD UP
![Page 55: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/55.jpg)
MY WEBSITE...
IT’S A LITTLE BIGGER THAN YOUR PORTFOLIO
![Page 56: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/56.jpg)
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?
![Page 57: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/57.jpg)
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
![Page 58: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/58.jpg)
REVENUE
![Page 59: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/59.jpg)
O’Neill Clothing Responsive Design
Source: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/
![Page 60: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/60.jpg)
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
![Page 61: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/61.jpg)
Skinny Ties Responsive Design
Source: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/
![Page 62: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/62.jpg)
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/
![Page 63: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/63.jpg)
MOBILE IS A HUGE OPPORTUNITY.
YOU CAN’T NOT SPEND MONEY AND TAKE ADVANTAGE OF IT
- LUKE WROBLEWSKI
![Page 64: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/64.jpg)
DON’T MISS OUT
![Page 65: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/65.jpg)
portent.co/rj-webinar
These are the links
(Yes, use .co, not .com)
![Page 66: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/66.jpg)
Q&A#PORTENTU
![Page 67: Why Customers Love Responsive Design (And You Should Too!)](https://reader036.fdocuments.in/reader036/viewer/2022081403/554906d0b4c9055d458b60df/html5/thumbnails/67.jpg)
Me:@rjlacount