Retro-fittingAdaptive DesignsMatt 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...
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/colo...
Mobile after the fact
What does your site do?        Really?
Whats 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 isbigger than you expect
window.scrollTo(0,1)
cursor:pointer;fixes iPhone click event delegation
Retro-fitting is Possible
Retrofitting Adaptive Designs
Retrofitting Adaptive Designs
Retrofitting Adaptive Designs
Upcoming SlideShare
Loading in …5
×

Retrofitting Adaptive Designs

972 views
867 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
972
On SlideShare
0
From Embeds
0
Number of Embeds
117
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Retrofitting Adaptive Designs

  1. 1. Retro-fittingAdaptive DesignsMatt Machell - Multipack Presents November 2011 eclecticdreams.com / @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

×