​Rebuilding a University Homepage to be “Responsive.” Twice. In Less than a Year.

Rebuilding a University Homepage to be “Responsive.” Twice. In Less than a Year.
Erik Runyon, Manager of Interactive Development, University of Notre Dame

Eric Runyon @erunyon from Notre Dame will be “covering responsiveness because it hasn’t been done this year.” He asked “…anybody remember how many responsive sessions last year? Zero.” (10 this year)

Why does RWD matter?

For them, huge increase in mobile traffic for Game Day.

2011 design (2007 had huge flash carousel.)

Plan was for adaptive design and integrated look across internal properties and utilized a number of overrides.

Responsive book comes out a week before launch. Time out. Responsive was the way to go.

Then their internal structure changed and there was now a “need” to do yet another redesign.

“It’s not Notre Dame enough” the new boss said.

Requirements?

Design: big screens, small screens, performance? All must be good.

Dev: they wanted to build mobile FiRST, fast, easy to find content.

Beta.nd.edu anybody could see.

Media Query – Mobile First @MQ

Ratio 1.5 includes a few more instead of 2.0…

Also print view…yes, print view.

Anything that you can lazy load that doesn’t need to be there initially, get rid of it.

They used analytics to show that 10x more people clicked certain image that loaded first anyway so nixed second load image.

Context can dictate content.

If they see you are on campus and mobile, they’ll give you geo specific content RE tours.

They are using UA-parser to determine mobile but not tablet (they treat tablet similar to desktop.)

We are sending more

Http://Bit.ly/highered-RWD

Http://Weedygarden.net

26 requests 361 kb – wvu.edu (of sites that are responsive.)

Tim kadlec (breaking Dev conf) says blame the implementation (if responsive doesn’t work)

The web has been essentially responsive from the beginning but the things we keep throwing into it are breaking that. Now we are just fixing it.

Android is working on bandwidth detection API (instead of just browser detection.)

Resources:

Speakers | Breaking Development :focus on responsive: Web design and development for beyond the desktop

A List Apart: Articles: A Dao of Web Design

Http://Speakerdeck.com/u/erunyon