Tweet
Tweet

Slide 1

Slide 1 text

RESPONSIVE DESIGN @andyhume SmashingConf, Freiburg, 2013 REAL LIFE Sunday, December 29, 13

Slide 2

Slide 2 text

Sunday, December 29, 13

Slide 3

Slide 3 text

Sunday, December 29, 13

Slide 4

Slide 4 text

Sunday, December 29, 13

Slide 5

Slide 5 text

2001 2002 2004 2006 2008 2010 2012 2013 424,132 191,182 Source: ABC Sunday, December 29, 13

Slide 6

Slide 6 text

2001 2002 2004 2006 2008 2010 2012 2013 424,132 191,182 Guardian print circulation Source: ABC Sunday, December 29, 13

Slide 7

Slide 7 text

2001 2002 2004 2006 2008 2010 2012 2013 3,451,746 2,281,301 424,132 191,182 UK print circulation Source: ABC Sunday, December 29, 13

Slide 8

Slide 8 text

2001 2002 2004 2006 2008 2010 2012 2013 Source: ABC NRS PADD Sunday, December 29, 13

Slide 9

Slide 9 text

2001 2002 2004 2006 2008 2010 2012 2013 Guardian mobile visitors Source: ABC NRS PADD Sunday, December 29, 13

Slide 10

Slide 10 text

New mobile site Project goals Sunday, December 29, 13

Slide 11

Slide 11 text

New mobile site New responsive client-side architecture Project goals Sunday, December 29, 13

Slide 12

Slide 12 text

New mobile site New responsive client-side architecture New server-side app architecture Project goals Sunday, December 29, 13

Slide 13

Slide 13 text

New mobile site New responsive client-side architecture New server-side app architecture New responsive site at www.theguardian.com Project goals Sunday, December 29, 13

Slide 14

Slide 14 text

New mobile site New responsive client-side architecture New server-side app architecture New responsive site at www.theguardian.com Project goals Sunday, December 29, 13

Slide 15

Slide 15 text

The architecture CONTENT Sunday, December 29, 13

Slide 16

Slide 16 text

The architecture CONTENT CMS TOOLS EDITORIAL TOOLS WRITE API Sunday, December 29, 13

Slide 17

Slide 17 text

The architecture CONTENT CMS TOOLS EDITORIAL TOOLS WRITE API RESPONSIVE WEBSITE IPAD APP IPHONE ANDROID WINDOWS PHONE READ API Sunday, December 29, 13

Slide 18

Slide 18 text

The architecture CONTENT CMS TOOLS EDITORIAL TOOLS WRITE API RESPONSIVE WEBSITE IPAD APP IPHONE ANDROID WINDOWS PHONE READ API Sunday, December 29, 13

Slide 19

Slide 19 text

Performance Mobile first Resilience Sunday, December 29, 13

Slide 20

Slide 20 text

Mobile first Sunday, December 29, 13

Slide 21

Slide 21 text

m.guardian Silo for responsive work But... Redirect performance SEO complexity Sunday, December 29, 13

Slide 22

Slide 22 text

Mobile first design Simplify Prioritise Sunday, December 29, 13

Slide 23

Slide 23 text

Mobile first design Simplify Prioritise Stealth redesign Sunday, December 29, 13

Slide 24

Slide 24 text

Mobile first development Core HTML content first Core styles first Sunday, December 29, 13

Slide 25

Slide 25 text

@if(isModernBrowser) { } CUTTING THE MUSTARD http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/ Browser support Sunday, December 29, 13

Slide 26

Slide 26 text

@if(isModernBrowser) { } CUTTING THE MUSTARD http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/ Cutting the mustard var guardian = { isModernBrowser: ( ‘querySelector’ in document && ‘addEventListener’ in window && ‘localStorage’ in window ) }; Sunday, December 29, 13

Slide 27

Slide 27 text

HTML 4 HTML 5 Sunday, December 29, 13

Slide 28

Slide 28 text

HTML 4 HTML 5 Sunday, December 29, 13

Slide 29

Slide 29 text

http://www.flickr.com/photos/freefoto/2231356418/ Performance Sunday, December 29, 13

Slide 30

Slide 30 text

Real time performance Sunday, December 29, 13

Slide 31

Slide 31 text

Real time performance Sunday, December 29, 13

Slide 32

Slide 32 text

Real time performance Sunday, December 29, 13

Slide 33

Slide 33 text

Real time performance Sunday, December 29, 13

Slide 34

Slide 34 text

Real time performance Sunday, December 29, 13

Slide 35

Slide 35 text

Content THREE STAGES Enhancement Leftovers Sunday, December 29, 13

Slide 36

Slide 36 text

Content THREE STAGES Enhancement Leftovers Sunday, December 29, 13

Slide 37

Slide 37 text

Content THREE STAGES Enhancement Leftovers Sunday, December 29, 13

Slide 38

Slide 38 text

Content THREE STAGES Enhancement Leftovers Sunday, December 29, 13

Slide 39

Slide 39 text

Content Enhancement Leftovers Sunday, December 29, 13

Slide 40

Slide 40 text

Content Enhancement Leftovers Sunday, December 29, 13

Slide 41

Slide 41 text

Content Enhancement Leftovers Sunday, December 29, 13

Slide 42

Slide 42 text

Content Enhancement Leftovers DOMContentReady event Sunday, December 29, 13

Slide 43

Slide 43 text

Content Enhancement Leftovers DOMContentReady event Load event Sunday, December 29, 13

Slide 44

Slide 44 text

Content Sunday, December 29, 13

Slide 45

Slide 45 text

Sunday, December 29, 13

Slide 46

Slide 46 text

http://www.flickr.com/photos/spacemanbob/1084139169/ Web fonts Sunday, December 29, 13

Slide 47

Slide 47 text

FONT LOADING Progressive enhancement Sunday, December 29, 13

Slide 48

Slide 48 text

FONT LOADING Progressive enhancement Cuts the mustard Sunday, December 29, 13

Slide 49

Slide 49 text

FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF Sunday, December 29, 13

Slide 50

Slide 50 text

FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF localStorage available Sunday, December 29, 13

Slide 51

Slide 51 text

PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO SUPPORT WOFF? FONTS IN STORAGE? NO Sunday, December 29, 13

Slide 52

Slide 52 text

POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS: BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE Sunday, December 29, 13

Slide 53

Slide 53 text

Resilience http://www.flickr.com/photos/kayaker1204/4319542459/ Sunday, December 29, 13

Slide 54

Slide 54 text

Resilience http://www.flickr.com/photos/kayaker1204/4319542459/ Sunday, December 29, 13

Slide 55

Slide 55 text

Resilience http://www.flickr.com/photos/kayaker1204/4319542459/ Sunday, December 29, 13

Slide 56

Slide 56 text

http://www.flickr.com/photos/the_jorr/325224175/ Unreliable Sunday, December 29, 13

Slide 57

Slide 57 text

http://www.flickr.com/photos/vpickering/6824364286/ Resilient Sunday, December 29, 13

Slide 58

Slide 58 text

Progressive enhancement So, the conclusion is that this is the best way to deal with this. Yay us. Next, how do we do that. http://www.flickr.com/photos/8040811@N06/3167877765 Progressive enhancement Sunday, December 29, 13

Slide 59

Slide 59 text

Content Enhancement Leftovers Sunday, December 29, 13

Slide 60

Slide 60 text

Content Enhancement Leftovers Sunday, December 29, 13

Slide 61

Slide 61 text

http://www.webpagetest.org/result/130908_K2_796/7/details/ Sunday, December 29, 13

Slide 62

Slide 62 text

http://www.webpagetest.org/result/130908_K2_796/ Sunday, December 29, 13

Slide 63

Slide 63 text

http://www.webpagetest.org/result/130908_K2_796/ Median of nine test runs Sunday, December 29, 13

Slide 64

Slide 64 text

http://www.webpagetest.org/result/130908_K2_796/ Median of nine test runs iPhone 4, iOS 5.1 Sunday, December 29, 13

Slide 65

Slide 65 text

http://www.webpagetest.org/result/130908_K2_796/ Median of nine test runs 3G (1.6Mps, 300ms RTT) iPhone 4, iOS 5.1 Sunday, December 29, 13

Slide 66

Slide 66 text

Progressive enhancement So, the conclusion is that this is the best way to deal with this. Yay us. Next, how do we do that. http://www.flickr.com/photos/8040811@N06/3167877765 Progressive enhancement Sunday, December 29, 13

Slide 67

Slide 67 text

Thank-you! http://lanyrd.com/sccxwy @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc Sunday, December 29, 13

Slide 68

Slide 68 text

These people actually built it... @grantklopper @patrickhamann Ordered by volume of commits on Github (because that’s how you measure developers). https://github.com/guardian/frontend @dtrainvsquincy @commuterjoy @mattandrews @kaelig @stephanfowler @gudaithi @kungpochicken @GidsG Kay Salami Sunday, December 29, 13