A presentation at Awwwards Conference - Amsterdam 2016 in in Amsterdam, Netherlands by Inayaili León
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
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
In an ideal scenario, when you're going to convert a non-responsive site into a responsive one, you start from scratch and do everything right and perfectly from the beginning. But in reality, starting from scratch is simply not practical or possible for many (or even most) projects. So what can we do to overcome some of the most common obstacles and still get to that elusive, mobile-first, responsive site? In this talk, I'll go behind the scenes through the nitty-gritty of a real world responsive retrofitting project, and provide useful tips that can be put in practice by other teams facing similar challenges.
