Transcript
Page 1: Responsive design in the real world

1

Responsive Design – What’s it about?

Page 2: Responsive design in the real world

Fidelity Confidential Information 2

The world is not a perfect place

Formalized ProcessAnd Politics

Sacred Cows

Legacy Code

Old Content

Page 3: Responsive design in the real world

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

Page 4: Responsive design in the real world

4

Page 5: Responsive design in the real world

Fidelity Confidential Information 5

Page 6: Responsive design in the real world

6

Getting Started: Be Inclusive

•Engage the whole team from the beginning•Plan holistically and collaboratively•Look at other work, seek reuse

Page 7: Responsive design in the real world

7

Page 8: Responsive design in the real world

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/

Page 9: Responsive design in the real world

9

Getting Started: Know the Ecosystem

Carriers Devices Software Consumer Market

Page 10: Responsive design in the real world

10

Getting Started: Know your User

Page 11: Responsive design in the real world

Fidelity Confidential Information 11

Think Mobile

•Stop saying “Click”•Fingers are bigger than Mice•Devices aren’t so smart•Context changes

Page 12: Responsive design in the real world

12

Analysis: Review Existing Work and ID Risks

•Review the Pages•Understand code and content• Identify Risky Areas• Innovate

Page 13: Responsive design in the real world

13

Design: Print, Prioritize, Sketch

•Print out the pages•Prioritize and minimize the content•Sketch possible solutions•Look for innovative treatments•Reuse existing patterns

Page 14: Responsive design in the real world

Fidelity Confidential Information 14

Page 15: Responsive design in the real world

Fidelity Confidential Information 15

Page 16: Responsive design in the real world

Fidelity Confidential Information 16

Page 17: Responsive design in the real world

Fidelity Confidential Information 17

Page 18: Responsive design in the real world

18

Develop: Work Collaboratively

Create concepts Refine with the team

Page 19: Responsive design in the real world

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

Page 20: Responsive design in the real world

20

Deploy: Total Control over Pixels is Hard

Page 21: Responsive design in the real world

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