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