Realistic responsive design

A presentation at Front-Trends 2015 in May 2015 in Warsaw, Poland by Inayaili León

Slide 1

Slide 1

Realistic responsive design by Inayaili de León Persson

Front-Trends, Warsaw, Poland, 2015

Slide 2

Slide 2

Realistic responsive design by Inayaili de León Persson

Front-Trends, Warsaw, Poland, 2015

Slide 3

Slide 3

Slide 4

Slide 4

1 It’s not about you

Slide 5

Slide 5

2 Make a plan

Slowly, slowly List your constraints One thing at a time Go shopping! {

Slide 6

Slide 6

Grid to percentages Style guide Responsive grid prototype Canonical.com project Ubuntu Insights project Responsive release Design and font end sprint Web team scoping Blogging Responsive navigation Slowly, slowly

DEC 2012 AUG APR DEC FEB 2014 OCT JUN FEB 2013 APR JUN

Slide 7

Slide 7

Slide 8

Slide 8

List your constraints

Slide 9

Slide 9

✓ Same content ✓ Same information architecture ✓ Same visual direction ✓ Existing large screen design

Slide 10

Slide 10

One thing at a time

Slide 11

Slide 11

To d o :
1. Create style guide 2. Clean up CSS 3. Convert grid to percentages 4. Create responsive grid prototype 5. Page-by-page estimate 6. Update image assets 7. Prototype responsive navigation 8. Update style guide document

Slide 12

Slide 12

Slide 13

Slide 13

Go shopping!

Slide 14

Slide 14

Slide 15

Slide 15

17% APPLE IPAD 13% APPLE IPHONE 3% GOOGLE NEXUS 7 3% LG 
 NEXUS 5 2% GOOGLE NEXUS 4 2% SAMSUNG GALAXY S3 1% SAMSUNG GALAXY S4 …

Slide 16

Slide 16

3 Evolve

Reuse Standardise across sites {

Slide 17

Slide 17

Reuse

Slide 18

Slide 18

A B C a b c d

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Standardise across sites

Slide 26

Slide 26

Slide 27

Slide 27

4 Experiment

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

5 Just do it

Tidy up before you start Set the rules Guerrilla UX {

Slide 32

Slide 32

Tidy up before you start

Slide 33

Slide 33

Slide 34

Slide 34

Slide 35

Slide 35

Set the rules

Slide 36

Slide 36

Slide 37

Slide 37

“Experiment reducing padding inside rows and boxes incrementally as the screen size decreases”

Slide 38

Slide 38

Guerrilla UX

Slide 39

Slide 39

6

Ship it…

Slide 40

Slide 40

… and live with it

Slide 41

Slide 41

Epilogue: After version 1

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

Read more at design.canonical.com

Slide 47

Slide 47

The end. Thanks for listening, 
 Inayaili de León Persson 
 @yaili