Realistic responsive design

Realistic responsive design by Inayaili de León Persson

Awwwards, Amsterdam, 201 6

Define a project leader

fl ic.kr/p/8JJDer

Buy lots of sticky notes

Involve all the right people

fl ic.kr/p/dMpken

Make a wishlist and plan from there

fl ic.kr/p/oRsPbM

Deprioritise other projects

fl ic.kr/p/oepoQQ

Aim for a date, but be flexible

fl ic.kr/p/odGXUV

7 .

Prioritise what you want to do first

Write down everything

you will NOT do

fl ic.kr/p/a3KRS4

List all your pages

Allow plenty of time

for device testing

fl ic.kr/p/bu2gfG

Get test devices based on analytics

14 % APPLE IPHONE 11 % APPLE IPAD 2 % MICROSOFT SURFACE 1 % GOOGLE NEXUS 5 1 % GOOGLE NEXUS 7 1 % SONY READER PRS-T1 1% SAMSUNG GALAXY S5 …

Create a document with initial rules

fl ic.kr/p/65C7c3

Make a component inventory

Have a style guide

Clean up your CSS

fl ic.kr/p/ovrq1Y

Have a solid grid

https://flic.kr/p/do6BHg

Convert grid to percentages

Evolve instead of change

fl ic.kr/p/oeJcBM

Don’t be afraid to copy

Don’t use everyone at once ,   and use everyone at once

fl ic.kr/p/xNXbL1

Show your prototypes

fl ic.kr/p/bB7EAF

Quick and dirty UX

Experiment on smaller projects

What can we do in 1 hour?

fl ic.kr/p/oy4MFD

Make an image inventory

Optimise your images

fl ic.kr/p/5ZU8DZ

Adjust type based on real devices

fl ic.kr/p/uCVKGp

Don't keep two code bases

for longer than you need to

fl ic.kr/p/i6PjYM

Keep a record of all decisions

Talk and write about it

fl ic.kr/p/9MhxcX

Read more at design.canonical.com

Thank you.   @yaili

bit.ly/viewsource2015

Realistic responsive design by Inayaili de León Persson Awwwards, Amsterdam, 201 6