Building a Responsive Website for the Presidential Debate                           JON LIU & MATT ESCHENBAUMThursday, Nov...
Hello!Thursday, November 8, 12
By Jacked01 - http://www.flickr.com/photos/jacked01/4335464703/Thursday, November 8, 12
By Hilary Hughes - https://picasaweb.google.com/105795174137387926578/Denver#5556786742373643186Thursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Tweet us!            @skiboyjon            #E12_SESS088            #edu12Thursday, November 8, 12
By Brad Frost - http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/Thursday, Novem...
By Viljami Salminen - http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.phpThursday, November 8, 12
Responsive + Adaptive = ReDaptive?Thursday, November 8, 12
Thursday, November 8, 12
What we did well                               How we screwed up                               Lessons learnedThursday, No...
How it began                           By -eko- - http://www.flickr.com/photos/ekosystem/4334671818/Thursday, November 8, 12
Mar 31, 2011         University of         Denver applied to         host the debateThursday, November 8, 12
Oct 31, 2011        DU was selected as        a host site by the        Commission on        Public Debates               ...
By Bourguiboeuf - http://www.flickr.com/photos/bourguiboeuf/6996015793/Thursday, November 8, 12
Can I get tickets?Thursday, November 8, 12
Thursday, November 8, 12
By Austen Hufford - http://www.flickr.com/photos/austenhufford/6964717904/Thursday, November 8, 12
#E12_SESS088            We need a debate websiteThursday, November 8, 12
Lesson            Learned #1            DO YOUR            HOMEWORK            #E12_SESS088Thursday, November 8, 12
Aaron Gustafson                                       ADAPTIVE WEB DESIGN                           Ethan Marcotte        ...
Something BIG is happeningThursday, November 8, 12
The next major stepThursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
How we            decided to go            Responsive            USE DATA TO            INFORM            #E12_SESS088Thur...
8.00%$                                                                                                                    ...
By adactio - http://www.flickr.com/photos/adactio/6153481666/in/photostream/Thursday, November 8, 12
2009 - 27 screensThursday, November 8, 12
2009 - 28 screens        2012 - 587 screensThursday, November 8, 12
681,900 Total    3997 different    android devices                           By OpenSignalMaps - http://opensignalmaps.com...
Android            Screens                           By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.p...
iOS screens                           By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.phpThursday, Nov...
iOS screens                           By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.phpThursday, Nov...
Practical maintenance and updatesThursday, November 8, 12
Opportunity to start with a            project siteThursday, November 8, 12
Plenty of problems tooThursday, November 8, 12
Not many other higher-ed schools            using RWD, yetThursday, November 8, 12
“Best practices are emerging for           smaller, boutique-style sites, but for           sites with larger anatomies, i...
Not a Silver BulletThursday, November 8, 12
By David Veatch - http://www.dvicci.com/blogThursday, November 8, 12
Lesson            Learned #2            GET BUY IN EARLY            #E12_SESS088                           By @MSG - http:...
Share information with            stakeholders through demos,            explanation and trainingThursday, November 8, 12
You are the cheerleaderThursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Lesson            Learned #3            PLAN, PLAN, PLAN            #E12_SESS088                           By Cameron Dege...
Website Launch                Feb 20, 2012                           Content + Design + Development           Oct 31, 2011...
The typical processThursday, November 8, 12
Content   Design   DevelopmentThursday, November 8, 12
Development                                Design                               ContentThursday, November 8, 12
Mobile First                           Luke Wroblewski                           @lukewThursday, November 8, 12
By Brad Frost - http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/Thursday, November 8, 12
Design / Development loopThursday, November 8, 12
RossThursday, November 8, 12
More Work Up Front = Better User ExperienceThursday, November 8, 12
Lesson            Learned #4            START BUILDING            #E12_SESS088                           By Armchair Build...
Test your responsive breakpoints            in the browser as you buildThursday, November 8, 12
Thursday, November 8, 12
ResizerThursday, November 8, 12
Feedback from stakeholders at            different stages of the processThursday, November 8, 12
Developing in the browser            reveals problems earlyThursday, November 8, 12
Re-learn how to think in            breakpointsThursday, November 8, 12
Broken web fonts in the browserThursday, November 8, 12
Work closely with sys admins to            configure servers appropriatelyThursday, November 8, 12
Be prepared to suckThursday, November 8, 12
Thursday, November 8, 12
Lesson            Learned #5            USE FRAMEWORKS            AND PLUGINS, BUT            WITH CAUTION            #E12...
60%                 mobile users expect site to load in                                 3                           second...
74%                users will leave if your page takes                                      5                           se...
CMS            Integration            GET RWD TO WORK            IN YOUR CMS            #E12_SESS088Thursday, November 8, 12
Create all new templates in            OmniUpdateThursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Lesson            Learned #6            TEST, TEST, AND            TEST SOME MORE            #E12_SESS088                 ...
Testing takes time                           By Thomas Hawk - http://www.flickr.com/photos/thomashawk/4440874971/Thursday,...
Test on real            mobile devicesThursday, November 8, 12
Mobitest            MOBITEST.AKAMAI.COMThursday, November 8, 12
Thursday, November 8, 12
Debate 2012 Home Page- 252.6kb            DEBATE2012.DU.EDU          Mobitest iPhone 4       2.14 sec          Mobitest Ga...
Debate 2012 Events Page - 673.5kb            DEBATE2012.DU.EDU/NEWS                  Desktop Wifi       2.80 sec          ...
Feb 20,             The Launch            Time to Party            #E12_SESS088Thursday, November 8, 12
Thursday, November 8, 12
Oct 3, 2012            University of Denver presents            the Presidential DebateThursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
Thursday, November 8, 12
What’s            Next?            The FUTURE            #E12_SESS088                           By :: Radar Communication ...
Proposed adaptive image element           <picture>               <source srcset="small-1.jpg 1x, small-2.jpg 2x">        ...
Thursday, November 8, 12
Already started building new DU            core site using responsive designThursday, November 8, 12
Thursday, November 8, 12
Thank you very much!                           slideshare.net/skiboyjon                           bit.ly/redaptive        ...
Upcoming SlideShare
Loading in...5
×

Educause - Building a Responsive Website for the Presidential Debate

717

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
717
On Slideshare
0
From Embeds
0
Number of Embeds
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×