Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Adaptive Approach

D0255d4b7110cd38b2376d50d228432d?s=47 tomprior
September 18, 2013

An Adaptive Approach

My presentation about progressive enhancement for the PPA Digital Publishing Conference 2013.



September 18, 2013

More Decks by tomprior

Other Decks in Design


  1. An Adaptive Approach Tom Prior | Makemedia | 18 Sept

    2013 PPA Digital Conference 2013
  2. Responsive is Adaptive

  3. 1 2 3 Load content (html) Detect browser size Optimise

    appearance (css) Responsive web design
  4. None
  5. None
  6. None
  7. THE BENEFITS One codebase. One deployment. One address. Many devices.

  8. None
  9. Silver bullet? Photo credit: http://www.flickr.com/photos/eschipul/4160817135/

  10. http://www.flickr.com/photos/arkestra/2284139975 86% Responsive websites whose small screen view weighs as

    much as the large screen view. http://www.guypo.com/mobile/performance-implications-of- responsive-design-book-contribution/
  11. TIME IS MONEY 1 second delay = 7% conversion drop

  12. http://www.flickr.com/photos/sldghmmr/6041481069

  13. CONTEXTUAL CONVENTIONS “Each device provides its own unique form factor,

    interface conventions, constraints and opportunities. We need to be considerate of all these variables in order to create experiences that feel natural to the user.” Brad Frost- http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid
  14. 1 2 3 Load lightweight core Detect Optimise Adaptive web

  15. “...applying technologies in an intelligent way, layer-upon-layer, to craft an

    amazing experience.”
  16. ADAPTIVE WEB DESIGN The most appropriate experience given the browser

    size and capabilities.
  17. Modernizr.com CSS3? HTML5? Touch? Offline storage? Caching? Geolocation?

  18. Core Content

  19. Core Content Detection

  20. Core Content Detection Enhancement

  21. Layout Core Content Detection Enhancement

  22. Layout Secondary Content Core Content Detection Enhancement

  23. Layout Secondary Content Image Quality Core Content Detection Enhancement

  24. Layout Secondary Content Image Quality Touch Core Content Detection Enhancement

  25. Layout Secondary Content Image Quality Touch Context Core Content Detection

  26. Layout Secondary Content Image Quality Touch Context The future? Core

    Content Detection Enhancement
  27. http://www.flickr.com/photos/98894117@N00/340859187/

  28. http://www.flickr.com/photos/98894117@N00/340859187/ “...at the core of it all is the nut:

    great content.” Aaron Gustafson - Adaptive Web Design
  29. Thank you @tomprior thomasprior.co.uk @makemedia makemedia.com