Educause - Building a Responsive Website for the Presidential Debate

Building a Responsive Website for the Presidential DebateJON LIU & MATT ESCHENBAUM

Thursday, November 8, 12

Hello!

By Jacked01 - http://www.flickr.com/photos/jacked01/4335464703/

By Hilary Hughes - https://picasaweb.google.com/105795174137387926578/Denver#5556786742373643186

Tweet us!@skiboyjon

#E12_SESS088#edu12

By Brad Frost - http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

By Viljami Salminen - http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php

Responsive + Adaptive = ReDaptive?

How we screwed up

What we did well

Lessons learned

How it began

By -eko- - http://www.flickr.com/photos/ekosystem/4334671818/

Mar 31, 2011 University of Denver applied to host the debate

By Laney Griner - http://knowyourmeme.com/memes/i-hate-sandcastles-success-kid

Oct 31, 2011DU was selected as a host site by the Commission on Public Debates

By Bourguiboeuf - http://www.flickr.com/photos/bourguiboeuf/6996015793/

Can I get tickets?

By Austen Hufford - http://www.flickr.com/photos/austenhufford/6964717904/

We need a debate website

#E12_SESS088

Lesson Learned #1DO YOUR HOMEWORK

#E12_SESS088

Aaron GustafsonADAPTIVE WEB DESIGN

Ethan MarcotteRESPONSIVE WEB DESIGN

Something BIG is happening

The next major step

How we decided to go Responsive

USE DATA TO INFORM

#E12_SESS088

DU.EDUMobile Growth2009 - 2012

MOBILE OVERALL

0.00%$

1.00%$

2.00%$

3.00%$

4.00%$

5.00%$

6.00%$

7.00%$

8.00%$

Nov$2009$

Dec$2009$

Jan$2010$

Feb$2010$

Mar$2010$

Apr$2010$

May$2010$

Jun$2010$

Jul$2010$

Aug$2010$

Sep$2010$

Oct$2010$

Nov$2010$

Dec$2010$

Jan$2011$

Feb$2011$

Mar$2011$

Apr$2011$

May$2011$

Jun$2011$

Jul$2011$

Aug$2011$

Sep$2011$

Oct$2011$

Nov$2011$

Dec$2011$

Jan$2012$

Feb$2012$

Mar$2012$

Apr$2012$

May$2012$

Jun$2012$

Jul$2012$

Aug$2012$

Sep$2012$

Oct$2012$

56,800

By adactio - http://www.flickr.com/photos/adactio/6153481666/in/photostream/

2009 - 27 screens

2009 - 28 screens

2012 - 587 screens

681,900 Total

3997 different android devices

By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php

Android Screens

iOS screens

Practical maintenance and updates

Opportunity to start with a project site

Plenty of problems too

Not many other higher-ed schools using RWD, yet

“Best practices are emerging for smaller, boutique-style sites, but for sites with larger anatomies, it’s still the Wild West”

Michael Mesker http://www.palantir.net

Not a Silver Bullet

By David Veatch - http://www.dvicci.com/blog

Lesson Learned #2GET BUY IN EARLY

By @MSG - http://www.flickr.com/photos/michaelsgalpert/2455566419/

#E12_SESS088

Share information with stakeholders through demos, explanation and training

You are the cheerleader

Lesson Learned #3

By Cameron Degelia - http://www.flickr.com/photos/degelia/6894587439/

PLAN, PLAN, PLAN

#E12_SESS088

Oct 31, 2011 Oct 3, 2012

Website LaunchFeb 20, 2012

Content + Design + Development

The typical process

Content DevelopmentDesign

Content

Development

Design

Mobile First

Luke Wroblewski@lukew

By Brad Frost - http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

Design / Development loop

More Work Up Front = Better User Experience

Lesson Learned #4START BUILDING

By Armchair Builder - http://www.flickr.com/photos/armchairbuilder/7345497766/

#E12_SESS088

Test your responsive breakpoints in the browser as you build

Resizer

Feedback from stakeholders at different stages of the process

Developing in the browser reveals problems early

Re-learn how to think in breakpoints

Broken web fonts in the browser

Work closely with sys admins to configure servers appropriately

Be prepared to suck

Lesson Learned #5USE FRAMEWORKS AND PLUGINS, BUT WITH CAUTION

#E12_SESS088

60%mobile users expect site to load in

seconds or lesssource - 2009, Compuware commissioned Equation Research

74%users will leave if your page takes

seconds or longer to load

source - 2009, Compuware commissioned Equation Research

CMS IntegrationGET RWD TO WORK IN YOUR CMS

#E12_SESS088

Create all new templates in OmniUpdate

Lesson Learned #6TEST, TEST, AND TEST SOME MORE

By ~db~ - http://www.flickr.com/photos/dopey/123646856/

#E12_SESS088

Testing takes time

By Thomas Hawk - http://www.flickr.com/photos/thomashawk/4440874971/

Test on real mobile devices

MobitestMOBITEST.AKAMAI.COM

Debate 2012 Home Page- 252.6kbDEBATE2012.DU.EDU

Mobitest iPhone 4

Mobitest Galaxy S

Desktop Wifi

iPhone 4 WiFi

iPhone 4 3G 8.60 sec

4.51 sec

3.51 sec

2.55 sec

2.14 sec

Debate 2012 Events Page - 673.5kbDEBATE2012.DU.EDU/NEWS

Desktop Wifi

Mobitest Galaxy S

iPhone 4 WiFi

Mobitest iPhone 4

iPhone 4 3G 9.00 sec

3.78 sec

3.51 sec

3.49 sec

2.80 sec

Feb 20, The LaunchTime to Party

#E12_SESS088

Oct 3, 2012University of Denver presents the Presidential Debate

What’s Next?The FUTURE

By :: Radar Communication :: - http://www.flickr.com/photos/markchapmanphoto/5139429152/

#E12_SESS088

Proposed adaptive image element

Already started building new DU core site using responsive design

Thank you very much!

slideshare.net/skiboyjonbit.ly/redaptive#E12_SESS088

jon.liu@du.edu @skiboyjon

Educause - Building a Responsive Website for the Presidential Debate

Documents

Diyu educause

Student Study, 2017 - EDUCAUSE

Educause nov2012 master

EDUCAUSE 07

Academic Analytics - Educause

Space as a Change Agent - EDUCAUSE Review | EDUCAUSE

Echo Educause

EDUCAUSE Data, Research & Analytics Leah Lang, EDUCAUSE CSG January 2012 ©2012 EDUCAUSE 1

EDUCAUSE Social Media Workshop

EDUCAUSE Center

Analytics: EDUCAUSE

EDUCAUSE Learning Initiative

guide - EDUCAUSE

EDUCAUSE Research in E-Learning July 31, 2013 Susan Grajek, EDUCAUSE Vice President

Educause 2014

2020 EDUCAUSE Horizon Report

Bro Introduction Educause SPC - old.zeek.org · Bro Introduction Educause SPC Seth Hall International Computer Science Institute Justin Azoff NCSA. Agenda ... Bro Presentation @ Educause

EDUCAUSE Center for Applied Research An Update. New EDUCAUSE Initiatives for 2002 EDUCAUSE Core Data Survey Virtual Communities Initiative Institute for

An Introduction to EDUCAUSE and the EDUCAUSE/Internet2 Security Task Force

Online Communities Educause