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.

1. How to Plan for the Shift
to Responsive Web
Design
Benson Chan
Product Planner - Microsoft
@benson_chan

2. I build web stuff
Strategy/Goals
Roadmap
Design
Engineering
Meetings

3. I build web stuff

4. This talk
What is RWD? Why?
Tips: Plan for success
Microsoft.com learnings

5. Sorry, no technobable

6. What is RWD? Why?

7. The Web
& Devices

8. Back in the Day

9. Back in the Day

10. Today

11. Today

12. Today

13. It’s now a Multi-Device Web
Lines between ‘mobile’,
‘tablet’ & ‘desktop’ will
overlap and blur making
these terms unhelpful.
-@Paravelinc

14. Web design as difficult as ever
Screen size
Pixel density
Connection speed
Context

15. Device daily usage & contexts
Smartphones Tablets PCs & Laptops
17 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. Web design as difficult as ever
Screen size
Pixel density
Connection speed
Context:Device, Time, Tasks

17. Popular cross-device solutions
WWW. +
WWW. + M. Apps
…requires multi-platform design + development + testing +
maintenance

18. RWD: One platform for all
Fluid grid & Breakpoints
Flexible images
Media queries

19. Fluid grid

20. Fluid grid
No longer fixed width design.
Adaptive content hierarchy.
Determine your breakpoints &
what happens to layout.

21. Fluid grid

22. Keep touch in mind
http://www.lukew.com/ff/entry.asp?1649

23. So why do we do this?

24. Flexible images: constraints
Screen size
Pixel density
Layout breakpoints
Variable connection speeds

25. Flexible images: Safe zones

26. Just like TV safe zones

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. Flexible images: HD res
Pixel density is not resolution.
Support high PPI screens with
more pixels in the same
surface area.

29. Flexible images: HD res
1x image size on iPad retina 2x image size on iPad retina

30. More Media queries fun: Fluid type
Certain text sizes and padding
change based on breakpoint for
readability.

31. More Media queries fun: Fluid type
Set base font size.
Use ‘em’ to scale vs. using px or pt
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

32. Testing all this stuff

33. Cultural adjustments
Not acceptable to
break in headlines.
Font size adjusted for
readability.

34. Tips: Plan for success.

35. Tip #1: Design, meet Tech.
Designers who
prototype.
Engineers who
care about design.

36. Tip #2: No throwing over the
wall
Sketch to Code.
No more ‘redlines’.
Discover perf &
design constraints.

37. Tip #3: Need content too.
Content strategy start of
process.
Understand cross-device
contexts.
Establish content hierarchy for

38. Tip #4: Mobile-first? Maybe.
Popular RWD mantra.
Spend time first on where your
users are today.
Content hierarchy is more
important.

39. Tip #5: Start small.
Simple project to go
through design &
dev cycle.
Gives confidence.

40. Tip #6: Buying gadgets & QA
Establish supported devices.
Buy core devices for testing.
Use Device Anywhere for non-
core.
Plan for extra QA time & fixes.

41. Tip #7: Convincing
management
How important are mobile
scenarios to the business?
What is the cost to support
multiple platforms?

42. Tip #8: Be ready to innovate.
RWD still new.
Get people excited for opportunity
to blaze trails.

43. A future for RWD

44. The pervasive Web
More devices.
More scenarios.

45. Thank you.