Embracing Uncertainty: Learning to Think Responsively

Uploaded on

Presented to IxDA Austin on March 6, 2013. …

Presented to IxDA Austin on March 6, 2013.

Adopting Responsive Web Design practices means shifting the way we work. Get practical suggestions for streamlining your design process in the multi-screen world.

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


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


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