Your SlideShare is downloading. ×
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

8,796

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×