Embracing Uncertainty: Learning to Think Responsively

  • 353 views
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

Views

Total Views
353
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
5
Comments
0
Likes
1

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. 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.