This document discusses the history and challenges of responsive web design. It notes that the way people access the internet has changed significantly since 2009, with many more people now using mobile phones to access the web. Traditional web design approaches no longer work as well. The document discusses new design methods for responsive web design, such as style tiles, element collages, and style prototypes that allow designing directly in the browser rather than with static Photoshop comps. It emphasizes the need to have real conversations with clients about the design process rather than presentations.

3. A brief history lesson
2009

4. A brief history lessonA website that looks good no matter
where or how I access it.
bouncebargainrentals.com

5. A brief history lessonA website that looks good no matter
where or how I access it.
alistapart.com/article/responsive-web-design

7. Waterfall
Image: http://dmall.me/ZX7pfN

12. Image: Google “flexible old lady”
AGile

33. responsive web design is
hard/easy
Be afraid/Don’t worry!

34. What changed?
Web design used to be so easy!

37. Things are different now.

38. 88% of people have a mobile phone. The
number of people that use their phone to
access the Internet went from 31% (2009) to
55% (2012).
35% of people in the
US don’t have
Internet access at
home.
59% of Americans
who make less
than $30,000 have
no Internet access
at home.
88% of Americans
without a high
school diploma
don’t have Internet
access at home.
—Karen McGrane, via Luke Wroblewski. http://www.lukew.com/ff/entry.asp?1602

40. The way people are using
the web has changed.

41. design process
z

42. “Here’s what your
site will look like”
A typical design approach

46. Image: dmall.me/13cuOBM

47. zero-sum game
Designing to breakpoints—or worse, device width—is a

48. “Here’s what your
site will look like”
A typical design approach

49. “Here’s what your
site will feel like”
A new design approach

50. Visual inventory
Design by reference

51. Visual inventory
Design by reference

52. Visual inventory
Design by reference

53. Visual inventory
Design by reference

54. Visual inventory
Design by reference

55. Visual inventory
Design by reference

56. Solve your own problems by using
the successes and failures of others.

57. Visual inventory
Design by reference

58. Visual inventory
Design by reference

59. Photoshop comps
don’t cut it.
At least not the way we used to do it.

60. dmall.me/XA93U2dmall.me/13dialY

61. “I’m not making a case for ditching
Photoshop altogether and designing
solely in the browser but rather better
understanding how we use Photoshop in
modern web design.”
—Brad Frost, Front-End Designer

62. “I don’t think we’re in a post-P S D era, but
I do think we’re moving towards a
post-‘full-comp’ era.”
—Me

63. New design deliverables
Style tiles, element collages, & style prototypes—oh my!

64. Style Tiles
styletil.es

65. “[Style tiles are] a catalyst for
discussions around the preferences
and goals of the client.”
—Samantha Warren: Designer, Twitter

67. dmall.me/13dv0R2

68. a game of riddles

69. There is a cabin on the side of a mountain.
Three people are inside and they are
dead. How did they die?

70. They were killed in a plane crash.
* airplane cabin
Image: dmall.me/11fsiFO

71. There is an ancient invention still used in
some parts of the world today that allows
people to see through walls. What is it?

72. Windows.
Image: Hope for Today, by Shane Mielke—dmall.me/13dXv1h

73. A woman leaves home and makes three
left turns. She returns home again. On the
way, she passed two women with masks.
Who were the two women?

74. The umpire and the catcher.
Image: dmall.me/13dXWsm

75. Too much abstraction and lack of context
lead to misdirection.
The point

76. element collages
danielmall.com/articles/rif-element-collages

77. element collages

78. element collages

79. element collages

80. element collages

81. element collages

82. element collages

83. element collages

84. “Electric”

85. “Shape, book, heart, bubble”

86. “Visual booklists”

87. “Pages… themed in books”

88. “Turn the page for step 2”

90. “Turn the page for step 2”

91. “Visual booklists”

92. “Pages…
themed in books”

93. Turn powerful phrases into visual hooks.

94. Turn powerful phrases into visual hooks.

95. Turn powerful phrases into visual hooks.
rif.superfriend.ly/designs/round2

96. Turn powerful phrases into visual hooks.

97. Turn powerful phrases into visual hooks.

98. Turn powerful phrases into visual hooks.

99. Turn powerful phrases into visual hooks.

100. “Obviously this is not a website.
But I see how it could be one.”
—The perfect client’s reaction to an element collage

101. Turn powerful phrases into visual hooks.

102. Turn powerful phrases into visual hooks.

103. Turn powerful phrases into visual hooks.

104. Turn powerful phrases into visual hooks.

105. Turn powerful phrases into visual hooks.

106. Turn powerful phrases into visual hooks.

107. Turn powerful phrases into visual hooks.

108. Turn powerful phrases into visual hooks.

109. Turn powerful phrases into visual hooks.
bradfrostweb.com/blog/post/atomic-web-design

110. demo.pattern-lab.info

111. “Obviously this is not a website.
But I see how it could be one.”
—The perfect client’s reaction to an element collage
clearleft.com/thinks/visualdesignexplorations

113. drbl.in/gXno

115. “It’s like giving your client a peek
at those hidden layers.”
—Paul Lloyd: Senior Visual Designer, Clearleft

116. “It’s like giving your client a peek
at those hidden layers.”
—Paul Lloyd: Senior Visual Designer, Clearleft

117. We will replace presentations
with conversations

118. “We must move away from the place where the
client sits with arms crossed in the role of judge,
and we take to the stage with song and dance in
the role of auditioning talent. While both parties
find the showmanship of our craft titillating, the
practitioner’s is a stronger place than that of the
performer. It is this practitioner’s position from
which we must strive to operate. Practitioners do
not present. Stars do not audition.”
—Blair Enns, dmall.me/13eVrWD

119. style prototype
dmall.me/11g6UQK

120. dmall.me/11g3Ow0

123. 4 design process tips for
responsive web design
From Vox Media Director of Design Ted Irvine (@ted_irvine)

124. “Things can look beautiful in Photoshop, but having
them work responsively in code gives you a more
honest sense of the design. As designers, we're often a
bit dishonest about content. We realized that the more
quickly we got into code, the more quickly things
broke, and the more quickly we could fix them.”
be honest
j
1

125. “Prototype with real content.”
real content
j
2

126. “We still do a lot of work in Photoshop when we
needed to focus. Sometimes when you work only in
code, you work too fast. We needed to slow down.”
Slow down
j
3

127. “We always start with a 2-week typography study in a
browser. For responsive projects, design elements go
away when the viewport gets smaller, so typography
plays an important part in carrying the brand.”
Start with type
j
4

128. Designing in
the browser

129. Designing in
the browser
dmall.me/Xza8z5

130. Photoshop will have a place in my workflow
for a long time to come. It allows me to be
expressive in a way that I can’t be with code.

131. inventing
on principle
Bret Victor—vimeo.com/36579366

132. inventing
on principle

133. inventing
on principle

134. “How would I ever have discovered that
[animation idea] if I had to compile every time I
made a change? So much of creation is about
discovery, and you can’t discover anything if
you can’t see what you’re doing.”
—Bret Victor

135. For some, “designing in the browser” actually
means skipping design to starting building instead.

136. “Let’s change the phrase
‘designing in the browser’ to
‘deciding in the browser.’”
—Me, http://the-pastry-box-project.net/dan-mall/2012-september-12/

137. Yes, I realize I just cited myself.
Again.
I am so sorry.

138. A modern design
workflow starts in
the sales process

139. You can’t expect to implement a new
process if you’re selling the old way.

140. You can’t expect to implement a new
process if you’re selling the old way.

141. You can’t expect to implement a new
process if you’re selling the old way.

142. dmall.me/13c9Jrd

143. Not the first time
we’ve heard that.

144. “CS S is so boxy.”
—Everyone in 2001

145. csszengarden.com
CSS Zen Garden

146. “At the time, people didn’t
understand why CSS was important.
I wanted to show them.”
—Dave Shea

147. the modern-day
equivalent of the
css zen garden?

148. bostonglobe.com

149. microsoft.com

150. responsivenews.co.uk/news

151. polygon.com

152. It’s all of those
and none of those.

153. We’re still figuring
all of this out.

154. IA/UX
Design
HTML/CSS
JavaScript
Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10
proposed schedule

155. IA/UX
Design
HTML/CSS
JavaScript
Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 Week 11 Week 12
Actual schedule

156. Let’s keep talking,
tweeting, posting,
and sharing.

157. and remember…

158. responsive web design is
hard/easy
Be afraid/Don’t worry!

159. Thanks!
B u
@danielmall dan@danielmall.com