Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Retrofitting Adaptive Designs


Published on

  • Be the first to comment

  • Be the first to like this

Retrofitting Adaptive Designs

  1. 1. Retro-fittingAdaptive DesignsMatt Machell - Multipack Presents November 2011 / @shuckle
  2. 2. Meet Prism
  3. 3. • "Next generation bibliographic discovery interface"• 100+ instances - each with 10,000s of users• Software as a service• Completely theme-able…
  4. 4. 9 months ago…. “We want a solution for Mobile”
  5. 5. Problems• Technical debt in base stylesheets• Which customers have been built on• and can change at any point
  6. 6. Solutions• Adaptive layer that adjusts the layout for small screens• CSS media queries AND Javascript• Inject layout/colour preferences at build time.
  7. 7. Mobile after the fact
  8. 8. What does your site do? Really?
  9. 9. Whats absolutely essential? Keep it.
  10. 10. Not essential? Still useful? Hide it.Reveal as needed.
  11. 11. Hide anything else* *See if anybody complains
  12. 12. Things we learned
  13. 13. • Specificity is your friend• Hacks will burn you• !important isn’t
  14. 14. You need to cope with stubby fingers
  15. 15. Only use the bits you need!
  16. 16. Cache it!• Preprocess and Munge CSS/JS• Set far future expiry• Preload and cache in localStorage for speed
  17. 17. Landscape Android isbigger than you expect
  18. 18. window.scrollTo(0,1)
  19. 19. cursor:pointer;fixes iPhone click event delegation
  20. 20. Retro-fitting is Possible