A presentation at Front-Trends 2015 in in Warsaw, Poland by Inayaili León
Realistic responsive design by Inayaili de León Persson
Front-Trends, Warsaw, Poland, 2015
Realistic responsive design by Inayaili de León Persson
Front-Trends, Warsaw, Poland, 2015
1 It’s not about you
2 Make a plan
Slowly, slowly List your constraints One thing at a time Go shopping! {
Grid to percentages Style guide Responsive grid prototype Canonical.com project Ubuntu Insights project Responsive release Design and font end sprint Web team scoping Blogging Responsive navigation Slowly, slowly
DEC 2012 AUG APR DEC FEB 2014 OCT JUN FEB 2013 APR JUN
List your constraints
✓ Same content ✓ Same information architecture ✓ Same visual direction ✓ Existing large screen design
One thing at a time
To d o :
1.
Create style guide
2.
Clean up CSS
3.
Convert grid to percentages
4.
Create responsive grid prototype
5.
Page-by-page estimate
6.
Update image assets
7.
Prototype responsive navigation
8.
Update style guide document
Go shopping!
17% APPLE IPAD 13% APPLE IPHONE 3% GOOGLE NEXUS 7 3% LG NEXUS 5 2% GOOGLE NEXUS 4 2% SAMSUNG GALAXY S3 1% SAMSUNG GALAXY S4 …
3 Evolve
Reuse Standardise across sites {
Reuse
A B C a b c d
Standardise across sites
4 Experiment
5 Just do it
Tidy up before you start Set the rules Guerrilla UX {
Tidy up before you start
Set the rules
“Experiment reducing padding inside rows and boxes incrementally as the screen size decreases”
Guerrilla UX
6
Ship it…
… and live with it
Epilogue: After version 1
Read more at design.canonical.com
The end. Thanks for listening, Inayaili de León Persson @yaili
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 where’s the challenge in that? In reality, starting from scratch is just not practical or possible for many 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 give handy tips that can be put in practice by other teams facing similar challenges.
