why customers love responsive design (and you should too!)
DESCRIPTION
Web designer and front-end developer R.J. LaCount demonstrates why responsive design is more than just a buzz word; it's the future of the web. In this webinar you will learn: - What the differences are between responsive design and adaptive design - The pros and cons for both responsive and adaptive approaches - How responsive sites are built and why they're the smarter choice for most clients - How you can capitalize on the current mobile wave while future-proofing your site at the same time with responsive design - Why responsive design is worth the initial investment for your clients Find the Bitly link bundle for the presentation at http://portent.co/rj-webinar.TRANSCRIPT
R.J. LaCount@rjlacount
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
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