A presentation at makingweb 2.15 in September 2015 in Oslo, Norway by Inayaili León
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
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
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
View Realistic responsive design on Notist.
Dismiss