This document discusses the benefits of responsive web design. It notes that 90% of people use multiple devices to accomplish goals online and 38% of daily media interactions occur on smartphones. Responsive design allows a website to automatically adjust for viewing on any size screen. While separate mobile sites were once common, they have disadvantages like separate URLs and content duplication. Responsive design overcomes these issues by using fluid grids and media queries to dynamically change the layout. Studies show responsive design can significantly increase conversions, transactions and revenue for mobile visitors. Mobile commerce is growing and responsive design ensures a website is accessible and usable on any device.

1. R.J. LaCount
@rjlacount
rj@portent.com
WHY CUSTOMERS LOVE
RESPONSIVE DESIGN
The Portent Webinar Series
AND YOU SHOULD TOO!

2. #PORTENTU
This is the hashtag

3. portent.co/rj-webinar
These are the links
(Yes, use .co, not .com)

4. This
is
not
what
I
was
expec.ng
with
the
Family
Plan!

5. 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

7. RESPONSIVE DESIGN
YEAH, WHATEVER.
JUST MAKE IT WORK ON MY IPHONE.

9. 13%
32% 56%
1024 x 768
800 x 600
Desktop Display Resolution (2005)
Source: http://www.w3schools.com/browsers/browsers_display.asp
Larger

10. 600px fold
960px centered wrapper

11. We
have
to
get
you
back
to
2013!

12. 91%
1%
9%
LARGER
1024 x 768
Desktop Display Resolution (2013)
Source: http://www.w3schools.com/browsers/browsers_display.asp
800 x 600

13. WE SHOULD TOTALLY MAKE
BIGGER WEBSITES
RIGHT?

14. WE SHOULD TOTALLY MAKE
BIGGER WEBSITES
RIGHT?
Sup
guys

15. OH MY GOD GIVE ME ONE NOW
IPHONE

16. 3.5’’
iPhone
3.1’’
Palm Pre
3.7’’
Nexus One

17. Desktop Site

18. Desktop SiteMobile Site

19. Why a separate mobile site?
• Complete control of “mobile”
experience
• Tiny page size
• Can be cheaper to implement
than responsive

22. Problems with mobile sites?
• Separate URL (m.yoursite.com)
• Social Sharing
• Content Duplication
• How it actually works

23. Apple-iPhone
User
agent
string

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

25. List of iPhone User Agents
Source: http://enterpriseios.com/wiki/Complete_List_of_iOS_User_Agent_Strings

26. THAT’S A LOT OF
MAINTENANCE WORK

27. I’m
Netscape!
Source: http://webaim.org/blog/user-agent-string-history/
I’m
Firefox! I’m
Safari!

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

29. MUST HAVE IT
IPAD

30. 9.7’’
iPad
10.1’’
Galaxy Tab
8.9’’
Kindle Fire HD
7’’
Nexus 7
7.9’’
iPad Mini

31. 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

32. 5.3’’
Samsung
Galaxy Note
5.5’’
Samsung
Galaxy Note II
6.3’’
Samsung
Galaxy Mega

33. 7’’
Asus FonePad

38. WHAT’S COMING NEXT?

39. LET’S GET RESPONSIVE

40. Source: http://www.rjlacount.com

41. Source: http://www.rjlacount.com

42. WOAH.
HOW DOES THAT WORK?

43. HTML: Structure & Content

44. HTML: Structure & Content

45. CSS: Style

46. CSS: Style

47. CSS: Media Queries
If
width
is
bigger
than
480px...

48. CSS: Media Queries
Do
this
stuff.

49. CSS: Media Queries
• 320px
• 480px
• 768px
• 980px
• 1200px
BREAKPOINTS

50. Why Responsive?
• Better for SEO
• One site to build and manage
• Social sharing
• Future maintenance
• Device-agnostic

51. Fragmentation Visualized
• OpenSignal - 6 month study
Source: http://opensignal.com/reports/fragmentation.php
- 3,997 distinct devices

52. Fragmentation Visualized
• OpenSignal - 6 month study
Source: http://opensignal.com/reports/fragmentation.php
- 3,997 distinct devices

53. GOOGLE RECOMMENDS IT
AND THEY’RE MAKING THE NEXT DEVICES
Source: https://developers.google.com/webmasters/smartphone-sites/details

54. HOLD UP

55. MY WEBSITE...
IT’S A LITTLE BIGGER THAN YOUR PORTFOLIO

56. 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?

57. 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

58. REVENUE

59. O’Neill Clothing Responsive Design
Source: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/

60. 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

61. Skinny Ties Responsive Design
Source: http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/

62. 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/

63. MOBILE IS A HUGE
OPPORTUNITY.
YOU CAN’T NOT SPEND MONEY
AND TAKE ADVANTAGE OF IT
- LUKE WROBLEWSKI

64. DON’T MISS OUT

65. portent.co/rj-webinar
These are the links
(Yes, use .co, not .com)

66. Q&A
#PORTENTU

67. Me:
@rjlacount