• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to Plan for the Shift to Responsive Web Design

How to Plan for the Shift to Responsive Web Design



On Tuesday, January 29, 2013, Benson Chan presented on the topic of responsive web design at Puget Sound SIGCHI's monthly meeting. ...

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.



Total Views
Views on SlideShare
Embed Views



2 Embeds 44

http://katarinacountiss.com 43
https://twitter.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    How to Plan for the Shift to Responsive Web Design How to Plan for the Shift to Responsive Web Design Presentation Transcript

    • How to Plan for the Shiftto Responsive WebDesignBenson ChanProduct Planner - Microsoft@benson_chan
    • I build web stuffStrategy/GoalsRoadmapDesignEngineeringMeetings
    • I build web stuff
    • This talkWhat 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 WebLines between ‘mobile’,‘tablet’ & ‘desktop’ willoverlap and blur makingthese terms unhelpful.-@Paravelinc
    • Web design as difficult as everScreen sizePixel densityConnection speedContext
    • Device daily usage & contexts Smartphones Tablets PCs & Laptops17 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
    • Web design as difficult as everScreen sizePixel densityConnection speedContext:Device, Time, Tasks
    • Popular cross-device solutions WWW. + WWW. + M. Apps…requires multi-platform design + development + testing +maintenance
    • RWD: One platform for allFluid 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: constraintsScreen sizePixel densityLayout breakpointsVariable 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 resPixel density is not resolution.Support high PPI screens withmore pixels in the samesurface area.
    • Flexible images: HD res 1x image size on iPad retina 2x image size on iPad retina
    • More Media queries fun: Fluid typeCertain text sizes and paddingchange based on breakpoint forreadability.
    • More Media queries fun: Fluid typeSet 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 adjustmentsNot acceptable tobreak in headlines.Font size adjusted forreadability.
    • Tips: Plan for success.
    • Tip #1: Design, meet Tech.Designers whoprototype.Engineers whocare about design.
    • Tip #2: No throwing over thewallSketch to Code.No more ‘redlines’.Discover perf &design constraints.
    • Tip #3: Need content too.Content strategy start ofprocess.Understand cross-devicecontexts.Establish content hierarchy for
    • Tip #4: Mobile-first? Maybe.Popular RWD mantra.Spend time first on where yourusers are today.Content hierarchy is moreimportant.
    • Tip #5: Start small.Simple project to gothrough design &dev cycle.Gives confidence.
    • Tip #6: Buying gadgets & QAEstablish supported devices.Buy core devices for testing.Use Device Anywhere for non-core.Plan for extra QA time & fixes.
    • Tip #7: ConvincingmanagementHow important are mobilescenarios to the business?What is the cost to supportmultiple platforms?
    • Tip #8: Be ready to innovate.RWD still new.Get people excited for opportunityto blaze trails.
    • A future for RWD
    • The pervasive WebMore devices.More scenarios.
    • Thank you.