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

10,283 views
10,036 views

Published on

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

No Downloads
Views
Total views
10,283
On SlideShare
0
From Embeds
0
Number of Embeds
498
Actions
Shares
0
Downloads
81
Comments
0
Likes
30
Embeds 0
No embeds

No notes for slide

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

×