This document provides an overview of responsive web design (RWD) for designers. It defines key RWD terms and discusses challenges like managing the design process for multiple screens. It offers tips on where to start with RWD, such as designing for a 768px screen first. It also covers working with writers, bosses, and coders on RWD. Recommended resources on RWD are provided at the end.

2. Chad Currie
@smithandrobot.com

3. Responsive
Web Design

4. Embracing
Uncertainty

5. or
Designing for
More Screens
Without burning out.

6. Requisite RWD freakout photo
(Borrowed from David Blooman’s @dblooman Blog Post:
http://mobiletestingfordummies.tumblr.com/post/
20056227958/testing)

7. Yes, there’s
more to
design.

8. Working
harder can’t be
the answer.

9. We’re just
going to work
differently.

10. Today
:50 100

11. Definitions

12. Responsive
Flexible Media Fluid
Grid Queries Images

13. Adaptive
Dynamic Images Server-side Magic
Responsive Layout Device Detection
Mobile Content Location Awareness
Bandwidth Awareness

14. “RWD”
A convenient short-hand for
“one design, many devices”

15. “RWD”
Generally refers to
matters of layout.

16. “RWD”
Not great for apps.

17. “RWD”
Gets you really far in
serving lots of devices with
not a lot of complexity.

18. This talk is
(mostly)
for
designers.

19. Specifically,
how does responsive
influence your
process?

20. Topics
The current Resources Getting
state of RWD you have Started
now
Managing You Testing
Your Design + Writers
Process + Bosses
+ Coders
Extra Credit

21. RWD is still
changing.

22. “Nice responsive site.
You’re doing it wrong.”

23. Train Your Brain
Design Books Videos
Blogs
Twitter Site Patten
Accounts Galleries Libraries

24. Knowing ➜ Doing
It’s a real book: http://
www.amazon.co.uk/NASA-
Space-Shuttle-Manual-
Construction/

25. Biggest Challenge
Know-how
Organizational Will

26. The old days.
Define Design Develop Deploy

27. Now.
De
De op
el
pl
ne sig ev
oy
fi n
De
D

28. (Where to)
Start
Designing
?

29. Lock down some
variables.
So you can do your job.

30. Start with
one size.
So you can focus on
the important stuff.

31. By the way
tart with New products, like
one size. Adobe’s Reflow are
trying to solve this
with variable-canvas
design tools.
you can focus on
important stuff.

32. Why one size first?
Single-tasking.
That’s why.

33. What is a good
dimension to start with?

34. Designing
desktop first puts
off the hard
decisions.

35. Picking an
arbitrary size
in the middle
is not relevant.

36. Picking an Sometimes,
arbitrary size the hardware
does matter.
What does
in the middle 600 pixels
look like,
really.
is not relevant.

37. 768.

38. 768 It’s “hardware” relevant.
It’s close enough to 800.
It helps you establish your
desktop style.
It’s tight enough to make
you think ahead to phone.

39. About pixels.
When we design, we’re
thinking about virtual pixels.

40. About pixels.
“Real” “Virtual”
Pixel Retina Pixel
These aren’t your pixels.

41. Now you
can design.

42. %, please.
Keep the “Flex” in
Flexible Grid.
Resist the urge to use fixed layouts.

43. Fixed layouts solve short
term design problems,
but they add unsustainable complexity.

44. What are we
designing?
Pages?
Layouts?
Widgets?

45. Breakpoints ≠ Layouts

46. Breakpoints
are logic for
your layouts.

47. Use breakpoints
sparingly.

48. There’s a pattern
forming.

49. Sustainability.
Centralize control now.
Struggle later.

50. Caution Words
“Rollover” “We’ll fix “Add
that with another
Javascript.” breakpoint.”
“Pin” or “Make it “There’s no
“fixed smaller” or device for
position” “Limit word that case.”
count”

51. What are we
designing?
A layout of blocks.

52. Distribute
control to blocks.

53. The grid.
More than
alignment.

54. Rows / Columns = Blocks

55. Blocks have their own responsive
behavior, and they work together.

56. Don’t forget about floats. They are not
on the grid, but responsive friendly.

57. What future are you
making for yourself?
Managing monolithic
pages.
Curating a system of
blocks that just work.

58. What a block knows.
A default layout behavior.
Any “family” block behaviors.
Any special device behaviors.
How to relate to other blocks.
If it might contain other special blocks.

59. Pocket
Device
View

60. Laying out
different states.
Mock up separate Wireframe the
layouts for each phone, then mock
major screen up the desktop.*
Lay out just one Draft phone views in
and sit very close the margin of your
to the coders. layouts.
Drew Clemens, Smashing Magazine. http://uxdesign.smashingmagazine.com/2012/05/30/
design-process-responsive-age/

61. How big do you let
your desktop get?
Depends on how much time you have.
Giant layouts require special care too.

62. Do you need a
“desktop” view at all?
Nike.com has
one, fluid “big
screen”
layout.

63. You
+ Writer

64. Create a semantic language that you
and your writer can share:
Headlines
Summaries
Rich Text Body
Call to Action
Sidebar
Merchandizing
Callouts
...

65. Because copy blocks are still blocks
and they have responsive behavior.

66. Here’s a handy writing
tip.
You can style <br />
tags to show or hide
depending on how
much space you have.

67. Here’s a handy<br />
writing tip.
You can style <br />
tags to show or hide
depending on how
much space you have.

68. You
+ Boss

69. ex·pec·ta·tions

70. That’s why 768
Avoid late is a convenient
surprises. starting point.

71. You
+ Coders

72. Write a block spec.

73. Make small HTML
tests together.

74. Define UI images versus
content images.

75. (again)

76. Retina
Javascript swapping is a
pretty good solution.

77. Retina
Do you need an alternate image?
1.7kb 3.14kb
8-bit PNGs

78. Retina
Do you need an alternate image?
Actual Size. 1024x768 (scaled).
90% JPEG 0% JPEG (!)
95kb 44kb
http://filamentgroup.com/lab/rwd_img_compression/

79. Retina
Ems versus Pixels.
(I don’t even know any more.)

80. You
+ CMS

81. CMSs ♥
Blocks.

82. Testing.

83. Make a
Device Spec.

84. If you don’t specify
what you’ll support,
you’ll have to support
everything.

85. Support.
About 15 devices you will strategically support but will not test.
If someone reposts an issue, you’ll look into it.
Test.
5-7 devices you plan
to fully support and
test thoroughly.
Targets.
3 most-
important
devices you
keep close
during design.

86. Watch out for this guy.
Just check the
server logs.

87. And your answer is ...
We’re planning
for 2015.

88. Defensive programming.
design.
Expect unforeseeable cases.
Plan to make adjustments.

89. Recommended
Resources

90. RESPONSIVE WEB DESIGN
by Ethan Marcotte
http://www.abookapart.com/products/responsive-web-design

91. A List Apart
Responsive Topics
http://alistapart.com/topic/responsive-design

92. Smashing Magazine
Responsive Topics
http://mobile.smashingmagazine.com/tag/responsive-design/

93. Wired Webmonkey
Responsive Topics
http://www.webmonkey.com/tag/responsive-design/

94. Brad Frost’s This is Responsive
Pattern Collection
http://bradfrost.github.com/this-is-responsive/patterns.html

95. @RWD
Responsive Twitter Topics
https://twitter.com/RWD

96. Responsive.is
Testing Utility
http://responsive.is

97. Media Queries
Responsive Gallery
http://mediaqueri.es/

98. Stack Overflow
Developer Community
http://stackoverflow.com/questions/tagged/responsive-design

99. Extra
Credit

100. Is Responsive
inherently a
compromise?
Are we allowing the
technology to tell us
how to design.

101. How do we make our blocks
not look so blocky?

102. Are we too focused on
screen real estate.
What next big tech
shift will make us run to
fix our designs?

103. Agile /Lean
Thinking

104. How can we apply agile
software concepts to help us
welcome uncertainty?

105. Conventional Project
Fail?
Start Win?
Agile/Lean Project
Start Fail Win Fail Fail Win Win W

106. Don’t read the
comments.
“Who the hell wants to
hear actors talk?”
— H.M. Warner, Warner Brothers, 1927

107. Don’t be daunted.
Make something today.
Accept that it’s never done.

108. Thanks.