How to Plan for the Shiftto Responsive WebDesignBenson ChanProduct Planner - Microsoft@benson_chan
I build web stuffStrategy/GoalsRoadmapDesignEngineeringMeetings
I build web stuff
This talkWhat is RWD? Why?Tips: Plan for successMicrosoft.com learnings
Sorry, no technobable
What is RWD? Why?
The Web& Devices
Back in the Day
Back in the Day
Today
Today
Today
It’s now a Multi-Device WebLines between ‘mobile’,‘tablet’ & ‘desktop’ willoverlap and blur makingthese terms unhelpful.-@...
Web design as difficult as everScreen sizePixel densityConnection speedContext
Device daily usage & contexts Smartphones                                   Tablets                                       ...
Web design as difficult as everScreen sizePixel densityConnection speedContext:Device, Time, Tasks
Popular cross-device solutions                                        WWW. +            WWW. + M.                   Apps…r...
RWD: One platform for allFluid grid & BreakpointsFlexible imagesMedia queries
Fluid grid
Fluid gridNo longer fixed width design.Adaptive content hierarchy.Determine your breakpoints &what happens to layout.
Fluid grid
Keep touch in mind               http://www.lukew.com/ff/entry.asp?1649
So why do we do this?
Flexible images: constraintsScreen sizePixel densityLayout breakpointsVariable connection speeds
Flexible images: Safe zones
Just like TV safe zones
Flexible images: Safe zones        4 sizes produced and loaded for optimal performance:                    1600x540 (200kb...
Flexible images: HD resPixel density is not resolution.Support high PPI screens withmore pixels in the samesurface area.
Flexible images: HD res    1x image size on iPad retina   2x image size on iPad retina
More Media queries fun: Fluid typeCertain text sizes and paddingchange based on breakpoint forreadability.
More Media queries fun: Fluid typeSet base font size.Use ‘em’ to scale vs. using px or pthttp://kyleschaeffer.com/best-pra...
Testing all this stuff
Cultural adjustmentsNot acceptable tobreak in headlines.Font size adjusted forreadability.
Tips: Plan for success.
Tip #1: Design, meet Tech.Designers whoprototype.Engineers whocare about design.
Tip #2: No throwing over thewallSketch to Code.No more ‘redlines’.Discover perf &design constraints.
Tip #3: Need content too.Content strategy start ofprocess.Understand cross-devicecontexts.Establish content hierarchy for
Tip #4: Mobile-first? Maybe.Popular RWD mantra.Spend time first on where yourusers are today.Content hierarchy is moreimpo...
Tip #5: Start small.Simple project to gothrough design &dev cycle.Gives confidence.
Tip #6: Buying gadgets & QAEstablish supported devices.Buy core devices for testing.Use Device Anywhere for non-core.Plan ...
Tip #7: ConvincingmanagementHow important are mobilescenarios to the business?What is the cost to supportmultiple platforms?
Tip #8: Be ready to innovate.RWD still new.Get people excited for opportunityto blaze trails.
A future for RWD
The pervasive WebMore devices.More scenarios.
Thank you.
Upcoming SlideShare
Loading in …5
×

How to Plan for the Shift to Responsive Web Design

1,259 views

Published on

On Tuesday, January 29, 2013, Benson Chan presented on the topic of responsive web design at Puget Sound SIGCHI's monthly meeting.

What is Responsive Web Design, and why is it the latest craze? How does a team shift to doing RWD? The move to RWD and support of cross-device scenarios can be challenging from the perspectives of team organization, skillset and process: 1) Management can be reluctant to throw away current site design and bet on new technology, 2) design and engineering are forced to understand each other's worlds, 3) adaptive cross-device content is hard to scale, and 4) product development cycle needs to be more agile than ever. In this session, an overview of Responsive Web Design and practical tips for challenges that teams face will be shared to help you plan your RWD project for success in small or even large organizations like Microsoft.

About Benson Chan
Benson is a product manager who is passionate about user experience and design. He has launched and managed digital experiences used by millions worldwide, including Amazon Kindle, MySpace social games, and now Microsoft.com. He tweets about design, food, tech, and other random musings at @benson_chan.

Learn more about Puget Sound SIGCHI at www.pssigchi.org.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,259
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to Plan for the Shift to Responsive Web Design

  1. 1. How to Plan for the Shiftto Responsive WebDesignBenson ChanProduct Planner - Microsoft@benson_chan
  2. 2. I build web stuffStrategy/GoalsRoadmapDesignEngineeringMeetings
  3. 3. I build web stuff
  4. 4. This talkWhat is RWD? Why?Tips: Plan for successMicrosoft.com learnings
  5. 5. Sorry, no technobable
  6. 6. What is RWD? Why?
  7. 7. The Web& Devices
  8. 8. Back in the Day
  9. 9. Back in the Day
  10. 10. Today
  11. 11. Today
  12. 12. Today
  13. 13. It’s now a Multi-Device WebLines between ‘mobile’,‘tablet’ & ‘desktop’ willoverlap and blur makingthese terms unhelpful.-@Paravelinc
  14. 14. Web design as difficult as everScreen sizePixel densityConnection speedContext
  15. 15. Device daily usage & contexts Smartphones Tablets PCs & Laptops17 mins 30 mins 39 mins On the Go Sofa/Bed use Office/Home use Communication Web / TV companion Productivity Search Shop Complex tasks Source: http://googlemobileads.blogspot.com/2012/08/navigating-new-multi-screen-world.html
  16. 16. Web design as difficult as everScreen sizePixel densityConnection speedContext:Device, Time, Tasks
  17. 17. Popular cross-device solutions WWW. + WWW. + M. Apps…requires multi-platform design + development + testing +maintenance
  18. 18. RWD: One platform for allFluid grid & BreakpointsFlexible imagesMedia queries
  19. 19. Fluid grid
  20. 20. Fluid gridNo longer fixed width design.Adaptive content hierarchy.Determine your breakpoints &what happens to layout.
  21. 21. Fluid grid
  22. 22. Keep touch in mind http://www.lukew.com/ff/entry.asp?1649
  23. 23. So why do we do this?
  24. 24. Flexible images: constraintsScreen sizePixel densityLayout breakpointsVariable connection speeds
  25. 25. Flexible images: Safe zones
  26. 26. Just like TV safe zones
  27. 27. Flexible images: Safe zones 4 sizes produced and loaded for optimal performance: 1600x540 (200kb, 100% size) 1024x346 (100kb, 64%) 600x203 (50kb, 37.5%) 480x162 (40kb, 30%)
  28. 28. Flexible images: HD resPixel density is not resolution.Support high PPI screens withmore pixels in the samesurface area.
  29. 29. Flexible images: HD res 1x image size on iPad retina 2x image size on iPad retina
  30. 30. More Media queries fun: Fluid typeCertain text sizes and paddingchange based on breakpoint forreadability.
  31. 31. More Media queries fun: Fluid typeSet base font size.Use ‘em’ to scale vs. using px or pthttp://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
  32. 32. Testing all this stuff
  33. 33. Cultural adjustmentsNot acceptable tobreak in headlines.Font size adjusted forreadability.
  34. 34. Tips: Plan for success.
  35. 35. Tip #1: Design, meet Tech.Designers whoprototype.Engineers whocare about design.
  36. 36. Tip #2: No throwing over thewallSketch to Code.No more ‘redlines’.Discover perf &design constraints.
  37. 37. Tip #3: Need content too.Content strategy start ofprocess.Understand cross-devicecontexts.Establish content hierarchy for
  38. 38. Tip #4: Mobile-first? Maybe.Popular RWD mantra.Spend time first on where yourusers are today.Content hierarchy is moreimportant.
  39. 39. Tip #5: Start small.Simple project to gothrough design &dev cycle.Gives confidence.
  40. 40. Tip #6: Buying gadgets & QAEstablish supported devices.Buy core devices for testing.Use Device Anywhere for non-core.Plan for extra QA time & fixes.
  41. 41. Tip #7: ConvincingmanagementHow important are mobilescenarios to the business?What is the cost to supportmultiple platforms?
  42. 42. Tip #8: Be ready to innovate.RWD still new.Get people excited for opportunityto blaze trails.
  43. 43. A future for RWD
  44. 44. The pervasive WebMore devices.More scenarios.
  45. 45. Thank you.

×