How to Plan for the Shift to Responsive Web Design
description
Transcript of How to Plan for the Shift to Responsive Web Design
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.