Responsive design in the real world


Published on

On February 13, 2013, Evan Gerber gave a talk entitled "Responsive Design in the Real World" to Harvard's ABCD WWW group. In a perfect world, designers on responsive design projects work in boundless green fields, unencumbered by constraints such as legacy code, keyboard-centric interaction design, and the million other factors that limit creative freedom. In real life, it’s never that simple; we are often called to reuse existing interactions instead of starting from scratch, give a facelift to content that would do better with a bottom-up rebuild, and use an existing information architecture which may not adapt gracefully across form factors.

Designers must be able to take what they are given, and despite numerous imperfections, create something that works impressively across multiple screens, interaction models, and contexts. While some compromises must be made, cutting corners can lead to long-lasting failure, and unless key factors are carefully thought through, the team will quickly find themselves painted into a corner.

This talk will teach you how to inculcate legacy projects with a mobile first mindset, while surmounting the challenges imposed by commonly encountered stumbling blocks. Using real life examples and sample steps from a fictitious project, our audience will find out how to assess existing interaction design for red flags, identify different approaches to adapting information architectures across platforms, and learn methodologies to refine content across different form factors.

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Cut it or keep itUse to minimizeSimplify and PrioritizePrint and highlightInvoke higher authorityNielsenUsage statsWhat tweaks your peepsDevicesUsersHigh level trends, see bibliography
  • Interaction DesignTrain people to think through touchDon’t click, tapHighlight risk areasMouseoverPatterns to fix them, reuseWork collaborativelyWhiteboardKeep it simple and standardizedAgree on a set of patterns and behaviors
  • Responsive design in the real world

    1. 1. Responsive Design – What’s it about?
    2. 2. The world is not a perfect placeFormalized ProcessAnd Politics Old ContentSacred Cows Legacy CodeInformation Fidelity Confidential
    3. 3. Getting Started: Think Different
    4. 4. Fidelity Confidential Information
    5. 5. Getting Started: Be Inclusive
    6. 6. Getting Started: Get the Tools Fidelity Confidential Information
    7. 7. Getting Started: Know the Ecosystem Carriers Devices Software Consumer Market
    8. 8. Getting Started: Know your User
    9. 9. Think Mobile Fidelity Confidential Information
    10. 10. Analysis: Review Existing Work and ID Risks •Review the Pages •Understand code and content •Identify Risky Areas •Innovate
    11. 11. Design: Print, Prioritize, Sketch•Print out the pages•Prioritize and minimize the content•Sketch possible solutions•Look for innovative treatments•Reuse existing patterns
    12. 12. Fidelity Confidential Information
    13. 13. Fidelity Confidential Information
    14. 14. Fidelity Confidential Information
    15. 15. Fidelity Confidential Information
    16. 16. Develop: Work Collaboratively
    17. 17. Build: Pair Program
    18. 18. Deploy: Total Control over Pixels is Hard
    19. 19. Things to ponder• We cant always start from scratch• Think strategically about who, what, when, and why• Seek to use (and reuse) a component based design• Work incredibly collaboratively• Think mobile first, but remember constraints• Introduce new thinking