This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.

1. Responsive Web Design
How and Why

2. Back in my day…

3. When life was simple

4. And Then Came The One

5. January 9, 2007

7. Mobile internet adoption has outpaced
desktop internet adoption by eight times
 http://www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html
AT&T, the exclusive carrier for Apple's
iPhone, saw a 4,932% increase in mobile
traffic data in the since the iPhone’s launch.
 http://www.lukew.com/ff/entry.asp?933
Smartphone sales surpassed worldwide PC
sales by the end of 2011
 http://www.pcworld.com/article/171380/
Does Mobile Matter?

9. Innovation & Transition

10. 2010 iPad – 3 million sold in 80 days

11. iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”

12. Today

13. iPhone 5
sold 5 Million on first day
2 Million in first 24 hours

14. Over 210 Million
Android Activations in 2013

15. The long and short of it is that we’re
designing for more devices, more
input types, more resolutions than
ever before. The web has moved
beyond the desktop, and it’s not
turning back.
– Ethan Marcotte
Beyond the desktop

16. Mobile

17. Mobile
It’s Not About
It’s About the Web

19. How do you design a
web site that works well
on all devices?

20. 1. Design for the Desktop
2. Separate Mobile Site
3. Native Mobile App
4. Responsive Design
Options

21. Desktop Design

23. Separate Mobile Design

25. One site to rule them all

26. It’s what some of us were going
for with “liquid” web design back
in the 1990s, only it doesn’t suck.
–Jeffrey Zeldman
Responsive Web Design

27. One site, multiple devices

28. One site, multiple devices

29. • Consistent Experience
• Content Parity
• No Zooming
• Single Code Base (also for CMS users, one login)
• Device Agnostic
• URL Management
Advantages of Responsive Design

30. • Context of Use
• Speed/bandwidth
• Advertising
• Workflow
• Project Management
Disadvantages of Responsive Design

31. “It’s not like our industry nailed web design
before we started responsive design. It’s still a
work in progress.”
- Dan Willis
@uxcrank

32. • Content sites vs. transactional sites
• Context of use
• Resources
• CMS
• Don’t do a native app just because the
client wants one
How do you choose?

33. • Device/browser support
• Test on real devices
• Test in real-life, everyday scenarios
• Speed/bandwidth
• Small-screen first
• Let content determine design
• Let design determine breakpoints
• Consider UX and Business goals first
• Communicate with your clients
• Responsive workflow
Things to Consider

34. A flexible, grid-based layout
Flexible images and media
Media queries, a module from the CSS3
specification.
The Ingredients

35. Design Process

36. Design
Develop

37. Content Parity

38. Content Parity

39. Content Parity

40. Content Parity

41. Content Parity

42. The beauty of the web is its openness.
Don’t arbitrarily lock people out because
of browser, device or configuration.
- Brad Frost

51. Context of Use

52. Context of Use

56. Mobile First

61. Mobile use case: I just transferred money
at my desk using my phone because
logging into my banking app requires
fewer steps.

62. Make it work better for everybody.

63. Some Examples

64. Some Examples

65. Some Examples

66. Some Examples

67. Clean out the clutter

70. Give Everybody the same content
Displayed appropriately for their device
No Matter what device they have
Responsive Web Design

71. Start with Content

72. Style Tiles
Communicate the
essence of a visual brand
for the web

73. Mostly Fluid

74. Column Drop

75. Layout Shifter

76. Off Canvas

77. Style Tiles

78. Style Tiles

79. Breakpoints
Set breakpoints according to the content

80. Device Breakpoints
Device Class Breakpoints
Natural Breakpoints
320px? 480px? WTF!
Break at the specific device width. DON’T DO THIS!!
Identify your most important device widths, classify the
devices and set the breakpoints BETWEEN them.
Define breakpoints where your layout breaks. Also define
breakpoints where you need a layout change due to space
limitations.

81. Frameworks
http://foundation.zurb.com/

82. http://foundation.zurb.com/grid-example1.php

83. http://www.zurb.com/soapbox

86. • Bootstrap
• Skeleton
• 320 and UP
• SimpleGrid
• Semantic Grid System
• Frameless (Kind of)
• HTML5 Boilerplate
• Golden Grid System
Other Frameworks

87. Wireframes and Prototyping

92. Navigation Patterns

93. http://bradfrost.github.com/this-is-responsive/patterns.html

94. Navigation Patterns
Top Navigation

97. Footer Anchor

99. Navigation Patterns
Toggle Navigation

103. Navigation Patterns
Left Nav Flyout

105. Navigation Patterns
Three-Dimensional Menu

107. Content, Content, Content

109. • Ethan Marcotte’s article that coined the term
http://www.alistapart.com/articles/responsive-web-design/
• Responsive Web Design, the book
http://www.abookapart.com/products/responsive-web-design
• Fluid Images, by Ethan Marcotte (Chapter 3 of the book)
http://www.alistapart.com/articles/fluid-images/
• Fluid Grids, by Ethan Marcotte
http://www.alistapart.com/articles/fluidgrids/
• Responsive Web Design, another article by Ethan Marcotte
http://www.netmagazine.com/features/responsive-web-design
• CSS3 Media Queries
http://webdesignerwall.com/tutorials/css3-media-queries
• Mediaqueries.es, a list of sites using Responsive Web Design techniques
http://mediaqueri.es/
Resources

110. • The article that started it all, by Ethan Marcotte:
– http://www.alistapart.com/articles/responsive-web-design/
• Fluid Images by Ethan Marcotte:
– http://unstoppablerobotninja.com/entry/fluid-images
• IE8 and below Media Queries fix:
– http://code.google.com/p/css3-mediaqueries-js/
• IE6 min/max-width hack:
– http://www.cameronmoll.com/archives/000892.html
• Fluid Grids by Ethan Marcotte:
– http://www.alistapart.com/articles/fluidgrids/
• Media Queries reference, list of Media Query selectors available:
– http://www.w3.org/TR/css3-mediaqueries/
• Responsive Typesetting:
– http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html
Resources

111. • @rdoddlm – follow me on Twitter
• me@ryandoddcs.com or rdodd@siteworx.com
• Linkedin
Where to find me

112. Questions?