Building a Responsive Website for the Presidential Debate                        JON 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?
What we did well    How we screwed up    Lessons learned
How it began      By -eko- - http://www.flickr.com/photos/ekosystem/4334671818/
Mar 31, 2011University ofDenver applied tohost the debate
Oct 31, 2011DU was selected asa host site by theCommission onPublic Debates                     By Laney Griner - http://k...
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
LessonLearned #1DO YOURHOMEWORK
Aaron Gustafson                  ADAPTIVE WEB DESIGN   Ethan MarcotteRESPONSIVE WEB DESIGN
Something BIG is happening
The next major step
How wedecided to goResponsiveUSE DATA TOINFORM
8.00%$                                                                                                                    ...
By adactio - http://www.flickr.com/photos/adactio/6153481666/in/photostream/
2009 - 27 screens
2009 - 28 screens2012 - 587 screens
681,900 Total3997 differentandroid devices                  By OpenSignalMaps - http://opensignalmaps.com/reports/fragment...
AndroidScreens          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 aproject site
Plenty of problems too
Not many other higher-ed schoolsusing RWD, yet
“Best practices are emerging forsmaller, boutique-style sites, but forsites with larger anatomies, it’s stillthe Wild West...
Not a Silver Bullet
By David Veatch - http://www.dvicci.com/blog
LessonLearned #2GET BUY IN EARLY       By @MSG - http://www.flickr.com/photos/michaelsgalpert/2455566419/
Share information withstakeholders through demos,explanation and training
You are the cheerleader
LessonLearned #3PLAN, PLAN, PLAN       By Cameron Degelia - http://www.flickr.com/photos/degelia/6894587439/
Website Launch  Feb 20, 2012       Content + Design + DevelopmentOct 31, 2011                       Oct 3, 2012
The typical process
Content   Design   Development
Development     Design    Content
Mobile FirstLuke 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
LessonLearned #4START BUILDING     By Armchair Builder - http://www.flickr.com/photos/armchairbuilder/7345497766/
Test your responsive breakpointsin the browser as you build
Resizer
Feedback from stakeholders atdifferent stages of the process
Developing in the browserreveals problems early
Re-learn how to think inbreakpoints
Broken web fonts in the browser
Work closely with sys admins toconfigure servers appropriately
Be prepared to suck
LessonLearned #5USE FRAMEWORKSAND PLUGINS, BUTWITH CAUTION
60%mobile users expect site to load in                3        seconds or less                            source - 2009, C...
74%users will leave if your page takes                5    seconds or longer to load                            source - 2...
CMSIntegrationGET RWD TO WORKIN YOUR CMS
Create all new templates inOmniUpdate
LessonLearned #6TEST, TEST, AND TESTSOME 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 realmobile devices
MobitestMOBITEST.AKAMAI.COM
Debate 2012 Home Page- 252.6kb DEBATE2012.DU.EDUMobitest iPhone 4    2.14 secMobitest Galaxy S           2.55 sec    Deskt...
Debate 2012 Events Page - 673.5kb DEBATE2012.DU.EDU/NEWS    Desktop Wifi          2.80 secMobitest Galaxy S               ...
Feb 20,The LaunchTime to Party
What’sNext?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:...
Already started building new DUcore site using responsive design
Oct 3, 2012University of Denver presentsthe Presidential Debate
Thank you very much!slideshare.net/skiboyjonbit.ly/redaptivejon.liu@du.edu  @skiboyjon
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
Upcoming SlideShare
Loading in...5
×

EduWeb - Building a Responsive Website for the Presidential Debate

874
-1

Published on

“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 -

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
874
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

EduWeb - Building a Responsive Website for the Presidential Debate

  1. 1. Building a Responsive Website for the Presidential Debate JON LIU & MATT ESCHENBAUM
  2. 2. Hello!
  3. 3. By Jacked01 - http://www.flickr.com/photos/jacked01/4335464703/
  4. 4. By Hilary Hughes - https://picasaweb.google.com/105795174137387926578/Denver#5556786742373643186
  5. 5. Tweet us!@skiboyjon#denverdebate#eduweb12
  6. 6. Responsive + Adaptive = ReDaptive?
  7. 7. What we did well How we screwed up Lessons learned
  8. 8. How it began By -eko- - http://www.flickr.com/photos/ekosystem/4334671818/
  9. 9. Mar 31, 2011University ofDenver applied tohost the debate
  10. 10. Oct 31, 2011DU was selected asa host site by theCommission onPublic Debates By Laney Griner - http://knowyourmeme.com/memes/i-hate-sandcastles-success-kid
  11. 11. By Bourguiboeuf - http://www.flickr.com/photos/bourguiboeuf/6996015793/
  12. 12. Can I get tickets?
  13. 13. By Austen Hufford - http://www.flickr.com/photos/austenhufford/6964717904/
  14. 14. We need a debate website
  15. 15. LessonLearned #1DO YOURHOMEWORK
  16. 16. Aaron Gustafson ADAPTIVE WEB DESIGN Ethan MarcotteRESPONSIVE WEB DESIGN
  17. 17. Something BIG is happening
  18. 18. The next major step
  19. 19. How wedecided to goResponsiveUSE DATA TOINFORM
  20. 20. 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$
  21. 21. By adactio - http://www.flickr.com/photos/adactio/6153481666/in/photostream/
  22. 22. 2009 - 27 screens
  23. 23. 2009 - 28 screens2012 - 587 screens
  24. 24. 681,900 Total3997 differentandroid devices By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
  25. 25. AndroidScreens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
  26. 26. iOS screens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
  27. 27. Practical maintenance and updates
  28. 28. Opportunity to start with aproject site
  29. 29. Plenty of problems too
  30. 30. Not many other higher-ed schoolsusing RWD, yet
  31. 31. “Best practices are emerging forsmaller, boutique-style sites, but forsites with larger anatomies, it’s stillthe Wild West” Michael Mesker http://www.palantir.net
  32. 32. Not a Silver Bullet
  33. 33. By David Veatch - http://www.dvicci.com/blog
  34. 34. LessonLearned #2GET BUY IN EARLY By @MSG - http://www.flickr.com/photos/michaelsgalpert/2455566419/
  35. 35. Share information withstakeholders through demos,explanation and training
  36. 36. You are the cheerleader
  37. 37. LessonLearned #3PLAN, PLAN, PLAN By Cameron Degelia - http://www.flickr.com/photos/degelia/6894587439/
  38. 38. Website Launch Feb 20, 2012 Content + Design + DevelopmentOct 31, 2011 Oct 3, 2012
  39. 39. The typical process
  40. 40. Content Design Development
  41. 41. Development Design Content
  42. 42. Mobile FirstLuke Wroblewski@lukew
  43. 43. By Brad Frost - http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  44. 44. Design / Development loop
  45. 45. Ross
  46. 46. More Work Up Front = Better User Experience
  47. 47. LessonLearned #4START BUILDING By Armchair Builder - http://www.flickr.com/photos/armchairbuilder/7345497766/
  48. 48. Test your responsive breakpointsin the browser as you build
  49. 49. Resizer
  50. 50. Feedback from stakeholders atdifferent stages of the process
  51. 51. Developing in the browserreveals problems early
  52. 52. Re-learn how to think inbreakpoints
  53. 53. Broken web fonts in the browser
  54. 54. Work closely with sys admins toconfigure servers appropriately
  55. 55. Be prepared to suck
  56. 56. LessonLearned #5USE FRAMEWORKSAND PLUGINS, BUTWITH CAUTION
  57. 57. 60%mobile users expect site to load in 3 seconds or less source - 2009, Compuware commissioned Equation Research
  58. 58. 74%users will leave if your page takes 5 seconds or longer to load source - 2009, Compuware commissioned Equation Research
  59. 59. CMSIntegrationGET RWD TO WORKIN YOUR CMS
  60. 60. Create all new templates inOmniUpdate
  61. 61. LessonLearned #6TEST, TEST, AND TESTSOME MORE By ~db~ - http://www.flickr.com/photos/dopey/123646856/
  62. 62. Testing takes time By Thomas Hawk - http://www.flickr.com/photos/thomashawk/4440874971/
  63. 63. Test on realmobile devices
  64. 64. MobitestMOBITEST.AKAMAI.COM
  65. 65. Debate 2012 Home Page- 252.6kb DEBATE2012.DU.EDUMobitest iPhone 4 2.14 secMobitest Galaxy S 2.55 sec Desktop Wifi 3.51 sec iPhone 4 WiFi 4.51 sec iPhone 4 3G 8.60 sec
  66. 66. Debate 2012 Events Page - 673.5kb DEBATE2012.DU.EDU/NEWS Desktop Wifi 2.80 secMobitest Galaxy S 3.49 sec iPhone 4 WiFi 3.51 secMobitest iPhone 4 3.78 sec iPhone 4 3G 9.00 sec
  67. 67. Feb 20,The LaunchTime to Party
  68. 68. What’sNext?The FUTURE By :: Radar Communication :: - http://www.flickr.com/photos/markchapmanphoto/5139429152/
  69. 69. 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>
  70. 70. Already started building new DUcore site using responsive design
  71. 71. Oct 3, 2012University of Denver presentsthe Presidential Debate
  72. 72. Thank you very much!slideshare.net/skiboyjonbit.ly/redaptivejon.liu@du.edu @skiboyjon
  1. A particular slide catching your eye?

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

×