Rebuilding a university homepage to be "responsive". Twice. In less than a year.

Slide 1

Slide 1 text

Rebuilding a university homepage to be "responsive". Twice. In less than a year. Erik Runyon | @erunyon | HighEdWeb MI, May 2013

Slide 2

Slide 2 text

who am i? Erik Runyon Director of Web Communications University of Notre Dame

Slide 3

Slide 3 text

i’m from

Slide 4

Slide 4 text

i work at

Slide 5

Slide 5 text

we’re all #highered

Slide 6

Slide 6 text

What We’ll Cover I. Why RWD Matters II. Our Path to Responsive III. 2011 Redesign IV. 2012 Redesign V. Responsible Responsive

Slide 7

Slide 7 text

I. Why RWD (and mobile) Matters

Slide 8

Slide 8 text

2010 ND.edu 2.6% Admissions 3.6% Game Day 7.18% 2011 ND.edu 4.37% Admissions 8.76% Game Day 26.09% 2012 ND.edu 13.3% Admissions 17.7% Game Day 44.92%

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

January 7, 2013 BCS Bowl Game

Slide 11

Slide 11 text

January 7, 2013 BCS Bowl Game

Slide 12

Slide 12 text

So yeah… …mobile matters

Slide 13

Slide 13 text

II. Our Path to Responsive

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

2008 Basic mobile and Webkit support added (iPhone and later Android)

Slide 17

Slide 17 text

// IN THE HEAD OF THE DOCUMENT // IN THE JS (IMMEDIATELY FOLLOWING CSS) if( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/webOS/i))) { ! // REMOVES ALL STYLESHEETS ... ! for (var k=0;k < document.styleSheets.length; k++) { ! ! if (document.styleSheets[k].href != null && document.styleSheets[k].href.lastIndexOf("webkit") == -1) { ! ! ! document.styleSheets[k].disabled = true; ! ! } ! } ! window.scrollTo(0,1); }

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Winter 2009 m.nd.edu released

Slide 21

Slide 21 text

Spring 2011 First “Adaptive” design released magazine.nd.edu

Slide 22

Slide 22 text

/************************************************************************** @media queries **************************************************************************/ /* iPad landscape ----------- */ @media only screen and (min-width:801px) and (max-width:1100px) {} /* iPad portrait ----------- */ @media only screen and (max-width:768px) {} /* Mid-Size Tablets (Galaxy Tab) (portrait) ----------- */ @media only screen and (max-width:591px) and (orientation:portrait) {} /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-width: 320px) and (max-width: 480px) {} /* Smartphones (portrait) ----------- */ @media only screen and (min-width:320px) and (max-width:380px) {}

Slide 23

Slide 23 text

III. 2011 Redesign

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

36 KB 2.2 MB (1.7 MB Flash)

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

June 2011 Redesign Goals •Replace Flash carousel with feature story image •Train internal audience to go elsewhere •Mobile friendly (Adaptive design)

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

/************************************************************************** @media queries **************************************************************************/ /* Tablets landscape */ @media only screen and (max-width:1100px) {} /* Tablets portrait */ @media only screen and (max-width:800px) {} /* Mid-Size Tablets */ @media only screen and (max-width:600px) {} /* Smartphones (landscape) */ @media only screen and (max-width:480px) {} /* Smartphones (portrait) */ @media only screen and (max-width:320px) {}

Slide 33

Slide 33 text

Summer 2011 Our ﬁrst responsive ND.edu

Slide 34

Slide 34 text

done

Slide 35

Slide 35 text

Winter 2011 New department

Slide 36

Slide 36 text

New Boss New Website

Slide 37

Slide 37 text

IV. 2012 Redesign

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Goals • Design from mobile to HD • Build mobile ﬁrst using RWD • Keep mobile experience fast • Maintain content parity • Finish in eight weeks

Slide 41

Slide 41 text

Mobile First What does that even mean?

Slide 42

Slide 42 text

“The absence of support for @media queries is in fact the ﬁrst @media query” @bryanrieger slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Slide 43

Slide 43 text

mobile ﬁrst @mq 1. Global 2. Screen 3. @media queries as needed 4. Hi-res/retina speciﬁc 5. Print (yes, print)

Slide 44

Slide 44 text

hiding content NOT a mobile strategy

Slide 45

Slide 45 text

hidden content still gets downloaded http://bradfrostweb.com/blog/mobile/bdconf-guy-podjarny-presents- performance-implication-of-mobile-design/ http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

Slide 46

Slide 46 text

RESS (responsive design + server-side components) lukew.com/ff/entry.asp?1392

Slide 47

Slide 47 text

http://www.ﬂickr.com/photos/dipster1/1403240351/ WURFL: wurﬂ.sourceforge.net (free for non-commercial) 51degrees.mobi: 51degrees.mobi (free “Lite” version) Device Atlas: deviceatlas.com (pay service) OpenDDR: openddr.org (free)

Slide 48

Slide 48 text

UA-Parser github.com/tobie/ua-parser

Slide 49

Slide 49 text

Long homepage is long

Slide 50

Slide 50 text

Long homepage is long

Slide 51

Slide 51 text

2.something iPhone screens tall and 12% the size

Slide 52

Slide 52 text

http://weedygarden.net/2012/05/a-case-for-ress/

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

context can dictate content

Slide 56

Slide 56 text

on-request loading

Slide 57

Slide 57 text

Six location features 1.5 MB Five News features 289 KB

Slide 58

Slide 58 text

V. Responsible Responsive

Slide 59

Slide 59 text

we have a problem

Slide 60

Slide 60 text

news.cnet.com/2100-1038_3-5172107.html nytimes.com/2005/06/21/technology/21iht-broad.html ﬂickr.com/photos/foolswisdom/108953458/lightbox/ Broadband began to overtake dial-up in 2004* * In major U.S. Cities

Slide 61

Slide 61 text

http://www.ﬂickr.com/photos/specialkrb/4045683750/ dial-up 56Kbps edge 384Kbps 3g 1.2Mbps

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Erik’s personal Bermuda Triangle of AT&T suckage

Slide 66

Slide 66 text

http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “The size of the average web page of the top 1000 websites has more than tripled since 2008. In the past ﬁve years from 2008 to late 2012 the average web page grew from 312K to 1114K, over 3.5 times larger” - websiteoptimization.com (Nov 11, 2012) In the past 18 months, the average web page has grown by 50% — from 702 KB in November 2010 to 1042 KB on May 1, 2012. At this rate, the average page will hit 2 MB by 2015. - webperformancetoday.com (May 24, 2012)

Slide 67

Slide 67 text

“Out of the 106 sites I reviewed, 64 of them had mobile sites that were less than ten percent smaller than the desktop version. Twenty-six of the sites had mobile web sites that were larger than the desktop equivalent.” @grigs http://www.uie.com/articles/mobile_ﬁrst_rwd/

Slide 68

Slide 68 text

http://bit.ly/highered-rwd

Slide 69

Slide 69 text

averages for #highered RWD sites 106 sites sampled at full size requests: 59 size: 1.6 MB Sites used to generate these stats: http://bit.ly/highered-rwd

Slide 70

Slide 70 text

averages for #highered RWD sites 106 sites sampled with iPhone UA and narrow screen (to simulate mobile) requests: 55 size: 1.48 MB Sites used to generate these stats: http://bit.ly/highered-rwd

Slide 71

Slide 71 text

averages for #highered RWD sites > 1 MB = 61 > 2 MB = 24 > 3 MB = 12 > 4 MB = 4 Sites used to generate these stats: http://bit.ly/highered-rwd

Slide 72

Slide 72 text

Dedicated Mobile vs. RWD 45 schools Dedicated mobile 184KB RWD 1.37 MB

Slide 73

Slide 73 text

averages for #highered RWD sites 106 sites sampled with iPhone UA and narrow screen (to simulate mobile) js: 12 files/216 KB css: 6 files/99 KB images: 30 files/1 MB (72% of page size) Sites used to generate these stats: http://bit.ly/highered-rwd

Slide 74

Slide 74 text

stand-outs * West Chester University wcupa.edu West Virginia University wvu.edu 21 requests | 340 KB 26 requests | 361 KB http://notredame.photoshelter.com/gallery-image/2012-Graduate-School-Ceremony/G0000QHnZV6vbKHg/I0000S5ossz793xo * Not including ND.edu in a veiled attempt at being humble

Slide 75

Slide 75 text

RWD is Not Mobile Friendly

Slide 76

Slide 76 text

Blame the implementation, not the technique - Tim Kadlec http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/

Slide 77

Slide 77 text

Same content(ish) Different experience http://weedygarden.net/2012/05/a-case-for-ress/

Slide 78

Slide 78 text

RWD is Not Mobile Friendly but the web is and RWD CAN be

Slide 79

Slide 79 text

http://www.alistapart.com/articles/dao/

Slide 80

Slide 80 text

http://www.alistapart.com/articles/dao/ “...make pages which are adaptable. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages.” John Allsopp @johnallsopp

Slide 81

Slide 81 text

http://www.alistapart.com/articles/dao/ “The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.” John Allsopp @johnallsopp

Slide 82

Slide 82 text

Summary RWD is simply Progressive Enhancement Building responsively requires planning We broke the web, and now we’re trying to “ﬁx” it But it’s not easy, and it’s going to take time to get it right