0
A brief history lesson
2009
A brief history lessonA website that looks good no matter
where or how I access it.
bouncebargainrentals.com
A brief history lessonA website that looks good no matter
where or how I access it.
alistapart.com/article/responsive-web-...
Waterfall
Image: http://dmall.me/ZX7pfN
Image: Google “flexible old lady”
AGile
responsive web design is
hard/easy
Be afraid/Don’t worry!
What changed?
Web design used to be so easy!
Things are different now.
88% of people have a mobile phone. The
number of people that use their phone to
access the Internet went from 31% (2009) t...
The way people are using
the web has changed.
design process
z
“Here’s what your
site will look like”
A typical design approach
Image: dmall.me/13cuOBM
zero-sum game
Designing to breakpoints—or worse, device width—is a
“Here’s what your
site will look like”
A typical design approach
“Here’s what your
site will feel like”
A new design approach
Visual inventory
Design by reference
Visual inventory
Design by reference
Visual inventory
Design by reference
Visual inventory
Design by reference
Visual inventory
Design by reference
Visual inventory
Design by reference
Solve your own problems by using
the successes and failures of others.
Visual inventory
Design by reference
Visual inventory
Design by reference
Photoshop comps
don’t cut it.
At least not the way we used to do it.
dmall.me/XA93U2dmall.me/13dialY
“I’m not making a case for ditching
Photoshop altogether and designing
solely in the browser but rather better
understandi...
“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
New design deliverables
Style tiles, element collages, & style prototypes—oh my!
Style Tiles
styletil.es
“[Style tiles are] a catalyst for
discussions around the preferences
and goals of the client.”
—Samantha Warren: Designer,...
dmall.me/13dv0R2
a game of riddles
There is a cabin on the side of a mountain.
Three people are inside and they are
dead. How did they die?
They were killed in a plane crash.
* airplane cabin
Image: dmall.me/11fsiFO
There is an ancient invention still used in
some parts of the world today that allows
people to see through walls. What is...
Windows.
Image: Hope for Today, by Shane Mielke—dmall.me/13dXv1h
A woman leaves home and makes three
left turns. She returns home again. On the
way, she passed two women with masks.
Who w...
The umpire and the catcher.
Image: dmall.me/13dXWsm
Too much abstraction and lack of context
lead to misdirection.
The point
element collages
danielmall.com/articles/rif-element-collages
element collages
element collages
element collages
element collages
element collages
element collages
element collages
“Electric”
“Shape, book, heart, bubble”
“Visual booklists”
“Pages… themed in books”
“Turn the page for step 2”
“Turn the page for step 2”
“Visual booklists”
“Pages…
themed in books”
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
rif.superfriend.ly/designs/round2
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
“Obviously this is not a website.
But I see how it could be one.”
—The perfect client’s reaction to an element collage
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
Turn powerful phrases into visual hooks.
bradfrostweb.com/blog/post/atomic-web-design
demo.pattern-lab.info
“Obviously this is not a website.
But I see how it could be one.”
—The perfect client’s reaction to an element collage
cle...
drbl.in/gXno
“It’s like giving your client a peek
at those hidden layers.”
—Paul Lloyd: Senior Visual Designer, Clearleft
“It’s like giving your client a peek
at those hidden layers.”
—Paul Lloyd: Senior Visual Designer, Clearleft
We will replace presentations
with conversations
“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 w...
style prototype
dmall.me/11g6UQK
dmall.me/11g3Ow0
4 design process tips for
responsive web design
From Vox Media Director of Design Ted Irvine (@ted_irvine)
“Things can look beautiful in Photoshop, but having
them work responsively in code gives you a more
honest sense of the de...
“Prototype with real content.”
real content
j
2
“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 always start with a 2-week typography study in a
browser. For responsive projects, design elements go
away when the vi...
Designing in
the browser
Designing in
the browser
dmall.me/Xza8z5
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...
inventing
on principle
Bret Victor—vimeo.com/36579366
inventing
on principle
inventing
on principle
“How would I ever have discovered that
[animation idea] if I had to compile every time I
made a change? So much of creatio...
For some, “designing in the browser” actually
means skipping design to starting building instead.
“Let’s change the phrase
‘designing in the browser’ to
‘deciding in the browser.’”
—Me, http://the-pastry-box-project.net/...
Yes, I realize I just cited myself.
Again.
I am so sorry.
A modern design
workflow starts in
the sales process
You can’t expect to implement a new
process if you’re selling the old way.
You can’t expect to implement a new
process if you’re selling the old way.
You can’t expect to implement a new
process if you’re selling the old way.
dmall.me/13c9Jrd
Not the first time
we’ve heard that.
“CS S is so boxy.”
—Everyone in 2001
csszengarden.com
CSS Zen Garden
“At the time, people didn’t
understand why CSS was important.
I wanted to show them.”
—Dave Shea
the modern-day
equivalent of the
css zen garden?
bostonglobe.com
microsoft.com
responsivenews.co.uk/news
polygon.com
It’s all of those
and none of those.
We’re still figuring
all of this out.
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
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
Ac...
Let’s keep talking,
tweeting, posting,
and sharing.
and remember…
responsive web design is
hard/easy
Be afraid/Don’t worry!
Thanks!
B u
@danielmall dan@danielmall.com
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Upcoming SlideShare
Loading in...5
×

Responsive Design is Hard/Easy! Be Afraid/Don't Worry!

9,008

Published on

Published in: Design, Technology
0 Comments
29 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,008
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
76
Comments
0
Likes
29
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Design is Hard/Easy! Be Afraid/Don't Worry!"

  1. 1. A brief history lesson 2009
  2. 2. A brief history lessonA website that looks good no matter where or how I access it. bouncebargainrentals.com
  3. 3. A brief history lessonA website that looks good no matter where or how I access it. alistapart.com/article/responsive-web-design
  4. 4. Waterfall Image: http://dmall.me/ZX7pfN
  5. 5. Image: Google “flexible old lady” AGile
  6. 6. responsive web design is hard/easy Be afraid/Don’t worry!
  7. 7. What changed? Web design used to be so easy!
  8. 8. Things are different now.
  9. 9. 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
  10. 10. The way people are using the web has changed.
  11. 11. design process z
  12. 12. “Here’s what your site will look like” A typical design approach
  13. 13. Image: dmall.me/13cuOBM
  14. 14. zero-sum game Designing to breakpoints—or worse, device width—is a
  15. 15. “Here’s what your site will look like” A typical design approach
  16. 16. “Here’s what your site will feel like” A new design approach
  17. 17. Visual inventory Design by reference
  18. 18. Visual inventory Design by reference
  19. 19. Visual inventory Design by reference
  20. 20. Visual inventory Design by reference
  21. 21. Visual inventory Design by reference
  22. 22. Visual inventory Design by reference
  23. 23. Solve your own problems by using the successes and failures of others.
  24. 24. Visual inventory Design by reference
  25. 25. Visual inventory Design by reference
  26. 26. Photoshop comps don’t cut it. At least not the way we used to do it.
  27. 27. dmall.me/XA93U2dmall.me/13dialY
  28. 28. “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
  29. 29. “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
  30. 30. New design deliverables Style tiles, element collages, & style prototypes—oh my!
  31. 31. Style Tiles styletil.es
  32. 32. “[Style tiles are] a catalyst for discussions around the preferences and goals of the client.” —Samantha Warren: Designer, Twitter
  33. 33. dmall.me/13dv0R2
  34. 34. a game of riddles
  35. 35. There is a cabin on the side of a mountain. Three people are inside and they are dead. How did they die?
  36. 36. They were killed in a plane crash. * airplane cabin Image: dmall.me/11fsiFO
  37. 37. There is an ancient invention still used in some parts of the world today that allows people to see through walls. What is it?
  38. 38. Windows. Image: Hope for Today, by Shane Mielke—dmall.me/13dXv1h
  39. 39. 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?
  40. 40. The umpire and the catcher. Image: dmall.me/13dXWsm
  41. 41. Too much abstraction and lack of context lead to misdirection. The point
  42. 42. element collages danielmall.com/articles/rif-element-collages
  43. 43. element collages
  44. 44. element collages
  45. 45. element collages
  46. 46. element collages
  47. 47. element collages
  48. 48. element collages
  49. 49. element collages
  50. 50. “Electric”
  51. 51. “Shape, book, heart, bubble”
  52. 52. “Visual booklists”
  53. 53. “Pages… themed in books”
  54. 54. “Turn the page for step 2”
  55. 55. “Turn the page for step 2”
  56. 56. “Visual booklists”
  57. 57. “Pages… themed in books”
  58. 58. Turn powerful phrases into visual hooks.
  59. 59. Turn powerful phrases into visual hooks.
  60. 60. Turn powerful phrases into visual hooks. rif.superfriend.ly/designs/round2
  61. 61. Turn powerful phrases into visual hooks.
  62. 62. Turn powerful phrases into visual hooks.
  63. 63. Turn powerful phrases into visual hooks.
  64. 64. Turn powerful phrases into visual hooks.
  65. 65. “Obviously this is not a website. But I see how it could be one.” —The perfect client’s reaction to an element collage
  66. 66. Turn powerful phrases into visual hooks.
  67. 67. Turn powerful phrases into visual hooks.
  68. 68. Turn powerful phrases into visual hooks.
  69. 69. Turn powerful phrases into visual hooks.
  70. 70. Turn powerful phrases into visual hooks.
  71. 71. Turn powerful phrases into visual hooks.
  72. 72. Turn powerful phrases into visual hooks.
  73. 73. Turn powerful phrases into visual hooks.
  74. 74. Turn powerful phrases into visual hooks. bradfrostweb.com/blog/post/atomic-web-design
  75. 75. demo.pattern-lab.info
  76. 76. “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
  77. 77. drbl.in/gXno
  78. 78. “It’s like giving your client a peek at those hidden layers.” —Paul Lloyd: Senior Visual Designer, Clearleft
  79. 79. “It’s like giving your client a peek at those hidden layers.” —Paul Lloyd: Senior Visual Designer, Clearleft
  80. 80. We will replace presentations with conversations
  81. 81. “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
  82. 82. style prototype dmall.me/11g6UQK
  83. 83. dmall.me/11g3Ow0
  84. 84. 4 design process tips for responsive web design From Vox Media Director of Design Ted Irvine (@ted_irvine)
  85. 85. “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
  86. 86. “Prototype with real content.” real content j 2
  87. 87. “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
  88. 88. “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
  89. 89. Designing in the browser
  90. 90. Designing in the browser dmall.me/Xza8z5
  91. 91. 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.
  92. 92. inventing on principle Bret Victor—vimeo.com/36579366
  93. 93. inventing on principle
  94. 94. inventing on principle
  95. 95. “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
  96. 96. For some, “designing in the browser” actually means skipping design to starting building instead.
  97. 97. “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/
  98. 98. Yes, I realize I just cited myself. Again. I am so sorry.
  99. 99. A modern design workflow starts in the sales process
  100. 100. You can’t expect to implement a new process if you’re selling the old way.
  101. 101. You can’t expect to implement a new process if you’re selling the old way.
  102. 102. You can’t expect to implement a new process if you’re selling the old way.
  103. 103. dmall.me/13c9Jrd
  104. 104. Not the first time we’ve heard that.
  105. 105. “CS S is so boxy.” —Everyone in 2001
  106. 106. csszengarden.com CSS Zen Garden
  107. 107. “At the time, people didn’t understand why CSS was important. I wanted to show them.” —Dave Shea
  108. 108. the modern-day equivalent of the css zen garden?
  109. 109. bostonglobe.com
  110. 110. microsoft.com
  111. 111. responsivenews.co.uk/news
  112. 112. polygon.com
  113. 113. It’s all of those and none of those.
  114. 114. We’re still figuring all of this out.
  115. 115. 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
  116. 116. 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
  117. 117. Let’s keep talking, tweeting, posting, and sharing.
  118. 118. and remember…
  119. 119. responsive web design is hard/easy Be afraid/Don’t worry!
  120. 120. Thanks! B u @danielmall dan@danielmall.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×