Responsive Design's is a way of making a single website that works well on mobile, tablet, and desktop browsers. Back in 2010 Ethan Marcotte, first coined the term "responsive design" and described it as having 3 components: Flexible Images Fluid Grids CSS Media Queries Well it seems Ethan let quite a few cats of out bag with this one, and we've been trying to herd those cats ever since. What started as exclusively a front-end web design technique has expanded to include a whole new range of both front-end and server-side programming techniques. The real challenge came when we also suddenly discovered that tried and true practices for project management, and creative concept development all started to fall apart. It’s not practical to create photoshop mockups of ever page in a site at every device size - There’s simply too many variables to account for in graphic design software. Responsive Design requires a new process for creating websites, and new ways of interacting with teams and clients. This presentation will outline a birds-eye-view of Responsive Techniques, Strategies, Tools, and Gotchas of RWD. It will focus on some of the new workflow techniques needed and cover some suggestions for where to go to learn more. Slide Summary 1-25: History of Responsive Design 26-50: Coding Basics (Developer Focused) 51-57: Progressive Enhancement 58-70: Mobile First 71-93: Responsive Workflows 96-99: Selling Responsive Design

1. FOSTER INTERACTIVE
Web Development + Design
Discovery
Design
Production
Launch
RESPONSIVEDESIGN.CA @finteractive (Drupal / Personal)
Questions? Post to the linkedIn Group
@responsivDesign (RWD Tips)
http://linkedin.responsivedesign.ca

2. I “borrowed” this whole sequence
from Luke Wroblewski
http://www.lukew.com/ff/entry.asp?1506

5. 371 K 378K
Babies born per day iPhones sold per day

6. 378K
iPhones sold per day
371 K
Babies born per day

7. 378K
iPhones sold per day
562K
iOS devices
371 K
Babies born per day

8. 378K
iPhones sold per day
562K
iOS devices
700K
Android devices
activated per day
371 K
Babies born per day

9. 378K
iPhones sold per day
562K
iOS devices
700K
Android devices
activated per day
371 K 200K
Nokia smartphones
Babies born per day

10. 378K
iPhones sold per day
562K
iOS devices
700K
Android devices
activated per day
371 K 200K
Nokia smartphones
Babies born per day
143k
Blackberry devices

11. 1,983,000!
Purchases / Activations
of mobile Devices
371 K
Babies born per day

12. Sales on Paypal
Black Friday vs. 2010 IDC Predictions

14. The Challenge / Opportunity
Image Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

15. Existing Mobile Solutions
Make an App!

16. Existing Mobile Solutions
mobile website
“m.website.com” “website.mobi”

17. 2010
(SPRING)

18. Ethan Marcotte’s Lab - (Artist’s impression)
Let there be...
Responsive
Design

19. http://www.alistapart.com/articles/responsive-web-design/

20. 2011
(SEPTEMBER)

21. Bostonglobe.com

22. barakobama.com

23. barakobama.com (redo)

24. greygoose.com

25. microsoft.com

26. Before Starting
Responsive Design

27. USE
(and HTML5shiv)
http://www.flickr.com/photos/22290288@N03/

28. Explore
html5boilerplate.com

29. HAVE
http://sass-lang.com/

30. FireBug
+
FireSass

31. Navigate with
http://compass-style.org

32. Don’t Settle for

33. Responsive
Design Basics

34. Viewport Meta Tag

36. BAD
UX

37. #1 - Fluid Images
#2 - Flexible Grids
#3 - CSS3 Media Queries

38. #1 - Fluid Images

40. #2 - Flexible Grids

42. Messy Grids use HTML markup
http://foundation.zurb.com/docs/grid.php

43. Messy Grids use HTML markup
5 Classes! What’s Up with That?

44. Good Grids put style in the CSS
http://susy.oddbird.net/

45. #3 - CSS3 Media Queries

47. Media Query Basics - Breakpoint in css

48. USE EMs
for Breakpoints
(They Scale with zooming)

49. Breakpoint Mixin For Compass
https://github.com/canarymason/breakpoint

50. Responsive Web Design
http://www.abookapart.com/products/
responsive-web-design

51. Progressive Enhancement
(aka Adaptive Design)

52. Example: Menu
Big Screen Small Screen

53. Example: Menu
Big Screen Small Screen

54. Example: Touch

55. Example: Location

56. http://modernizr.com/

57. http://filamentgroup.com/dwpe/
http://easy-readers.net/books/adaptive-web-design/

58. Mobile First (Content First)

59. Mobile First - Design Strategy
http://www.abookapart.com/products/mobile-first

60. Streamlined Functions
Mobile HAS to be
Task Based
Simple to be USABLE
Direct Messaging

61. NO! We Must fit
“Message From The Board”
on the mobile Homepage!

62. Who Benefits? - Everyone
Image Credit: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

63. Mobile First (Website Structure)
DEFAULT
STYLES

64. @media (min-width: 25em)
DEFAULT MEDIUM-ISH
STYLES
STYLES

65. @media (min-width: 50em)
LARGE STYLES

66. Breakpoint Mixin For Compass
https://github.com/canarymason/breakpoint

67. (Generally) Put Media Queries
in CSS not the HTML Header

70. Same as always
custom styles sheets
(we tend to go fixed width)

71. Responsive Design
Workflow

72. Conventional “Waterfall” Workflow
Discovery
Visual Design
Coding
Launch

73. Device Breakpoints

74. Desktop

75. Tablets

76. that just ONE page

77. 5 Breakpoints
x
5 Layouts
(Home, Blog List, Article,
Case Study, Resources)

78. 5 Breakpoints
x
5 Layouts
(Home, Blog List, Article,
Case Study, Resources)
= 25 Files!

79. 5 Breakpoints
x
5 Layouts
(Home, Blog List, Article,
Case Study, Resources)
= Crazy Maintenance

80. Style Tiles - Design Systems
http://iallenkelhet.no/2012/05/24/5-lessons-learned-from-a-mobile-first-
responsive-design-process/

81. Discovery
Visual Design Coding
Launch

82. Natural Breakpoints

83. Design the Extremes

84. Prototype HTML
Code
Mobile First

85. Stretch Until Ugly

86. (Go Back a bit) Breakpoint!

87. Repeat until you’re at your
largest size

88. Get Team’s
Feedback on real
devices

89. Adobe Edge Inspect (formerly Adobe Shadow)

91. 1-2 templates & repeat
design / code cycle
Review
Visual Design Coding
Launch

92. I Wrote a book review on
responsivedesign.ca
http://www.implementingresponsivedesign.com/

93. FREE CHAPTER ON
RESPONSIVE MEDIA
http://www.implementingresponsivedesign.com/
sample_chapter.pdf

94. The Jargon
• Responsive Design
CSS & Media Queries to change layout
• AdaptiveDesign
/Progressive Enhancement
Default Website Presents simplest Markup, JS &
Other techniques layer on additional complexity
• Mobile First
Design & Structural Strategy for implementation

95. Nav Patterns
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-
responsive-design/
Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

96. Costs vs Desktop Only
~50% more

97. Costs vs Mobile Alternatives

98. Conclusion
Establish the Value of Mobile Web
Demo Responsive Design
Establish Credibility w/ Big Sites
First out of the gate - Big Advantage
Compare $$$ to mobile Alternatives

99. We are
Looking for a
Responsive
Design Front
End Designer
http://fosterinteractive.com/job/designer

100. Hey @HTML5_Toronto, I want to go
to @FITC's Spotlight Responsive
Design on Dec.1 in TO #HTML5TO
DECEMBER 1
http://www.fitc.ca/events/about/?event=140

101. THANK YOU
http://linkedin.responsivedesign.ca
@finteractive (Drupal / Personal) @responsivDesign (RWD Tips)