EduWeb - Building a Responsive Website for the Presidential Debate
-
Upload
jon-liu -
Category
Technology
-
view
9 -
download
5
description
Transcript of EduWeb - Building a Responsive Website for the Presidential Debate
![Page 1: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/1.jpg)
Building a Responsive Website for the Presidential DebateJON LIU & MATT ESCHENBAUM
![Page 2: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/2.jpg)
Hello!
![Page 3: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/3.jpg)
By Jacked01 - http://www.flickr.com/photos/jacked01/4335464703/
![Page 4: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/4.jpg)
By Hilary Hughes - https://picasaweb.google.com/105795174137387926578/Denver#5556786742373643186
![Page 5: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/5.jpg)
![Page 6: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/6.jpg)
![Page 7: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/7.jpg)
Tweet us!@skiboyjon
#denverdebate#eduweb12
![Page 8: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/8.jpg)
Responsive + Adaptive = ReDaptive?
![Page 9: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/9.jpg)
![Page 10: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/10.jpg)
How we screwed up
What we did well
Lessons learned
![Page 11: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/11.jpg)
How it began
By -eko- - http://www.flickr.com/photos/ekosystem/4334671818/
![Page 12: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/12.jpg)
Mar 31, 2011 University of Denver applied to host the debate
![Page 13: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/13.jpg)
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
![Page 14: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/14.jpg)
By Bourguiboeuf - http://www.flickr.com/photos/bourguiboeuf/6996015793/
![Page 15: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/15.jpg)
Can I get tickets?
![Page 16: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/16.jpg)
![Page 17: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/17.jpg)
By Austen Hufford - http://www.flickr.com/photos/austenhufford/6964717904/
![Page 18: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/18.jpg)
We need a debate website
![Page 19: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/19.jpg)
Lesson Learned #1DO YOUR HOMEWORK
![Page 20: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/20.jpg)
Aaron GustafsonADAPTIVE WEB DESIGN
Ethan MarcotteRESPONSIVE WEB DESIGN
![Page 21: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/21.jpg)
Something BIG is happening
![Page 22: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/22.jpg)
The next major step
![Page 23: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/23.jpg)
![Page 24: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/24.jpg)
![Page 25: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/25.jpg)
How we decided to go Responsive
USE DATA TO INFORM
![Page 26: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/26.jpg)
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
![Page 27: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/27.jpg)
By adactio - http://www.flickr.com/photos/adactio/6153481666/in/photostream/
![Page 28: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/28.jpg)
2009 - 27 screens
![Page 29: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/29.jpg)
2009 - 28 screens
2012 - 587 screens
![Page 30: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/30.jpg)
681,900 Total
3997 different android devices
By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
![Page 31: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/31.jpg)
Android Screens
By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
![Page 32: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/32.jpg)
iOS screens
By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
![Page 33: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/33.jpg)
Practical maintenance and updates
![Page 34: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/34.jpg)
Opportunity to start with a project site
![Page 35: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/35.jpg)
Plenty of problems too
![Page 36: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/36.jpg)
Not many other higher-ed schools using RWD, yet
![Page 37: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/37.jpg)
“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
![Page 38: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/38.jpg)
Not a Silver Bullet
![Page 39: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/39.jpg)
By David Veatch - http://www.dvicci.com/blog
![Page 40: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/40.jpg)
Lesson Learned #2GET BUY IN EARLY
By @MSG - http://www.flickr.com/photos/michaelsgalpert/2455566419/
![Page 41: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/41.jpg)
Share information with stakeholders through demos, explanation and training
![Page 42: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/42.jpg)
You are the cheerleader
![Page 43: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/43.jpg)
![Page 44: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/44.jpg)
![Page 45: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/45.jpg)
![Page 46: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/46.jpg)
![Page 47: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/47.jpg)
Lesson Learned #3
By Cameron Degelia - http://www.flickr.com/photos/degelia/6894587439/
PLAN, PLAN, PLAN
![Page 48: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/48.jpg)
Oct 31, 2011 Oct 3, 2012
Website LaunchFeb 20, 2012
Content + Design + Development
![Page 49: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/49.jpg)
The typical process
![Page 50: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/50.jpg)
Content DevelopmentDesign
![Page 51: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/51.jpg)
Content
Development
Design
![Page 52: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/52.jpg)
Mobile First
Luke Wroblewski@lukew
![Page 53: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/53.jpg)
By Brad Frost - http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 54: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/54.jpg)
Design / Development loop
![Page 55: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/55.jpg)
Ross
![Page 56: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/56.jpg)
More Work Up Front = Better User Experience
![Page 57: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/57.jpg)
Lesson Learned #4START BUILDING
By Armchair Builder - http://www.flickr.com/photos/armchairbuilder/7345497766/
![Page 58: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/58.jpg)
Test your responsive breakpoints in the browser as you build
![Page 59: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/59.jpg)
![Page 60: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/60.jpg)
Resizer
![Page 61: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/61.jpg)
Feedback from stakeholders at different stages of the process
![Page 62: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/62.jpg)
Developing in the browser reveals problems early
![Page 63: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/63.jpg)
Re-learn how to think in breakpoints
![Page 64: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/64.jpg)
Broken web fonts in the browser
![Page 65: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/65.jpg)
Work closely with sys admins to configure servers appropriately
![Page 66: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/66.jpg)
Be prepared to suck
![Page 67: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/67.jpg)
![Page 68: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/68.jpg)
Lesson Learned #5USE FRAMEWORKS AND PLUGINS, BUT WITH CAUTION
![Page 69: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/69.jpg)
60%mobile users expect site to load in
3
seconds or lesssource - 2009, Compuware commissioned Equation Research
![Page 70: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/70.jpg)
74%users will leave if your page takes
5
seconds or longer to load
source - 2009, Compuware commissioned Equation Research
![Page 71: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/71.jpg)
CMS IntegrationGET RWD TO WORK IN YOUR CMS
![Page 72: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/72.jpg)
Create all new templates in OmniUpdate
![Page 73: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/73.jpg)
![Page 74: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/74.jpg)
![Page 75: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/75.jpg)
![Page 76: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/76.jpg)
Lesson Learned #6TEST, TEST, AND TEST SOME MORE
By ~db~ - http://www.flickr.com/photos/dopey/123646856/
![Page 77: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/77.jpg)
Testing takes time
By Thomas Hawk - http://www.flickr.com/photos/thomashawk/4440874971/
![Page 78: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/78.jpg)
Test on real mobile devices
![Page 79: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/79.jpg)
MobitestMOBITEST.AKAMAI.COM
![Page 80: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/80.jpg)
![Page 81: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/81.jpg)
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
![Page 82: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/82.jpg)
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
![Page 83: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/83.jpg)
Feb 20, The LaunchTime to Party
![Page 84: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/84.jpg)
![Page 85: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/85.jpg)
What’s Next?The FUTURE
By :: Radar Communication :: - http://www.flickr.com/photos/markchapmanphoto/5139429152/
![Page 86: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/86.jpg)
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>
![Page 87: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/87.jpg)
![Page 88: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/88.jpg)
Already started building new DU core site using responsive design
![Page 89: EduWeb - Building a Responsive Website for the Presidential Debate](https://reader034.fdocuments.net/reader034/viewer/2022051513/5452fb53af7959bd2b8b49e2/html5/thumbnails/89.jpg)
Oct 3, 2012University of Denver presents the Presidential Debate