R.J. LaCount@rjlacountrj@portent.comWHY CUSTOMERS LOVERESPONSIVE DESIGNThe Portent Webinar SeriesAND YOU SHOULD TOO!
#PORTENTUThis is the hashtag
portent.co/rj-webinarThese 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 toaccompli...
RESPONSIVE DESIGNYEAH, WHATEVER.JUST MAKE IT WORK ON MY IPHONE.
13%32% 56%1024 x 768800 x 600Desktop Display Resolution (2005)Source: http://www.w3schools.com/browsers/browsers_display.a...
600px fold960px centered wrapper
We	  have	  to	  get	  youback	  to	  2013!
91%1%9%LARGER1024 x 768Desktop Display Resolution (2013)Source: http://www.w3schools.com/browsers/browsers_display.asp800 ...
WE SHOULD TOTALLY MAKEBIGGER WEBSITESRIGHT?
WE SHOULD TOTALLY MAKEBIGGER WEBSITESRIGHT?Sup	  guys
OH MY GOD GIVE ME ONE NOWIPHONE
3.5’’iPhone3.1’’Palm Pre3.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 implementthan respo...
Problems with mobile sites?• Separate URL (m.yoursite.com)• Social Sharing• Content Duplication• How it actually works
Apple-iPhoneUser	  agent	  string
Apple-iPhone1C2/801.293Apple-iPhone2C1/801.293Apple-iPhone1C2/801.306Apple-iPhone2C1/801.306Apple-iPhone1C2/801.400Apple-i...
List of iPhone User AgentsSource: http://enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings
THAT’S A LOT OFMAINTENANCE 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 ITIPAD
9.7’’iPad10.1’’Galaxy Tab8.9’’Kindle Fire HD7’’Nexus 77.9’’iPad Mini
3.1’’Palm Pre3.7’’Nexus One3.5’’iPhone4.0’’HTC WindowsPhone 8S4.3’’MotorolaDroid RAZR M4.5’’Nokia Lumia9204.7’’HTC Nexus 4
5.3’’SamsungGalaxy Note5.5’’SamsungGalaxy Note II6.3’’SamsungGalaxy 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 QueriesIf	  width	  is	  bigger	  than	  480px...
CSS: Media QueriesDo	  this	  stuff.
CSS: Media Queries• 320px• 480px• 768px• 980px• 1200pxBREAKPOINTS
Why Responsive?• Better for SEO• One site to build and manage• Social sharing• Future maintenance• Device-agnostic
Fragmentation Visualized• OpenSignal - 6 month studySource: http://opensignal.com/reports/fragmentation.php- 3,997 distinc...
Fragmentation Visualized• OpenSignal - 6 month studySource: http://opensignal.com/reports/fragmentation.php- 3,997 distinc...
GOOGLE RECOMMENDS ITAND THEY’RE MAKING THE NEXT DEVICESSource: https://developers.google.com/webmasters/smartphone-sites/d...
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 ada...
Mobile Shopping• 79% have donemobile shopping onsmart phone / tablet• 29% have usedsmartphone forpayment• Expected to incr...
REVENUE
O’Neill Clothing Responsive DesignSource: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/
O’Neill Clothing Responsive Design• iPhone / iPod• +65% Conversions• +112% Transactions• +101% RevenueSource: http://conve...
Skinny Ties Responsive DesignSource: 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%...
MOBILE IS A HUGEOPPORTUNITY.YOU CAN’T NOT SPEND MONEYAND TAKE ADVANTAGE OF IT- LUKE WROBLEWSKI
DON’T MISS OUT
portent.co/rj-webinarThese are the links(Yes, use .co, not .com)
Q&A#PORTENTU
Me:@rjlacount
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
Why Customers Love Responsive Design (And You Should Too!)
Upcoming SlideShare
Loading in …5
×

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

1,847 views
1,772 views

Published on

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.

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

  1. 1. R.J. LaCount@rjlacountrj@portent.comWHY CUSTOMERS LOVERESPONSIVE DESIGNThe Portent Webinar SeriesAND YOU SHOULD TOO!
  2. 2. #PORTENTUThis is the hashtag
  3. 3. portent.co/rj-webinarThese are the links(Yes, use .co, not .com)
  4. 4. This  is  not  what  I  was  expec.ng  with  the  Family  Plan!
  5. 5. Source: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf• 90% of people move between devices toaccomplish a goal• 38% of daily media interactions occur onsmartphones
  6. 6. RESPONSIVE DESIGNYEAH, WHATEVER.JUST MAKE IT WORK ON MY IPHONE.
  7. 7. 13%32% 56%1024 x 768800 x 600Desktop Display Resolution (2005)Source: http://www.w3schools.com/browsers/browsers_display.aspLarger
  8. 8. 600px fold960px centered wrapper
  9. 9. We  have  to  get  youback  to  2013!
  10. 10. 91%1%9%LARGER1024 x 768Desktop Display Resolution (2013)Source: http://www.w3schools.com/browsers/browsers_display.asp800 x 600
  11. 11. WE SHOULD TOTALLY MAKEBIGGER WEBSITESRIGHT?
  12. 12. WE SHOULD TOTALLY MAKEBIGGER WEBSITESRIGHT?Sup  guys
  13. 13. OH MY GOD GIVE ME ONE NOWIPHONE
  14. 14. 3.5’’iPhone3.1’’Palm Pre3.7’’Nexus One
  15. 15. Desktop Site
  16. 16. Desktop SiteMobile Site
  17. 17. Why a separate mobile site?• Complete control of “mobile”experience• Tiny page size• Can be cheaper to implementthan responsive
  18. 18. Problems with mobile sites?• Separate URL (m.yoursite.com)• Social Sharing• Content Duplication• How it actually works
  19. 19. Apple-iPhoneUser  agent  string
  20. 20. 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
  21. 21. List of iPhone User AgentsSource: http://enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings
  22. 22. THAT’S A LOT OFMAINTENANCE WORK
  23. 23. I’m  Netscape!Source: http://webaim.org/blog/user-agent-string-history/I’m  Firefox! I’m  Safari!
  24. 24. OKAY, IT’S A LOT OF WORK.AT LEAST MY SITE LOOKS GOOD!RIGHT?
  25. 25. MUST HAVE ITIPAD
  26. 26. 9.7’’iPad10.1’’Galaxy Tab8.9’’Kindle Fire HD7’’Nexus 77.9’’iPad Mini
  27. 27. 3.1’’Palm Pre3.7’’Nexus One3.5’’iPhone4.0’’HTC WindowsPhone 8S4.3’’MotorolaDroid RAZR M4.5’’Nokia Lumia9204.7’’HTC Nexus 4
  28. 28. 5.3’’SamsungGalaxy Note5.5’’SamsungGalaxy Note II6.3’’SamsungGalaxy Mega
  29. 29. 7’’Asus FonePad
  30. 30. WHAT’S COMING NEXT?
  31. 31. LET’S GET RESPONSIVE
  32. 32. Source: http://www.rjlacount.com
  33. 33. Source: http://www.rjlacount.com
  34. 34. WOAH.HOW DOES THAT WORK?
  35. 35. HTML: Structure & Content
  36. 36. HTML: Structure & Content
  37. 37. CSS: Style
  38. 38. CSS: Style
  39. 39. CSS: Media QueriesIf  width  is  bigger  than  480px...
  40. 40. CSS: Media QueriesDo  this  stuff.
  41. 41. CSS: Media Queries• 320px• 480px• 768px• 980px• 1200pxBREAKPOINTS
  42. 42. Why Responsive?• Better for SEO• One site to build and manage• Social sharing• Future maintenance• Device-agnostic
  43. 43. Fragmentation Visualized• OpenSignal - 6 month studySource: http://opensignal.com/reports/fragmentation.php- 3,997 distinct devices
  44. 44. Fragmentation Visualized• OpenSignal - 6 month studySource: http://opensignal.com/reports/fragmentation.php- 3,997 distinct devices
  45. 45. GOOGLE RECOMMENDS ITAND THEY’RE MAKING THE NEXT DEVICESSource: https://developers.google.com/webmasters/smartphone-sites/details
  46. 46. HOLD UP
  47. 47. MY WEBSITE...IT’S A LITTLE BIGGER THAN YOUR PORTFOLIO
  48. 48. 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?
  49. 49. Mobile Shopping• 79% have donemobile shopping onsmart phone / tablet• 29% have usedsmartphone forpayment• Expected to increaseSource: http://portent.co/11FoNte
  50. 50. REVENUE
  51. 51. O’Neill Clothing Responsive DesignSource: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/
  52. 52. O’Neill Clothing Responsive Design• iPhone / iPod• +65% Conversions• +112% Transactions• +101% RevenueSource: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/• Android• +407% Conversions• +333% Transactions• +591% Revenue
  53. 53. Skinny Ties Responsive DesignSource: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/
  54. 54. Skinny Ties Responsive Design• +377% Revenue from iPhone• +71% iPhone conversion rate• +42% Revenue from all devices• +13% Overall conversion rate• -23% Bounce rateSource: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/
  55. 55. MOBILE IS A HUGEOPPORTUNITY.YOU CAN’T NOT SPEND MONEYAND TAKE ADVANTAGE OF IT- LUKE WROBLEWSKI
  56. 56. DON’T MISS OUT
  57. 57. portent.co/rj-webinarThese are the links(Yes, use .co, not .com)
  58. 58. Q&A#PORTENTU
  59. 59. Me:@rjlacount

×