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

Like this? Share it with your network

Share

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

  • 10,136 views
Uploaded on

 

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,136
On Slideshare
9,327
From Embeds
809
Number of Embeds
10

Actions

Shares
Downloads
74
Comments
0
Likes
27

Embeds 809

https://twitter.com 294
http://www.smashingmagazine.com 292
http://lanyrd.com 151
http://eventifier.co 30
http://librosweb.es 23
http://localhost 11
http://eventifier.com 5
http://translate.googleusercontent.com 1
http://www.google.com 1
http://www.eventifier.com 1

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