Educause - Building a Responsive Website for the Presidential Debate

875 views

Published on

“Building a Responsive Website for the Presidential Debate” by Jon Liu at Educause Conference in Denver on Nov 8, 2012.

More resources at bit.ly/redaptive

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
875
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Educause - Building a Responsive Website for the Presidential Debate

  1. 1. Building a Responsive Website for the Presidential Debate JON LIU & MATT ESCHENBAUMThursday, November 8, 12
  2. 2. Hello!Thursday, November 8, 12
  3. 3. By Jacked01 - http://www.flickr.com/photos/jacked01/4335464703/Thursday, November 8, 12
  4. 4. By Hilary Hughes - https://picasaweb.google.com/105795174137387926578/Denver#5556786742373643186Thursday, November 8, 12
  5. 5. Thursday, November 8, 12
  6. 6. Thursday, November 8, 12
  7. 7. Tweet us! @skiboyjon #E12_SESS088 #edu12Thursday, November 8, 12
  8. 8. By Brad Frost - http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/Thursday, November 8, 12
  9. 9. By Viljami Salminen - http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.phpThursday, November 8, 12
  10. 10. Responsive + Adaptive = ReDaptive?Thursday, November 8, 12
  11. 11. Thursday, November 8, 12
  12. 12. What we did well How we screwed up Lessons learnedThursday, November 8, 12
  13. 13. How it began By -eko- - http://www.flickr.com/photos/ekosystem/4334671818/Thursday, November 8, 12
  14. 14. Mar 31, 2011 University of Denver applied to host the debateThursday, November 8, 12
  15. 15. 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-kidThursday, November 8, 12
  16. 16. By Bourguiboeuf - http://www.flickr.com/photos/bourguiboeuf/6996015793/Thursday, November 8, 12
  17. 17. Can I get tickets?Thursday, November 8, 12
  18. 18. Thursday, November 8, 12
  19. 19. By Austen Hufford - http://www.flickr.com/photos/austenhufford/6964717904/Thursday, November 8, 12
  20. 20. #E12_SESS088 We need a debate websiteThursday, November 8, 12
  21. 21. Lesson Learned #1 DO YOUR HOMEWORK #E12_SESS088Thursday, November 8, 12
  22. 22. Aaron Gustafson ADAPTIVE WEB DESIGN Ethan Marcotte RESPONSIVE WEB DESIGNThursday, November 8, 12
  23. 23. Something BIG is happeningThursday, November 8, 12
  24. 24. The next major stepThursday, November 8, 12
  25. 25. Thursday, November 8, 12
  26. 26. Thursday, November 8, 12
  27. 27. How we decided to go Responsive USE DATA TO INFORM #E12_SESS088Thursday, November 8, 12
  28. 28. 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$Thursday, November 8, 12
  29. 29. By adactio - http://www.flickr.com/photos/adactio/6153481666/in/photostream/Thursday, November 8, 12
  30. 30. 2009 - 27 screensThursday, November 8, 12
  31. 31. 2009 - 28 screens 2012 - 587 screensThursday, November 8, 12
  32. 32. 681,900 Total 3997 different android devices By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.phpThursday, November 8, 12
  33. 33. Android Screens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.phpThursday, November 8, 12
  34. 34. iOS screens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.phpThursday, November 8, 12
  35. 35. iOS screens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.phpThursday, November 8, 12
  36. 36. Practical maintenance and updatesThursday, November 8, 12
  37. 37. Opportunity to start with a project siteThursday, November 8, 12
  38. 38. Plenty of problems tooThursday, November 8, 12
  39. 39. Not many other higher-ed schools using RWD, yetThursday, November 8, 12
  40. 40. “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.netThursday, November 8, 12
  41. 41. Not a Silver BulletThursday, November 8, 12
  42. 42. By David Veatch - http://www.dvicci.com/blogThursday, November 8, 12
  43. 43. Lesson Learned #2 GET BUY IN EARLY #E12_SESS088 By @MSG - http://www.flickr.com/photos/michaelsgalpert/2455566419/Thursday, November 8, 12
  44. 44. Share information with stakeholders through demos, explanation and trainingThursday, November 8, 12
  45. 45. You are the cheerleaderThursday, November 8, 12
  46. 46. Thursday, November 8, 12
  47. 47. Thursday, November 8, 12
  48. 48. Thursday, November 8, 12
  49. 49. Thursday, November 8, 12
  50. 50. Lesson Learned #3 PLAN, PLAN, PLAN #E12_SESS088 By Cameron Degelia - http://www.flickr.com/photos/degelia/6894587439/Thursday, November 8, 12
  51. 51. Website Launch Feb 20, 2012 Content + Design + Development Oct 31, 2011 Oct 3, 2012Thursday, November 8, 12
  52. 52. The typical processThursday, November 8, 12
  53. 53. Content Design DevelopmentThursday, November 8, 12
  54. 54. Development Design ContentThursday, November 8, 12
  55. 55. Mobile First Luke Wroblewski @lukewThursday, November 8, 12
  56. 56. By Brad Frost - http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/Thursday, November 8, 12
  57. 57. Design / Development loopThursday, November 8, 12
  58. 58. RossThursday, November 8, 12
  59. 59. More Work Up Front = Better User ExperienceThursday, November 8, 12
  60. 60. Lesson Learned #4 START BUILDING #E12_SESS088 By Armchair Builder - http://www.flickr.com/photos/armchairbuilder/7345497766/Thursday, November 8, 12
  61. 61. Test your responsive breakpoints in the browser as you buildThursday, November 8, 12
  62. 62. Thursday, November 8, 12
  63. 63. ResizerThursday, November 8, 12
  64. 64. Feedback from stakeholders at different stages of the processThursday, November 8, 12
  65. 65. Developing in the browser reveals problems earlyThursday, November 8, 12
  66. 66. Re-learn how to think in breakpointsThursday, November 8, 12
  67. 67. Broken web fonts in the browserThursday, November 8, 12
  68. 68. Work closely with sys admins to configure servers appropriatelyThursday, November 8, 12
  69. 69. Be prepared to suckThursday, November 8, 12
  70. 70. Thursday, November 8, 12
  71. 71. Lesson Learned #5 USE FRAMEWORKS AND PLUGINS, BUT WITH CAUTION #E12_SESS088Thursday, November 8, 12
  72. 72. 60% mobile users expect site to load in 3 seconds or less source - 2009, Compuware commissioned Equation ResearchThursday, November 8, 12
  73. 73. 74% users will leave if your page takes 5 seconds or longer to load source - 2009, Compuware commissioned Equation ResearchThursday, November 8, 12
  74. 74. CMS Integration GET RWD TO WORK IN YOUR CMS #E12_SESS088Thursday, November 8, 12
  75. 75. Create all new templates in OmniUpdateThursday, November 8, 12
  76. 76. Thursday, November 8, 12
  77. 77. Thursday, November 8, 12
  78. 78. Thursday, November 8, 12
  79. 79. Lesson Learned #6 TEST, TEST, AND TEST SOME MORE #E12_SESS088 By ~db~ - http://www.flickr.com/photos/dopey/123646856/Thursday, November 8, 12
  80. 80. Testing takes time By Thomas Hawk - http://www.flickr.com/photos/thomashawk/4440874971/Thursday, November 8, 12
  81. 81. Test on real mobile devicesThursday, November 8, 12
  82. 82. Mobitest MOBITEST.AKAMAI.COMThursday, November 8, 12
  83. 83. Thursday, November 8, 12
  84. 84. 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 secThursday, November 8, 12
  85. 85. 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 secThursday, November 8, 12
  86. 86. Feb 20, The Launch Time to Party #E12_SESS088Thursday, November 8, 12
  87. 87. Thursday, November 8, 12
  88. 88. Oct 3, 2012 University of Denver presents the Presidential DebateThursday, November 8, 12
  89. 89. Thursday, November 8, 12
  90. 90. Thursday, November 8, 12
  91. 91. Thursday, November 8, 12
  92. 92. Thursday, November 8, 12
  93. 93. Thursday, November 8, 12
  94. 94. What’s Next? The FUTURE #E12_SESS088 By :: Radar Communication :: - http://www.flickr.com/photos/markchapmanphoto/5139429152/Thursday, November 8, 12
  95. 95. 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>Thursday, November 8, 12
  96. 96. Thursday, November 8, 12
  97. 97. Already started building new DU core site using responsive designThursday, November 8, 12
  98. 98. Thursday, November 8, 12
  99. 99. Thank you very much! slideshare.net/skiboyjon bit.ly/redaptive #E12_SESS088 jon.liu@du.edu @skiboyjonThursday, November 8, 12

×