Realistic responsive design

A presentation at makingweb 2.15 in September 2015 in Oslo, Norway by Inayaili León

Slide 1

Slide 1

Realistic responsive design by Inayaili de León Persson

makingWeb_ 2.15, Oslo, 2015

Slide 2

Slide 2

Define a project leader

Slide 3

Slide 3

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

Slide 4

Slide 4

Buy lots of sticky notes

Slide 5

Slide 5

Slide 6

Slide 6

Involve all the right people

Slide 7

Slide 7

https://flic.kr/p/dMpken

Slide 8

Slide 8

Make a wishlist and plan from there

Slide 9

Slide 9

https://flic.kr/p/oRsPbM

Slide 10

Slide 10

  1. Add deadlines for other projects

to the calendar first

Slide 11

Slide 11

Slide 12

Slide 12

Deprioritise other projects

Slide 13

Slide 13

https://flic.kr/p/oepoQQ

Slide 14

Slide 14

Aim for a date, but be flexible

Slide 15

Slide 15

https://flic.kr/p/odGXUV

Slide 16

Slide 16

Divide the project into chunks

Slide 17

Slide 17

https://flic.kr/p/oepDi6

Slide 18

Slide 18

Prioritise what you want to do first

Slide 19

Slide 19

Slide 20

Slide 20

Write down everything

you will NOT do

Slide 21

Slide 21

https://flic.kr/p/a3KRS4

Slide 22

Slide 22

Make a page inventory

Slide 23

Slide 23

Slide 24

Slide 24

Know the transition won’t
happen overnight

Slide 25

Slide 25

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

Slide 26

Slide 26

Allow plenty of time

for device testing

Slide 27

Slide 27

https://flic.kr/p/bu2gfG

Slide 28

Slide 28

Test on devices as you go

Slide 29

Slide 29

Slide 30

Slide 30

Get test devices based on analytics

Slide 31

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

Slide 32

Create a document with initial rules

Slide 33

Slide 33

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

Slide 34

Slide 34

Make a component inventory

Slide 35

Slide 35

Slide 36

Slide 36

Have a style guide

Slide 37

Slide 37

Slide 38

Slide 38

Clean up your CSS

Slide 39

Slide 39

https://flic.kr/p/ovrq1Y

Slide 40

Slide 40

Split your CSS into smaller files

Slide 41

Slide 41

Slide 42

Slide 42

Make sure you have a solid grid

Slide 43

Slide 43

https://flic.kr/p/do6BHg

Slide 44

Slide 44

Convert grid to percentages

Slide 45

Slide 45

Slide 46

Slide 46

Evolve instead of change

Slide 47

Slide 47

https://flic.kr/p/oeJcBM

Slide 48

Slide 48

Don’t be afraid to copy

Slide 49

Slide 49

Slide 50

Slide 50

Use everyone at once

Slide 51

Slide 51

https://flic.kr/p/xNXbL1

Slide 52

Slide 52

Don’t use everyone at once

Slide 53

Slide 53

https://flic.kr/p/oepDi6

Slide 54

Slide 54

Get people not involved

in the project to pitch in

Slide 55

Slide 55

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

Slide 56

Slide 56

Quick and dirty UX

Slide 57

Slide 57

Slide 58

Slide 58

Experiment on smaller projects

Slide 59

Slide 59

Slide 60

Slide 60

What would you improve

if you only had 1 hour?

Slide 61

Slide 61

https://flic.kr/p/oy4MFD

Slide 62

Slide 62

Determine breakpoints

based on your users

Slide 63

Slide 63

https://flic.kr/p/oepiSJ

Slide 64

Slide 64

Get rid of inline styles

Slide 65

Slide 65

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

Slide 66

Slide 66

Remove floats

Slide 67

Slide 67

https://flic.kr/p/fjD9rQ

Slide 68

Slide 68

Make an image inventory

Slide 69

Slide 69

Slide 70

Slide 70

Compress bitmap images

Slide 71

Slide 71

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

Slide 72

Slide 72

Store reusable image assets

in a central location

Slide 73

Slide 73

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

Slide 74

Slide 74

Adjust type based on real devices

Slide 75

Slide 75

https://flic.kr/p/uCVKGp

Slide 76

Slide 76

Don't keep two code bases

for longer than you need to

Slide 77

Slide 77

https://flic.kr/p/i6PjYM

Slide 78

Slide 78

Keep a record of all decisions

Slide 79

Slide 79

Slide 80

Slide 80

Talk and write about it

Slide 81

Slide 81

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

Slide 82

Slide 82

Read more at design.canonical.com

Slide 83

Slide 83

Thank you for listening. 
 @yaili