Embed Size (px)
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.
Citation preview
How to Plan for the Shift to Responsive Web Design
Benson Chan
Product Planner - Microsoft
@benson_chan
I build web stuff
Strategy/GoalsRoadmapDesignEngineeringMeetings
I build web stuff
This talk
What 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 Web
Lines between ‘mobile’, ‘tablet’ & ‘desktop’ will overlap and blur making these terms unhelpful.-@Paravelinc
Web design as difficult as ever
Screen sizePixel densityConnection speedContext
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
Web design as difficult as ever
Screen sizePixel densityConnection speedContext:Device, Time, Tasks
Popular cross-device solutions
WWW. + M.WWW. + Apps
…requires multi-platform design + development + testing + maintenance
RWD: One platform for all
Fluid 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: constraints
Screen sizePixel densityLayout breakpoints Variable 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, 100% size)
1024x346 (100kb, 64%)600x203 (50kb, 37.5%)480x162 (40kb, 30%)
Flexible images: HD res Pixel density is not resolution.Support high PPI screens with more pixels in the same surface area.
Flexible images: HD res
1x image size on iPad retina 2x image size on iPad retina
More Media queries fun: Fluid type
Certain text sizes and padding change based on breakpoint for readability.
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/
Testing all this stuff
Cultural adjustments
Not acceptable to break in headlines.
Font size adjusted for readability.
Tips: Plan for success.
Tip #1: Design, meet Tech.
Designers who prototype.Engineers who care about design.
Tip #2: No throwing over the wall
Sketch to Code.No more ‘redlines’.Discover perf & design constraints.
Tip #3: Need content too.
Content strategy start of process.Understand cross-device contexts.Establish content hierarchy for breakpoints/contexts.Content scaling plan?
Tip #4: Mobile-first? Maybe.
Popular RWD mantra. Spend time first on where your users are today. Content hierarchy is more important.
Tip #5: Start small.
Simple project to go through design & dev cycle.Gives confidence.
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.
Tip #7: Convincing management
How important are mobile scenarios to the business?What is the cost to support multiple platforms?
Tip #8: Be ready to innovate.
RWD still new.Get people excited for opportunity to blaze trails.
A future for RWD
The pervasive Web
More devices.More scenarios.
Thank you.
