Embracing Uncertainty: Learning to Think Responsively

Presented to IxDA Austin on March 6, 2013

Transcript

2. Chad Currie @smithandrobot.com
3. Responsive Web Design
4. Embracing Uncertainty
5. Designing for More Screens Without burning out. or
6. Requisite RWD freakout photo (Borrowed from David Blooman’s @dblooman Blog Post: http:/ /mobiletestingfordummies.tumblr.com/post/ 20056227958/testing)
7. Yes, there’s more to design.
8. Working harder can’t be the answer.
9. We’re just going to work differently.
10. Today 100 :50
11. Definitions
12. Responsive Flexible Grid Media Queries Fluid Images
13. Adaptive Responsive Layout Device Detection Location Awareness Server-side Magic Bandwidth Awareness Dynamic Images Mobile Content
14. “RWD” A convenient short-hand for “one design, many devices”
15. “RWD” Generally refers to matters of layout.
16. “RWD” Not great for apps.
17. “RWD” Gets you really far in serving lots of devices with not a lot of complexity.
18. This talk is (mostly) for designers.
19. Specifically, how does responsive influence your process?
20. Topics The current state of RWD Resources you have now Getting Started Managing Your Design Process You + Writers + Bosses + Coders Testing Extra Credit
21. RWD is still changing.
22. “Nice responsive site. You’re doing it wrong.”
23. Train Your Brain Design Blogs Books Videos Twitter Accounts Site Galleries Patten Libraries
24. It’s a real book: http:/ / www.amazon.co.uk/NASA- Space-Shuttle-Manual- Construction/ Knowing ➜ Doing
25. Biggest Challenge Know-how Organizational Will
26. The old days. Define Design Develop Deploy
27. Now. Define Design Develop Deploy
28. Start Designing (Where to) ?
29. Lock down some variables. So you can do your job.
30. Start with one size. So you can focus on the important stuff.
31. tart with one size. you can focus on important stuff. By the way New products, like Adobe’s Reflow are trying to solve this with variable-canvas design tools.
32. Why one size first? That’s why. Single-tasking.
33. What is a good dimension to start with?
34. Designing desktop first puts off the hard decisions.
35. Picking an arbitrary size in the middle is not relevant.
36. Picking an arbitrary size in the middle is not relevant. Sometimes, the hardware does matter. What does 600 pixels look like, really.
37. 768.
38. It’s “hardware” relevant. It’s close enough to 800. It helps you establish your desktop style. It’s tight enough to make you think ahead to phone. 768
39. About pixels. When we design, we’re thinking about virtual pixels.
40. About pixels. “Real” Pixel “Virtual” Retina Pixel These aren’t your pixels.
41. Now you can design.
42. %, please. Keep the “Flex” in Flexible Grid. Resist the urge to use fixed layouts.
43. Fixed layouts solve short term design problems, but they add unsustainable complexity.
44. What are we designing? Pages? Layouts? Widgets?
45. Breakpoints ≠ Layouts
46. Breakpoints are logic for your layouts.
47. Use breakpoints sparingly.
48. There’s a pattern forming.
49. Sustainability. Centralize control now. Struggle later.
50. Caution Words “Rollover” “We’ll fix that with Javascript.” “Add another breakpoint.” “Pin” or “fixed position” “Make it smaller” or “Limit word count” “There’s no device for that case.”
51. What are we designing? A layout of blocks.
52. Distribute control to blocks.
53. The grid. More than alignment.
54. Rows / Columns = Blocks
55. Blocks have their own responsive behavior, and they work together.
56. Don’t forget about floats. They are not on the grid, but responsive friendly.
57. What future are you making for yourself? Managing monolithic pages. Curating a system of blocks that just work.
58. What a block knows. A default layout behavior. Any “family” block behaviors. Any special device behaviors. How to relate to other blocks. If it might contain other special blocks.
59. Pocket Device View
60. Laying out different states. Mock up separate layouts for each major screen Draft phone views in the margin of your layouts. Lay out just one and sit very close to the coders. Wireframe the phone, then mock up the desktop.* Drew Clemens, Smashing Magazine. http:/ /uxdesign.smashingmagazine.com/2012/05/30/ design-process-responsive-age/
61. How big do you let your desktop get? Depends on how much time you have. Giant layouts require special care too.
62. Do you need a “desktop” view at all? Nike.com has one, fluid “big screen” layout.
63. You + Writer
64. Create a semantic language that you and your writer can share: Headlines Summaries Rich Text Body Call to Action Sidebar Merchandizing Callouts ...
65. Because copy blocks are still blocks and they have responsive behavior.
66. You can style <br /> tags to show or hide depending on how much space you have. Here’s a handy writing tip.
67. You can style <br /> tags to show or hide depending on how much space you have. Here’s a handy<br /> writing tip.
68. You + Boss
69. ex·pec·ta·tions
70. Avoid late surprises. That’s why 768 is a convenient starting point.
71. You + Coders
72. Write a block spec.
73. Make small HTML tests together.
74. Define UI images versus content images.
75. (again)
76. Retina Javascript swapping is a pretty good solution.
77. Retina Do you need an alternate image? 3.14kb 8-bit PNGs 1.7kb
78. Retina Do you need an alternate image? http:/ /filamentgroup.com/lab/rwd_img_compression/ Actual Size. 90% JPEG 95kb 1024x768 (scaled) . 0% JPEG (!) 44kb
79. Retina Ems versus Pixels. (I don’t even know any more.)
80. You + CMS
81. CMSs — Blocks.
82. Testing.
83. Make a Device Spec.
84. If you don’t specify what you’ll support, you’ll have to support everything.
85. Targets. 3 most- important devices you keep close during design. Test. 5-7 devices you plan to fully support and test thoroughly. Support. About 15 devices you will strategically support but will not test. If someone reposts an issue, you’ll look into it.
86. Watch out for this guy. Just check the server logs.
87. And your answer is ... We’re planning for 2015.
88. Defensive programming. design. Expect unforeseeable cases. Plan to make adjustments.
89. Recommended Resources
90. RESPONSIVE WEB DESIGN by Ethan Marcotte http:/ /www.abookapart.com/products/responsive-web-design
91. A List Apart Responsive Topics http:/ /alistapart.com/topic/responsive-design
92. Smashing Magazine Responsive Topics http:/ /mobile.smashingmagazine.com/tag/responsive-design/
93. Wired Webmonkey Responsive Topics http:/ /www.webmonkey.com/tag/responsive-design/
94. Brad Frost’s This is Responsive Pattern Collection http:/ /bradfrost.github.com/this-is-responsive/patterns.html
95. @RWD Responsive Twitter Topics https:/ /twitter.com/RWD
96. Responsive.is Testing Utility http:/ /responsive.is
97. Media Queries Responsive Gallery http:/ /mediaqueri.es/
98. Stack Overflow Developer Community http:/ /stackoverflow.com/questions/tagged/responsive-design
99. Extra Credit
100. Is Responsive inherently a compromise? Are we allowing the technology to tell us how to design.
101. How do we make our blocks not look so blocky?
102. Are we too focused on screen real estate. What next big tech shift will make us run to fix our designs?
103. Agile /Lean Thinking
104. How can we apply agile software concepts to help us welcome uncertainty?
105. Conventional Project Agile/Lean Project Start Start Fail Win Fail Fail Win Win Fail? Win? W
106. “Who the hell wants to hear actors talk?” — H.M. Warner, Warner Brothers, 1927 Don’t read the comments.
107. Don’t be daunted. Make something today. Accept that it’s never done.
108. Thanks.