An Adaptive Approach - Speaker Deck

Slide 1

Slide 1 text

An Adaptive Approach Tom Prior | Makemedia | 18 Sept 2013 PPA Digital Conference 2013

Slide 2

Slide 2 text

Responsive is Adaptive

Slide 3

Slide 3 text

1 2 3 Load content (html) Detect browser size Optimise appearance (css) Responsive web design

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

THE BENEFITS One codebase. One deployment. One address. Many devices.

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Silver bullet? Photo credit: http://www.ﬂickr.com/photos/eschipul/4160817135/

Slide 10

Slide 10 text

http://www.ﬂickr.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/

Slide 11

Slide 11 text

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/

Slide 12

Slide 12 text

http://www.ﬂickr.com/photos/sldghmmr/6041481069

Slide 13

Slide 13 text

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/ﬁve-responsive-web-design-pitfalls-avoid

Slide 14

Slide 14 text

1 2 3 Load lightweight core Detect Optimise Adaptive web design

Slide 15

Slide 15 text

“...applying technologies in an intelligent way, layer-upon-layer, to craft an amazing experience.”

Slide 16

Slide 16 text

ADAPTIVE WEB DESIGN The most appropriate experience given the browser size and capabilities.

Slide 17

Slide 17 text

Modernizr.com CSS3? HTML5? Touch? Oﬄine storage? Caching? Geolocation?

Slide 18

Slide 18 text

Core Content

Slide 19

Slide 19 text

Core Content Detection

Slide 20

Slide 20 text

Core Content Detection Enhancement

Slide 21

Slide 21 text

Layout Core Content Detection Enhancement

Slide 22

Slide 22 text

Layout Secondary Content Core Content Detection Enhancement

Slide 23

Slide 23 text

Layout Secondary Content Image Quality Core Content Detection Enhancement

Slide 24

Slide 24 text

Layout Secondary Content Image Quality Touch Core Content Detection Enhancement

Slide 25

Slide 25 text

Layout Secondary Content Image Quality Touch Context Core Content Detection Enhancement

Slide 26

Slide 26 text

Layout Secondary Content Image Quality Touch Context The future? Core Content Detection Enhancement

Slide 27

Slide 27 text

http://www.ﬂickr.com/photos/98894117@N00/340859187/

Slide 28

Slide 28 text

http://www.ﬂickr.com/photos/98894117@N00/340859187/ “...at the core of it all is the nut: great content.” Aaron Gustafson - Adaptive Web Design

Slide 29

Slide 29 text

Thank you @tomprior thomasprior.co.uk @makemedia makemedia.com