Chad Currie@smithandrobot.com
ResponsiveWeb Design
EmbracingUncertainty
orDesigning forMore Screens  Without burning out.
Requisite RWD freakout photo   (Borrowed from David Blooman’s @dblooman Blog Post:     http://mobiletestingfordummies.tumb...
Yes, there’smore todesign.
Workingharder can’t bethe answer.
We’re justgoing to workdifferently.
Today:50   100
Definitions
ResponsiveFlexible   Media     FluidGrid       Queries   Images
AdaptiveDynamic Images Server-side MagicResponsive Layout Device DetectionMobile Content Location AwarenessBandwidth Aware...
“RWD”A convenient short-hand for“one design, many devices”
“RWD”Generally refers tomatters of layout.
“RWD”Not great for apps.
“RWD”   Gets you really far inserving lots of devices with  not a lot of complexity.
This talk is(mostly)fordesigners.
Specifically,how does responsiveinfluence yourprocess?
TopicsThe current    Resources   Gettingstate of RWD   you have    Started               nowManaging       You         Tes...
RWD is still changing.
“Nice responsive site.     You’re doing it wrong.”
Train Your BrainDesign     Books       VideosBlogsTwitter    Site        PattenAccounts   Galleries   Libraries
Knowing ➜ Doing    It’s a real book: http://www.amazon.co.uk/NASA-  Space-Shuttle-Manual-              Construction/
Biggest Challenge     Know-how  Organizational Will
The old days.Define   Design   Develop   Deploy
Now.                              De         De              op                       el                               pl ...
(Where to)  StartDesigning      ?
Lock down some   variables. So you can do your job.
Start with one size.So you can focus on the important stuff.
By the waytart with          New products, likeone size.          Adobe’s Reflow are                   trying to solve this...
Why one size first?Single-tasking.      That’s why.
What is a gooddimension to start with?
Designingdesktop first puts  off the hard   decisions.
Picking an arbitrary size in the middleis not relevant.
Picking an      Sometimes, arbitrary size    the hardware                   does matter.                   What does in th...
768.
768   It’s “hardware” relevant.      It’s close enough to 800.      It helps you establish your      desktop style.      I...
About pixels.  When we design, we’rethinking about virtual pixels.
About pixels.    “Real”               “Virtual”     Pixel              Retina PixelThese aren’t your pixels.
Now youcan design.
%, please.   Keep the “Flex” in     Flexible Grid.Resist the urge to use fixed layouts.
Fixed layouts solve short term design problems,but they add unsustainable complexity.
What are wedesigning?   Pages?  Layouts?  Widgets?
Breakpoints ≠ Layouts
Breakpointsare logic foryour layouts.
Use breakpoints  sparingly.
There’s a pattern   forming.
Sustainability.Centralize control now.   Struggle later.
Caution Words“Rollover”   “We’ll fix      “Add             that with      another             Javascript.”   breakpoint.”“P...
What are wedesigning?A layout of blocks.
Distributecontrol to blocks.
The grid.More thanalignment.
Rows / Columns = Blocks
Blocks have their own responsivebehavior, and they work together.
Don’t forget about floats. They are noton the grid, but responsive friendly.
What future are youmaking for yourself?Managing monolithic      pages.Curating a system ofblocks that just work.
What a block knows.      A default layout behavior.     Any “family” block behaviors.    Any special device behaviors.    ...
PocketDeviceView
Laying out    different states. Mock up separate                          Wireframe the layouts for each                  ...
How big do you letyour desktop get?  Depends on how much time you have.  Giant layouts require special care too.
Do you need a“desktop” view at all?                   Nike.com has                   one, fluid “big                   scre...
You+ Writer
Create a semantic language that you     and your writer can share:             Headlines            Summaries          Ric...
Because copy blocks are still blocksand they have responsive behavior.
Here’s a handy writingtip.             You can style <br />             tags to show or hide               depending on ho...
Here’s a handy<br />writing tip.             You can style <br />             tags to show or hide               depending...
You+ Boss
ex·pec·ta·tions
That’s why 768Avoid late   is a convenientsurprises.    starting point.
You+ Coders
Write a block spec.
Make small HTML tests together.
Define UI images versus    content images.
(again)
RetinaJavascript swapping is a  pretty good solution.
RetinaDo you need an alternate image?      1.7kb            3.14kb              8-bit PNGs
RetinaDo you need an alternate image?Actual Size.                      1024x768 (scaled).90% JPEG                         ...
RetinaEms versus Pixels.  (I don’t even know any more.)
You+ CMS
CMSs ♥Blocks.
Testing.
Make aDevice Spec.
If you don’t specify what you’ll support,you’ll have to support      everything.
Support.About 15 devices you will strategically support but will not test.        If someone reposts an issue, you’ll look...
Watch out for this guy.Just check the server logs.
And your answer is ...                     We’re planning                       for 2015.
Defensive programming.         design.  Expect unforeseeable cases.   Plan to make adjustments.
Recommended  Resources
RESPONSIVE WEB DESIGN              by Ethan Marcotte http://www.abookapart.com/products/responsive-web-design
A List Apart      Responsive Topicshttp://alistapart.com/topic/responsive-design
Smashing Magazine             Responsive Topicshttp://mobile.smashingmagazine.com/tag/responsive-design/
Wired Webmonkey        Responsive Topicshttp://www.webmonkey.com/tag/responsive-design/
Brad Frost’s This is Responsive                 Pattern Collection    http://bradfrost.github.com/this-is-responsive/patte...
@RWDResponsive Twitter Topics     https://twitter.com/RWD
Responsive.is Testing Utility   http://responsive.is
Media QueriesResponsive Gallery   http://mediaqueri.es/
Stack Overflow          Developer Communityhttp://stackoverflow.com/questions/tagged/responsive-design
ExtraCredit
Is Responsive inherently acompromise?Are we allowing thetechnology to tell us   how to design.
How do we make our blocks   not look so blocky?
Are we too focused on screen real estate.    What next big tech  shift will make us run to       fix our designs?
Agile /Lean Thinking
How can we apply agilesoftware concepts to help us   welcome uncertainty?
Conventional Project                                              Fail?Start                                         Win? ...
Don’t read the    comments.“Who the hell wants to  hear actors talk?” — H.M. Warner, Warner Brothers, 1927
Don’t be daunted. Make something today.Accept that it’s never done.
Thanks.
Embracing Uncertainty: Learning to Think Responsively
Upcoming SlideShare
Loading in …5
×

Embracing Uncertainty: Learning to Think Responsively

525 views

Published on

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.

Published in: Design
  • Be the first to comment

Embracing Uncertainty: Learning to Think Responsively

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

×