how to plan for the shift to responsive web design
DESCRIPTION
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.TRANSCRIPT
![Page 1: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/1.jpg)
How to Plan for the Shift to Responsive Web Design
Benson Chan
Product Planner - Microsoft
@benson_chan
![Page 2: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/2.jpg)
I build web stuff
Strategy/GoalsRoadmapDesignEngineeringMeetings
![Page 3: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/3.jpg)
I build web stuff
![Page 4: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/4.jpg)
This talk
What is RWD? Why?Tips: Plan for successMicrosoft.com learnings
![Page 5: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/5.jpg)
Sorry, no technobable
![Page 6: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/6.jpg)
What is RWD? Why?
![Page 7: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/7.jpg)
The Web & Devices
![Page 8: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/8.jpg)
Back in the Day
![Page 9: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/9.jpg)
Back in the Day
![Page 10: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/10.jpg)
Today
![Page 11: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/11.jpg)
Today
![Page 12: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/12.jpg)
Today
![Page 13: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/13.jpg)
It’s now a Multi-Device Web
Lines between ‘mobile’, ‘tablet’ & ‘desktop’ will overlap and blur making these terms unhelpful.-@Paravelinc
![Page 14: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/14.jpg)
Web design as difficult as ever
Screen sizePixel densityConnection speedContext
![Page 15: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/15.jpg)
Device daily usage & contextsSmartphones Tablets PCs & Laptops
17 mins 30 mins 39 mins
Office/Home use
Productivity
Complex tasks
Sofa/Bed use
Web / TV companion
Shop
On the Go
Communication
Search
Source: http://googlemobileads.blogspot.com/2012/08/navigating-new-multi-screen-world.html
![Page 16: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/16.jpg)
Web design as difficult as ever
Screen sizePixel densityConnection speedContext:Device, Time, Tasks
![Page 17: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/17.jpg)
Popular cross-device solutions
WWW. + M.WWW. + Apps
…requires multi-platform design + development + testing + maintenance
![Page 18: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/18.jpg)
RWD: One platform for all
Fluid grid & BreakpointsFlexible imagesMedia queries
![Page 19: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/19.jpg)
Fluid grid
![Page 20: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/20.jpg)
Fluid gridNo longer fixed width design.Adaptive content hierarchy. Determine your breakpoints & what happens to layout.
![Page 21: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/21.jpg)
Fluid grid
![Page 22: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/22.jpg)
Keep touch in mind
http://www.lukew.com/ff/entry.asp?1649
![Page 23: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/23.jpg)
So why do we do this?
![Page 24: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/24.jpg)
Flexible images: constraints
Screen sizePixel densityLayout breakpoints Variable connection speeds
![Page 25: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/25.jpg)
Flexible images: Safe zones
![Page 26: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/26.jpg)
Just like TV safe zones
![Page 27: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/27.jpg)
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%)
![Page 28: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/28.jpg)
Flexible images: HD res Pixel density is not resolution.Support high PPI screens with more pixels in the same surface area.
![Page 29: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/29.jpg)
Flexible images: HD res
1x image size on iPad retina 2x image size on iPad retina
![Page 30: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/30.jpg)
More Media queries fun: Fluid type
Certain text sizes and padding change based on breakpoint for readability.
![Page 31: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/31.jpg)
More Media queries fun: Fluid type
Set 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/
![Page 32: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/32.jpg)
Testing all this stuff
![Page 33: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/33.jpg)
Cultural adjustments
Not acceptable to break in headlines.
Font size adjusted for readability.
![Page 34: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/34.jpg)
Tips: Plan for success.
![Page 35: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/35.jpg)
Tip #1: Design, meet Tech.
Designers who prototype.Engineers who care about design.
![Page 36: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/36.jpg)
Tip #2: No throwing over the wall
Sketch to Code.No more ‘redlines’.Discover perf & design constraints.
![Page 37: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/37.jpg)
Tip #3: Need content too.
Content strategy start of process.Understand cross-device contexts.Establish content hierarchy for breakpoints/contexts.Content scaling plan?
![Page 38: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/38.jpg)
Tip #4: Mobile-first? Maybe.
Popular RWD mantra. Spend time first on where your users are today. Content hierarchy is more important.
![Page 39: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/39.jpg)
Tip #5: Start small.
Simple project to go through design & dev cycle.Gives confidence.
![Page 40: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/40.jpg)
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.Performance testing.
![Page 41: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/41.jpg)
Tip #7: Convincing management
How important are mobile scenarios to the business?What is the cost to support multiple platforms?
![Page 42: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/42.jpg)
Tip #8: Be ready to innovate.
RWD still new.Get people excited for opportunity to blaze trails.
![Page 43: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/43.jpg)
A future for RWD
![Page 44: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/44.jpg)
The pervasive Web
More devices.More scenarios.
![Page 45: How to Plan for the Shift to Responsive Web Design](https://reader033.vdocument.in/reader033/viewer/2022061111/5454a184af7959a1608b86b5/html5/thumbnails/45.jpg)
Thank you.