Responsive Design in the Real World

Making responsive websites is hard. Throw a bunch of opinionated people in the mix and it can feel nearly impossible. Let’s dig into what it takes to handle the pixels and the people really well. From beginning to end, we’ll walk through a solid, designer-focused process to make your next project a success.

Transcript

1. RESPO NSIVE DESIG N IN THE REAL WORL D @mds #generateconf
2. http://archive.studiomds.com/clients/ciamillo/lunocet/ circa 2005
4. circa 2010
5. 1920 x 1200
6. 1600 x 600
7. Goals?
9. Matt D. Smith @mds
10. Real Challenges.
11. Tools photo by Jorge Royan http://mds.io/aLow
12. Tools sort of matter. photo by Jorge Royan http://mds.io/aLow
13. photo by Luke Wroblewski http://mds.io/aLnS Devices
14. Devices sort of matter. photo by Luke Wroblewski http://mds.io/aLnS
15. photo from @theuxteam http://mds.io/aLhH People
16. People matter most. photo from @theuxteam http://mds.io/aLhH
17. “Everything is so interconnected that nobody has a clear domain of work any longer—the walls are gone, so we’re left to learn how to collaborate in the spaces where things connect.” -Frank Chimero http://frankchimero.com/talks/the-webs-grain/transcript/ photo by Steve Mynett http://mds.io/a45A
18. Interconnected.
19. Dad.
21. Skeleton Muscles Organs Appearance Human
22. Skeleton Muscles Organs Appearance UX IA Content Code UI
23. IA UI Content Code
24. *not actual human
25. Real Constraints. r r
26. Button <a href=“#”>Button</a> a { color: white; font-family: sans-serif; text-decoration: none; padding: 1em 2em; background: #3BA; border-radius: 3px; } HTML CSS 8 lines of CSS Code snippet: http://codepen.io/mds/pen/RNvPoV
27. Button <div class=“skewed-container"> <a class="skewed" href=“#”>Button</a> </div> .skewed-container { margin-top: 100px; -webkit-transform: skewX(18deg); -moz-transform: skewX(18deg); -ms-transform: skewX(18deg); -o-transform: skewX(18deg); transform: skewX(18deg); background: #3AA; max-width: 7em; } a.skewed { -webkit-transform: skewX(-18deg); -moz-transform: skewX(-18deg); -ms-transform: skewX(-18deg); -o-transform: skewX(-18deg); transform: skewX(-18deg); color: white; font-family: sans-serif; text-decoration: none; display: block; padding: 1em 2em; } HTML CSS 24 lines of CSS Code snippet: http://codepen.io/mds/pen/RNvPoV
28. Respect the constraints
29. Respect the flow
30. ✓ ␡
31. Let the 1,000,000 designs begin?! photo by Luke Wroblewski http://mds.io/aLnS
32. ???
33. Make lists.
34. Ai UX.
35. Site Map?
36. Content Map
43. 320 x 568 Mobile First
50. Expand
56. Mobile Mostly.
58. Substance trumps style Clarity trumps cleverness
59. Motivation Ability Success Fail Fogg Behavior Model
60. AIUX
61. UI. Xd
62. r Explore & Define.
63. ✓ ␡ UI Maps
69. $colors
73. 320 x 568 Mobile First
76. Components
79. Expand
80. 1366 x 768 Desktop
83. Create a structure and flow based on the content. Embrace mobile-first. Think about multi-device design early and often UX
84. Explore & define throughout the entire process Embrace component thinking Don’t get too attached to any particular process UI
85. Design is a means to an end. It isn’t the end.
91. IA UI Content Code
93. @mds Fonts: Today Sans Serif SB Thanks! mds.is/real