A Responsive Web Design case study – Internet User Experience 2012 Our goal as digital design practitioners is to craft and implement solutions that meet our clients and their users’ needs, even if those needs haven’t yet been articulated. In 2011, a consumer packaged goods client expressed a need for a brand site facelift or a “reskin” to their existing web site. Our research into the brand’s target consumer’s device preferences, behaviors and passions, however, identified a major opportunity for the brand to take a giant leap forward in their digital presence with a site that reached their consumers on more than just desktop or tablet devices. And so begins the tale of how a small team comprised of an interaction designer, graphic designer and a few engineers spun a reskin project into a responsive web design. This case study outlines the responsive web design approach used and provides tips for implementing your own responsive web design as well as helpful criteria for determining if a responsive web design is the right way to engage your target users.

2. 2011: CPG Brand Site “Reskin”
Stated project objective: update
brand site, Facebook, etc. with
brand’s new look & feel to match
new packaging, product line, tone to
suit target demographic
Opportunity: reach brand’s target of
20something women with a site that
responds well on multiple
devices, not just a desktop web site.
Proposed solution: redesign site’s
templates to be consistent with new
brand look but also to be responsive
to devices.
7/20/2012

3. Responsive Design – what is it?
• One way to keep up with all of the devices/resolutions on the market
• Applies an architectural philosophy to digital design, that structures
should respond to the environment and people in them
• Designs should respond to a user’s behavior and environment based
on screen size (resolution), platform and orientation
• Fluid grids, flexible images and media queries
• Eliminates the need for a different design and development phase for
each new gadget on the market
• NOTE: this does not mean it is cheaper to develop. See Lessons
Learned section of this presentation.
7/20/2012

4. Making our case
To sell the idea to internal
stakeholders, then the clients, we
presented:
• Data about the mobile behaviors of
target consumers and mobile usage
trends in general
• Analytics and mobile-related site
traffic data for existing site
• Review of mobile presence of brand’s
competitors
• Outlined expected features for mobile
brand sites and recommended
responsive design for brand site
restage
• Proposed a small, interdisciplinary
team to work on development in
iterative fashion
7/20/2012

6. RWD “Flavors”
Text-driven vs. Design-driven
7/20/2012

7. Target Sizes
• Breakpoints
• Transitions between them
7/20/2012

8. Target Sizes / Breakpoints
2
3
4
7/20/2012

9. Transitioning between breakpoints
Fluid Snap
http://mediaqueri.es http://cafezola.com/
http://stephencaver.com/ vs. http://teixido.co/
http://www.deren.me/ http://informationarchitects.net/
7/20/2012

10. Cross Browser, Cross Device
Polyfill for IE8 and earlier:
Respond.js
7/20/2012

11. Cross Browser, Cross Device
• Minify and concatenate CSS and JavaScript
• Optimize Images
7/20/2012

13. UX Design Approach – Keep it Simple
• Start small (handheld) and work larger (tablet > desktop)
• “Mobile First”
• Prioritize content based on the viewing experience (handheld or
tablet or desktop)
• Create a design plan that allows copy and visuals to scale and
reorient in an optimized way
• Avoid extraneous material that doesn’t add much value to the
overall experience
• Determine whether there are features or functions that WILL
need to be device-specific due to business or user requirements
7/20/2012

14. Team Work Approach -
fast, fluid, collaborative
• Replaced documentation and wireframing with direct interaction
(quick sketching, quick prototyping)
• Used the functional prototype as the document of team decisions
• Worked very closely with team members on a daily basis
• Two heads, and in some cases four heads, were better than one –
Colocation
• Made decisions quickly to keep project moving.
7/20/2012

24. Responsive design vs. mobile site vs.
apps
• Does a single feature set meet the needs of users on all
devices, or is specialized functionality needed on a mobile/tablet
device?
• Do you need a native app to deliver required features?
• Are you ready to put content first?
• Is the ability to update content in one place a top priority (vs.
separate mobile and desktop sites)?
• Is this a good fit for the client's needs?
7/20/2012

26. Design
• Keep the page designs simple.
• If it needs to scale, it’s not going to be pixel perfect.
7/20/2012

27. Engineering
• Evolve prototypes by collaborating closely with the designers
and information architects.
• Allow elements to maintain their natural document flow wherever
possible.
7/20/2012

28. Everyone
• Plan for a longer project duration. It WILL take longer to
plan, design, build, and evolve than a standard interface.
• You won’t get it right the first time and that’s okay.
• Constant battles will arise throughout the process.
• Work with your teammates to refine the experience through trial
and error.
• Always Be flexible: Resist the urge to be a control freak.
7/20/2012

30. Thanks! Krysta Stone
Associate Director of Interaction Design
Likes: Food, Libraries
Adam Kempa
Senior Software Engineer
Likes: Legos, Pinball Machines
Dan Kennedy
Interactive Designer
Likes: Anything that has to do with sports
Karen Ford
Software Engineer
Likes: Baking, Classical Music, Dogs
7/20/2012