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.