Date post: | 25-Dec-2014 |
Category: |
Investor Relations |
Upload: | matt-machell |
View: | 675 times |
Download: | 0 times |
Retro-fitting Adaptive Designs
Matt Machell - Multipack Presents November 2011
eclecticdreams.com / @shuckle
Meet Prism
• "Next generation bibliographic discovery interface"
• 100+ instances - each with 10,000s of users
• Software as a service
• Completely theme-able…
9 months ago….
“We want a solution for Mobile”
Problems
• Technical debt in base stylesheets
• Which customers have been built on
• and can change at any point
Solutions
• Adaptive layer that adjusts the layout for small screens
• CSS media queries AND Javascript
• Inject layout/colour preferences at build time.
Mobile after the fact
What does your site do?
Really?
What's absolutely essential?
Keep it.
Not essential? Still useful?
Hide it.
Reveal as needed.
Hide anything else*
*See if anybody complains
Things we learned
• Specificity is your friend
• Hacks will burn you
• !important isn’t
You need to cope with stubby fingers
Only use the bits you need!
Cache it!
• Preprocess and Munge CSS/JS
• Set far future expiry
• Preload and cache in localStorage for speed
Landscape Android is bigger than you expect
window.scrollTo(0,1)
cursor:pointer;
fixes iPhone click event delegation
Retro-fitting is Possible