Realistic responsive design

A presentation at Generate London 2015 in September 2015 in London, UK by Inayaili León

Slide 1

Realistic responsive design by Inayaili de León Persson

Generate Conference, London , 2015

Slide 2

1

Define a project leader

Slide 3

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

Slide 4

2

Buy lots of sticky notes

Slide 5

Slide 6

3

Involve all the right people

Slide 7

https://flic.kr/p/dMpken

Slide 8

4

Make a wishlist and plan from there

Slide 9

https://flic.kr/p/oRsPbM

Slide 10

5 Add deadlines for other projects

to the calendar first

Slide 11

Slide 12

6

Deprioritise other projects

Slide 13

https://flic.kr/p/oepoQQ

Slide 14

7

Aim for a date, but be flexible

Slide 15

https://flic.kr/p/odGXUV

Slide 16

8

Divide the project into chunks

Slide 17

https://flic.kr/p/oepDi6

Slide 18

9

Prioritise what you want to do first

Slide 19

Slide 20

10 Write down everything

you will NOT do

Slide 21

https://flic.kr/p/a3KRS4

Slide 22

11

Make a page inventory

Slide 23

Slide 24

12

Know the transition won’t
happen overnight

Slide 25

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

Slide 26

13 Allow plenty of time

for device testing

Slide 27

https://flic.kr/p/bu2gfG

Slide 28

14 Test on devices as you go

Slide 29

Slide 30

15

Get test devices based on analytics

Slide 31

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 …

Slide 32

16

Create a document with initial rules

Slide 33

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

Slide 34

17

Make a component inventory

Slide 35

Slide 36

18

Have a style guide

Slide 37

Slide 38

19

Clean up your CSS

Slide 39

https://flic.kr/p/ovrq1Y

Slide 40

20 Split your CSS into smaller files

Slide 41

Slide 42

21 Make sure you have a solid grid

Slide 43

https://flic.kr/p/do6BHg

Slide 44

22 Convert grid to percentages

Slide 45

Slide 46

23

Evolve instead of change

Slide 47

https://flic.kr/p/oeJcBM

Slide 48

24

Don’t be afraid to copy

Slide 49

Slide 50

25 Use everyone at once

Slide 51

https://flic.kr/p/xNXbL1

Slide 52

26 Don’t use everyone at once

Slide 53

https://flic.kr/p/oepDi6

Slide 54

27 Get people not involved

in the project to pitch in

Slide 55

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

Slide 56

28 Quick and dirty UX

Slide 57

Slide 58

29 Experiment on smaller projects

Slide 59

Slide 60

30 What would you improve

if you only had 1 hour?

Slide 61

https://flic.kr/p/oy4MFD

Slide 62

31 Determine breakpoints

based on your users

Slide 63

https://flic.kr/p/oepiSJ

Slide 64

32 Get rid of inline styles

Slide 65

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

Slide 66

33 Remove floats

Slide 67

https://flic.kr/p/fjD9rQ

Slide 68

34 Make an image inventory

Slide 69

Slide 70

35 Compress bitmap images

Slide 71

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

Slide 72

36 Store reusable image assets

in a central location

Slide 73

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

Slide 74

37 Adjust type based on real devices

Slide 75

https://flic.kr/p/uCVKGp

Slide 76

38 Don't keep two code bases

for longer than you need to

Slide 77

https://flic.kr/p/i6PjYM

Slide 78

39 Keep a record of all decisions

Slide 79

Slide 80

40 Talk and write about it

Slide 81

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

Slide 82

Read more at design.canonical.com

Slide 83

Thank you for listening.   @yaili