Your SlideShare is downloading. ×
0
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Internet User Experience 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Internet User Experience 2012

520

Published on

A Responsive Web Design case study – Internet User Experience 2012 …

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.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
520
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 2011: CPG Brand Site “Reskin”Stated project objective: updatebrand site, Facebook, etc. withbrand’s new look & feel to matchnew packaging, product line, tone tosuit target demographicOpportunity: reach brand’s target of20something women with a site thatresponds well on multipledevices, not just a desktop web site.Proposed solution: redesign site’stemplates to be consistent with newbrand look but also to be responsiveto devices.7/20/2012
  • 2. 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
  • 3. 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 fashion7/20/2012
  • 4. RWD “Flavors” Text-driven vs. Design-driven7/20/2012
  • 5. Target Sizes • Breakpoints • Transitions between them7/20/2012
  • 6. Target Sizes / Breakpoints 2 3 47/20/2012
  • 7. Transitioning between breakpointsFluid Snaphttp://mediaqueri.es http://cafezola.com/http://stephencaver.com/ vs. http://teixido.co/http://www.deren.me/ http://informationarchitects.net/7/20/2012
  • 8. Cross Browser, Cross Device Polyfill for IE8 and earlier: Respond.js7/20/2012
  • 9. Cross Browser, Cross Device • Minify and concatenate CSS and JavaScript • Optimize Images7/20/2012
  • 10. 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 requirements7/20/2012
  • 11. 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
  • 12. 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 clients needs?7/20/2012
  • 13. Design • Keep the page designs simple. • If it needs to scale, it’s not going to be pixel perfect.7/20/2012
  • 14. 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
  • 15. 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
  • 16. 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, Dogs7/20/2012

×