EduWeb - Building a Responsive Website for the Presidential Debate
2 likes438 views
The document details the process of building a responsive website for the presidential debate hosted by the University of Denver. Key lessons include the importance of early planning, stakeholder engagement, and thorough testing to enhance user experience on various devices. The project ultimately led to the launch of a mobile-optimized site that addressed contemporary needs in web design.
EduWeb - Building a Responsive Website for the Presidential Debate
- 1. Building a Responsive Website for the Presidential Debate JON LIU & MATT ESCHENBAUM
- 2. Hello!
- 3. By Jacked01 - http://www.flickr.com/photos/jacked01/4335464703/
- 4. By Hilary Hughes - https://picasaweb.google.com/105795174137387926578/Denver#5556786742373643186
- 8. Responsive + Adaptive = ReDaptive?
- 10. What we did well How we screwed up Lessons learned
- 11. How it began By -eko- - http://www.flickr.com/photos/ekosystem/4334671818/
- 12. Mar 31, 2011 University of Denver applied to host the debate
- 13. Oct 31, 2011 DU was selected as a host site by the Commission on Public Debates By Laney Griner - http://knowyourmeme.com/memes/i-hate-sandcastles-success-kid
- 14. By Bourguiboeuf - http://www.flickr.com/photos/bourguiboeuf/6996015793/
- 15. Can I get tickets?
- 17. By Austen Hufford - http://www.flickr.com/photos/austenhufford/6964717904/
- 18. We need a debate website
- 20. Aaron Gustafson ADAPTIVE WEB DESIGN Ethan Marcotte RESPONSIVE WEB DESIGN
- 21. Something BIG is happening
- 22. The next major step
- 25. How we decided to go Responsive USE DATA TO INFORM
- 26. 8.00%$ 56,800 7.00%$ DU.EDU 6.00%$ Mobile Growth 5.00%$ 2009 - 2012 4.00%$ 3.00%$ MOBILE 4,600 OVERALL 2.00%$ 1.00%$ 0.00%$ Nov$ Dec$ Jan$ Feb$ Mar$ Apr$ May$ Jun$ Jul$ Aug$ Sep$ Oct$ Nov$ Dec$ Jan$ Feb$ Mar$ Apr$ May$ Jun$ Jul$ Aug$ Sep$ Oct$ Nov$ Dec$ Jan$ Feb$ Mar$ Apr$ May$ Jun$ Jul$ Aug$ Sep$ Oct$ 2009$ 2009$ 2010$ 2010$ 2010$ 2010$ 2010$ 2010$ 2010$ 2010$ 2010$ 2010$ 2010$ 2010$ 2011$ 2011$ 2011$ 2011$ 2011$ 2011$ 2011$ 2011$ 2011$ 2011$ 2011$ 2011$ 2012$ 2012$ 2012$ 2012$ 2012$ 2012$ 2012$ 2012$ 2012$ 2012$
- 27. By adactio - http://www.flickr.com/photos/adactio/6153481666/in/photostream/
- 28. 2009 - 27 screens
- 29. 2009 - 28 screens 2012 - 587 screens
- 30. 681,900 Total 3997 different android devices By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
- 31. Android Screens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
- 32. iOS screens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
- 33. Practical maintenance and updates
- 34. Opportunity to start with a project site
- 35. Plenty of problems too
- 36. Not many other higher-ed schools using RWD, yet
- 37. “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
- 38. Not a Silver Bullet
- 39. By David Veatch - http://www.dvicci.com/blog
- 40. Lesson Learned #2 GET BUY IN EARLY By @MSG - http://www.flickr.com/photos/michaelsgalpert/2455566419/
- 41. Share information with stakeholders through demos, explanation and training
- 42. You are the cheerleader
- 47. Lesson Learned #3 PLAN, PLAN, PLAN By Cameron Degelia - http://www.flickr.com/photos/degelia/6894587439/
- 48. Website Launch Feb 20, 2012 Content + Design + Development Oct 31, 2011 Oct 3, 2012
- 50. Content Design Development
- 51. Development Design Content
- 53. By Brad Frost - http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
- 54. Design / Development loop
- 55. Ross
- 56. More Work Up Front = Better User Experience
- 57. Lesson Learned #4 START BUILDING By Armchair Builder - http://www.flickr.com/photos/armchairbuilder/7345497766/
- 58. Test your responsive breakpoints in the browser as you build
- 60. Resizer
- 61. Feedback from stakeholders at different stages of the process
- 62. Developing in the browser reveals problems early
- 63. Re-learn how to think in breakpoints
- 64. Broken web fonts in the browser
- 65. Work closely with sys admins to configure servers appropriately
- 66. Be prepared to suck
- 68. Lesson Learned #5 USE FRAMEWORKS AND PLUGINS, BUT WITH CAUTION
- 69. 60% mobile users expect site to load in 3 seconds or less source - 2009, Compuware commissioned Equation Research
- 70. 74% users will leave if your page takes 5 seconds or longer to load source - 2009, Compuware commissioned Equation Research
- 71. CMS Integration GET RWD TO WORK IN YOUR CMS
- 72. Create all new templates in OmniUpdate
- 76. Lesson Learned #6 TEST, TEST, AND TEST SOME MORE By ~db~ - http://www.flickr.com/photos/dopey/123646856/
- 77. Testing takes time By Thomas Hawk - http://www.flickr.com/photos/thomashawk/4440874971/
- 78. Test on real mobile devices
- 81. Debate 2012 Home Page- 252.6kb DEBATE2012.DU.EDU Mobitest iPhone 4 2.14 sec Mobitest Galaxy S 2.55 sec Desktop Wifi 3.51 sec iPhone 4 WiFi 4.51 sec iPhone 4 3G 8.60 sec
- 82. Debate 2012 Events Page - 673.5kb DEBATE2012.DU.EDU/NEWS Desktop Wifi 2.80 sec Mobitest Galaxy S 3.49 sec iPhone 4 WiFi 3.51 sec Mobitest iPhone 4 3.78 sec iPhone 4 3G 9.00 sec
- 83. Feb 20, The Launch Time to Party
- 85. What’s Next? The FUTURE By :: Radar Communication :: - http://www.flickr.com/photos/markchapmanphoto/5139429152/
- 86. 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>
- 88. Already started building new DU core site using responsive design
- 89. Oct 3, 2012 University of Denver presents the Presidential Debate
- 90. Thank you very much! slideshare.net/skiboyjon bit.ly/redaptive jon.liu@du.edu @skiboyjon