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/


http://www.flickr.com/photos/jacked01/4335464703/

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/


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$

4,600

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



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


http://www.palantir.net/

http://www.palantir.net/

Not a Silver Bullet


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


http://www.dvicci.com/author/David%20Veatch/

http://www.dvicci.com/author/David%20Veatch/

http://www.dvicci.com/blog

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


Ross


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

3

seconds or lesssource - 2009, Compuware commissioned Equation Research


74%users will leave if your page takes

5

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

<picture> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <img src="small-1.jpg"></picture>



Already started building new DU core site using responsive design



Thank you very much!

slideshare.net/skiboyjonbit.ly/redaptive#E12_SESS088

[email protected] @skiboyjon


mailto:[email protected]

mailto:[email protected]

Date post:	27-Jan-2015
Category:	Documents
Upload:	jon-liu
View:	106 times
Download:	3 times

Educause - Building a Responsive Website for the Presidential Debate

Documents