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 | #heweb12 | #UAD11

Slide 2

Slide 2 text

who am i? Erik Runyon Manager of Interactive Development University Communications: Web 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. Quick Overview of RWD II. Our Responsive Path III. 2011 Redesign IV. 2012 Redesign V. Responsible Responsive

Slide 7

Slide 7 text

I. Quick Overview of RWD

Slide 8

Slide 8 text

Responsive Web Design http://www.alistapart.com/articles/responsive-web-design/

Slide 9

Slide 9 text

http://www.abookapart.com/products/responsive-web-design

Slide 10

Slide 10 text

What is RWD? Fluid Grids Flexible Images (media) Media Queries

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Why RWD (and mobile) Matter

Slide 13

Slide 13 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 41.88%

Slide 14

Slide 14 text

Talks at #heweb12 that mention RWD in the description 10

Slide 15

Slide 15 text

II. Our Responsive Path

Slide 16

Slide 16 text

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

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

Winter 2009 m.nd.edu released

Slide 19

Slide 19 text

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

Slide 20

Slide 20 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 21

Slide 21 text

III. 2011 Redesign

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

June 2011 Redesign Goals •Unify the interface •Replace Flash carousel with feature story image •Mobile friendly (Adaptive design)

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 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 26

Slide 26 text

Summer 2011 Adaptive, NO WAIT... RESPONSIVE!!!

Slide 27

Slide 27 text

wait what?

Slide 28

Slide 28 text

Winter 2011 New department

Slide 29

Slide 29 text

New Boss New Website

Slide 30

Slide 30 text

IV. 2012 Redesign

Slide 31

Slide 31 text

“It’s not Notre Dame enough”

Slide 32

Slide 32 text

“It’s not Notre Dame enough” Make Lou cry

Slide 33

Slide 33 text

Design • How will elements be presented on small screens? • How will elements be presented on giant screens? • How will design decisions impact performance? Development • Build mobile first • Keep mobile experience fast • Maintain content parity

Slide 34

Slide 34 text

Mobile First What does that even mean?

Slide 35

Slide 35 text

Mobile first is NOT hiding content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

progressive/on-request loading

Slide 39

Slide 39 text

One during load, one after everything else is done downloading

Slide 40

Slide 40 text

Long homepage is long

Slide 41

Slide 41 text

3 iPhone screens tall and 12% the size

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

April 2012 Mobile first redesign http://weedygarden.net/2012/05/a-case-for-ress/

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

context can dictate content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

RESS Tools http://www.ﬂickr.com/photos/dipster1/1403240351/

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

isMobile; // return true if the browser met criteria of a mobile browser based on the user agent information print $result->isMobileDevice; // return true if the device met criteria of a mobile device based on the user agent information print $result->isTablet; // return true if the device was a tablet according to the user agent information print $result->isSpider; // return true if the device was a spider according to the user agent information print $result->isComputer; // return true if the device was a computer according to the user agent information print $result->isUIWebview; // return true if the user agent was from a uiwebview in iOS ?> UA-Parser

Slide 52

Slide 52 text

V. Responsible Responsive

Slide 53

Slide 53 text

we have a problem

Slide 54

Slide 54 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 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Erik’s personal Bermuda Triangle of AT&T suckage

Slide 60

Slide 60 text

http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “Within the last eight years, the size of the average web page has more than septupled, and the number of external objects has more than tripled. While broadband users have experienced somewhat faster response times, dial-up users have been left behind.” - websiteoptimization.com (May 31, 2011) 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 61

Slide 61 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_first_rwd/

Slide 62

Slide 62 text

http://bit.ly/highered-rwd

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

#headdesk

Slide 65

Slide 65 text

averages for #highered RWD sites 34 sites sampled with iPhone UA and narrow screen (to simulate mobile) > 1MB = 15 > 2MB = 4 Sites used to generate these stats: http://bit.ly/highered-rwd

Slide 66

Slide 66 text

stand-outs * University of California, San Diego ucsd.edu West Virginia University wvu.edu 31 requests | 439kb 26 requests | 361kb http://notredame.photoshelter.com/gallery-image/2012-Graduate-School-Ceremony/G0000QHnZV6vbKHg/I0000S5ossz793xo * Not including ND.edu in a veiled attempt at being humble

Slide 67

Slide 67 text

RWD is Not Mobile Friendly

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

What We’re Doing Wrong

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

Images larger than they should be

Slide 73

Slide 73 text

Bloated Carousel Plugin

Slide 74

Slide 74 text

RWD is Not Mobile Friendly

Slide 75

Slide 75 text

RWD is Not Mobile Friendly but the web is

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Slide 78

Slide 78 text

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

Slide 79

Slide 79 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 80

Slide 80 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 81

Slide 81 text

Summary There’s no single right way to do RWD RWD is simply Progressive Enhancement We broke the web, and now we’re trying to “fix” it But it’s not easy, and it’s going to take time to get it right