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