Realistic responsive design

Realistic responsive design by Inayaili de León Persson

makingWeb_ 2.15, Oslo, 2015

Define a project leader

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

Buy lots of sticky notes

Involve all the right people

https://flic.kr/p/dMpken

Make a wishlist and plan from there

https://flic.kr/p/oRsPbM

Add deadlines for other projects

to the calendar first

Deprioritise other projects

https://flic.kr/p/oepoQQ

Aim for a date, but be flexible

https://flic.kr/p/odGXUV

Divide the project into chunks

https://flic.kr/p/oepDi6

Prioritise what you want to do first

Write down everything

you will NOT do

https://flic.kr/p/a3KRS4

Make a page inventory

Know the transition won’t
happen overnight

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

Allow plenty of time

for device testing

https://flic.kr/p/bu2gfG

Test on devices as you go

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 …

Create a document with initial rules

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

Make a component inventory

Have a style guide

Clean up your CSS

https://flic.kr/p/ovrq1Y

Split your CSS into smaller files

Make sure you have a solid grid

https://flic.kr/p/do6BHg

Convert grid to percentages

Evolve instead of change

https://flic.kr/p/oeJcBM

Don’t be afraid to copy

Use everyone at once

https://flic.kr/p/xNXbL1

Don’t use everyone at once

https://flic.kr/p/oepDi6

Get people not involved

in the project to pitch in

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

Quick and dirty UX

Experiment on smaller projects

What would you improve

if you only had 1 hour?

https://flic.kr/p/oy4MFD

Determine breakpoints

based on your users

https://flic.kr/p/oepiSJ

Get rid of inline styles

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

Remove floats

https://flic.kr/p/fjD9rQ

Make an image inventory

Compress bitmap images

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

Store reusable image assets

in a central location

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

Adjust type based on real devices

https://flic.kr/p/uCVKGp

Don't keep two code bases

for longer than you need to

https://flic.kr/p/i6PjYM

Keep a record of all decisions

Talk and write about it

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

Read more at design.canonical.com

Thank you for listening.   @yaili

Realistic responsive design by Inayaili de León Persson makingWeb_ 2.15, Oslo, 2015