Embed Size (px)
DESCRIPTION
“Building a Responsive Website for the Presidential Debate” by Jon Liu at eduWeb Conference in Boston on July 31, 2012 Videos in presentation: Monkey Video - http://www.ted.com/talks/frans_de_waal_do_animals_have_morals.html Dollar Shave Club -
Citation preview
Building a Responsive Website for the Presidential DebateJON LIU & MATT ESCHENBAUM
Hello!
By Jacked01 - http://www.flickr.com/photos/jacked01/4335464703/
By Hilary Hughes - https://picasaweb.google.com/105795174137387926578/Denver#5556786742373643186
Tweet us!@skiboyjon
#denverdebate#eduweb12
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
Lesson Learned #1DO YOUR HOMEWORK
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
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
By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
iOS screens
By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
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/
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
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/
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
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
Create all new templates in OmniUpdate
Lesson Learned #6TEST, TEST, AND TEST SOME MORE
By ~db~ - http://www.flickr.com/photos/dopey/123646856/
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
What’s Next?The FUTURE
By :: Radar Communication :: - http://www.flickr.com/photos/markchapmanphoto/5139429152/
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
Oct 3, 2012University of Denver presents the Presidential Debate
