1. Retro-fitting
Adaptive Designs
Matt Machell - Multipack Presents
November 2011
eclecticdreams.com / @shuckle

2. Meet Prism

3. • "Next generation bibliographic
discovery interface"
• 100+ instances - each with 10,000s of users
• Software as a service
• Completely theme-able…

4. 9 months ago….
“We want a solution
for Mobile”

5. Problems
• Technical debt in base stylesheets
• Which customers have been built on
• and can change at any point

6. Solutions
• Adaptive layer that adjusts the layout for
small screens
• CSS media queries AND Javascript
• Inject layout/colour preferences at build
time.

7. Mobile after the fact

8. What does your site do?
Really?

9. What's absolutely
essential?
Keep it.

11. Not essential?
Still useful?
Hide it.
Reveal as needed.

14. Hide anything else*
*See if anybody complains

15. Things we learned

16. • Specificity is your friend
• Hacks will burn you
• !important isn’t

17. You need to cope with
stubby fingers

18. Only use the bits
you need!

19. Cache it!
• Preprocess and Munge CSS/JS
• Set far future expiry
• Preload and cache in localStorage for speed

20. Landscape Android is
bigger than you expect

21. window.scrollTo(0,1)

22. cursor:pointer;
fixes iPhone click event delegation

23. Retro-fitting is Possible