A presentation at Generate London 2015 in September 2015 in London, UK by Inayaili León
Realistic responsive design by Inayaili de León Persson
Generate Conference, London , 2015
1
Define a project leader
https://flic.kr/p/8JJDer
2
Buy lots of sticky notes
3
Involve all the right people
https://flic.kr/p/dMpken
4
Make a wishlist and plan from there
https://flic.kr/p/oRsPbM
5 Add deadlines for other projects
to the calendar first
6
Deprioritise other projects
https://flic.kr/p/oepoQQ
7
Aim for a date, but be flexible
https://flic.kr/p/odGXUV
8
Divide the project into chunks
https://flic.kr/p/oepDi6
9
Prioritise what you want to do first
10 Write down everything
you will NOT do
https://flic.kr/p/a3KRS4
11
Make a page inventory
12
Know the transition won’t happen overnight
https://flic.kr/p/4WNS3F
13 Allow plenty of time
for device testing
https://flic.kr/p/bu2gfG
14 Test on devices as you go
15
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 …
16
Create a document with initial rules
https://flic.kr/p/65C7c3
17
Make a component inventory
18
Have a style guide
19
Clean up your CSS
https://flic.kr/p/ovrq1Y
20 Split your CSS into smaller files
21 Make sure you have a solid grid
https://flic.kr/p/do6BHg
22 Convert grid to percentages
23
Evolve instead of change
https://flic.kr/p/oeJcBM
24
Don’t be afraid to copy
25 Use everyone at once
https://flic.kr/p/xNXbL1
26 Don’t use everyone at once
27 Get people not involved
in the project to pitch in
https://flic.kr/p/5SWEK3
28 Quick and dirty UX
29 Experiment on smaller projects
30 What would you improve
if you only had 1 hour?
https://flic.kr/p/oy4MFD
31 Determine breakpoints
based on your users
https://flic.kr/p/oepiSJ
32 Get rid of inline styles
https://flic.kr/p/371PoS
33 Remove floats
https://flic.kr/p/fjD9rQ
34 Make an image inventory
35 Compress bitmap images
https://flic.kr/p/5V9Gqw
36 Store reusable image assets
in a central location
https://flic.kr/p/5Qpjmp
37 Adjust type based on real devices
https://flic.kr/p/uCVKGp
38 Don't keep two code bases
for longer than you need to
https://flic.kr/p/i6PjYM
39 Keep a record of all decisions
40 Talk and write about it
https://flic.kr/p/9MhxcX
Read more at design.canonical.com
Thank you for listening. @yaili
View Realistic responsive design on Notist.
Dismiss