Realistic responsive design

Realistic responsive design by Inayaili de León Persson

Generate Conference, London , 2015

1

Define a project leader

https://flic.kr/p/8JJDer

2

Buy lots of sticky notes

3

Involve all the right people

https://flic.kr/p/dMpken

4

Make a wishlist and plan from there

https://flic.kr/p/oRsPbM

5 Add deadlines for other projects

to the calendar first

6

Deprioritise other projects

https://flic.kr/p/oepoQQ

7

Aim for a date, but be flexible

https://flic.kr/p/odGXUV

8

Divide the project into chunks

https://flic.kr/p/oepDi6

9

Prioritise what you want to do first

10 Write down everything

you will NOT do

https://flic.kr/p/a3KRS4

11

Make a page inventory

12

Know the transition won’t
happen overnight

https://flic.kr/p/4WNS3F

13 Allow plenty of time

for device testing

https://flic.kr/p/bu2gfG

14 Test on devices as you go

15

Get test devices based on analytics

14 % APPLE IPHONE 10 % APPLE IPAD 5 % GOOGLE NEXUS 5 3% LG   NEXUS 5 1 % SONY READER PRS-T1 1 % GOOGLE NEXUS 7 1% MICROSOFT SURFACE …

16

Create a document with initial rules

https://flic.kr/p/65C7c3

17

Make a component inventory

18

Have a style guide

19

Clean up your CSS

https://flic.kr/p/ovrq1Y

20 Split your CSS into smaller files

21 Make sure you have a solid grid

https://flic.kr/p/do6BHg

22 Convert grid to percentages

23

Evolve instead of change

https://flic.kr/p/oeJcBM

24

Don’t be afraid to copy

25 Use everyone at once

https://flic.kr/p/xNXbL1

26 Don’t use everyone at once

https://flic.kr/p/oepDi6

27 Get people not involved

in the project to pitch in

https://flic.kr/p/5SWEK3

28 Quick and dirty UX

29 Experiment on smaller projects

30 What would you improve

if you only had 1 hour?

https://flic.kr/p/oy4MFD

31 Determine breakpoints

based on your users

https://flic.kr/p/oepiSJ

32 Get rid of inline styles

https://flic.kr/p/371PoS

33 Remove floats

https://flic.kr/p/fjD9rQ

34 Make an image inventory

35 Compress bitmap images

https://flic.kr/p/5V9Gqw

36 Store reusable image assets

in a central location

https://flic.kr/p/5Qpjmp

37 Adjust type based on real devices

https://flic.kr/p/uCVKGp

38 Don't keep two code bases

for longer than you need to

https://flic.kr/p/i6PjYM

39 Keep a record of all decisions

40 Talk and write about it

https://flic.kr/p/9MhxcX