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.

1. Responsive Design – What’s it about?

2. The world is not a perfect place
Formalized Process
And Politics Old Content
Sacred Cows
Legacy CodeInformation
Fidelity Confidential

3. Getting Started: Think Different

5. Fidelity Confidential Information

6. Getting Started: Be Inclusive

8. Getting Started: Get the Tools
Fidelity Confidential Information

9. Getting Started: Know the Ecosystem
 Carriers
 Devices
 Software
 Consumer Market

10. Getting Started: Know your User

11. Think Mobile
Fidelity Confidential Information

12. Analysis: Review Existing Work and ID Risks
•Review the Pages
•Understand code and content
•Identify Risky Areas
•Innovate

13. Design: Print, Prioritize, Sketch
•Print out the pages
•Prioritize and minimize the content
•Sketch possible solutions
•Look for innovative treatments
•Reuse existing patterns

14. Fidelity Confidential Information

15. Fidelity Confidential Information

16. Fidelity Confidential Information

17. Fidelity Confidential Information

18. Develop: Work Collaboratively

19. Build: Pair Program

20. Deploy: Total Control over Pixels is Hard

21. Things to ponder
• We can't 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