Embed Size (px)
DESCRIPTION
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.
Citation preview
1
Responsive Design – What’s it about?
Fidelity Confidential Information 2
The world is not a perfect place
Formalized ProcessAnd Politics
Sacred Cows
Legacy Code
Old Content
3
Getting Started: Think Different
•Have a long term business strategy•Don’t do it just because it’s mobile•Think about long term convergence
4
Fidelity Confidential Information 5
6
Getting Started: Be Inclusive
•Engage the whole team from the beginning•Plan holistically and collaboratively•Look at other work, seek reuse
7
Fidelity Confidential Information 8
Getting Started: Get the Tools
Get devices or software tools•Do you really need all of that stuff? •Beg, borrow, mooch•http://resizemybrowser.com/
9
Getting Started: Know the Ecosystem
Carriers Devices Software Consumer Market
10
Getting Started: Know your User
Fidelity Confidential Information 11
Think Mobile
•Stop saying “Click”•Fingers are bigger than Mice•Devices aren’t so smart•Context changes
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
Fidelity Confidential Information 14
Fidelity Confidential Information 15
Fidelity Confidential Information 16
Fidelity Confidential Information 17
18
Develop: Work Collaboratively
Create concepts Refine with the team
19
Build: Pair Program
Work in code, not comps If you can, do it all yourself If not, share and review continuously Let the framework do the work
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
