An Adaptive Approach

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

Transcript

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
7. THE BENEFITS One codebase. One deployment. One address. Many devices.
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 http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
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 design
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 Enhancement
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