Your SlideShare is downloading. ×
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

EduWeb - Building a Responsive Website for the Presidential Debate

810

Published on

“Building a Responsive Website for the Presidential Debate” by Jon Liu at eduWeb Conference in Boston on July 31, 2012 …

“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
810
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 5. Tweet us!@skiboyjon#denverdebate#eduweb12
  • 6. Responsive + Adaptive = ReDaptive?
  • 7. What we did well How we screwed up Lessons learned
  • 8. How it began By -eko- - http://www.flickr.com/photos/ekosystem/4334671818/
  • 9. Mar 31, 2011University ofDenver applied tohost the debate
  • 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. By Bourguiboeuf - http://www.flickr.com/photos/bourguiboeuf/6996015793/
  • 12. Can I get tickets?
  • 13. By Austen Hufford - http://www.flickr.com/photos/austenhufford/6964717904/
  • 14. We need a debate website
  • 15. LessonLearned #1DO YOURHOMEWORK
  • 16. Aaron Gustafson ADAPTIVE WEB DESIGN Ethan MarcotteRESPONSIVE WEB DESIGN
  • 17. Something BIG is happening
  • 18. The next major step
  • 19. How wedecided to goResponsiveUSE DATA TOINFORM
  • 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. By adactio - http://www.flickr.com/photos/adactio/6153481666/in/photostream/
  • 22. 2009 - 27 screens
  • 23. 2009 - 28 screens2012 - 587 screens
  • 24. 681,900 Total3997 differentandroid devices By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
  • 25. AndroidScreens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
  • 26. iOS screens By OpenSignalMaps - http://opensignalmaps.com/reports/fragmentation.php
  • 27. Practical maintenance and updates
  • 28. Opportunity to start with aproject site
  • 29. Plenty of problems too
  • 30. Not many other higher-ed schoolsusing RWD, yet
  • 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. Not a Silver Bullet
  • 33. By David Veatch - http://www.dvicci.com/blog
  • 34. LessonLearned #2GET BUY IN EARLY By @MSG - http://www.flickr.com/photos/michaelsgalpert/2455566419/
  • 35. Share information withstakeholders through demos,explanation and training
  • 36. You are the cheerleader
  • 37. LessonLearned #3PLAN, PLAN, PLAN By Cameron Degelia - http://www.flickr.com/photos/degelia/6894587439/
  • 38. Website Launch Feb 20, 2012 Content + Design + DevelopmentOct 31, 2011 Oct 3, 2012
  • 39. The typical process
  • 40. Content Design Development
  • 41. Development Design Content
  • 42. Mobile FirstLuke Wroblewski@lukew
  • 43. By Brad Frost - http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  • 44. Design / Development loop
  • 45. Ross
  • 46. More Work Up Front = Better User Experience
  • 47. LessonLearned #4START BUILDING By Armchair Builder - http://www.flickr.com/photos/armchairbuilder/7345497766/
  • 48. Test your responsive breakpointsin the browser as you build
  • 49. Resizer
  • 50. Feedback from stakeholders atdifferent stages of the process
  • 51. Developing in the browserreveals problems early
  • 52. Re-learn how to think inbreakpoints
  • 53. Broken web fonts in the browser
  • 54. Work closely with sys admins toconfigure servers appropriately
  • 55. Be prepared to suck
  • 56. LessonLearned #5USE FRAMEWORKSAND PLUGINS, BUTWITH CAUTION
  • 57. 60%mobile users expect site to load in 3 seconds or less source - 2009, Compuware commissioned Equation Research
  • 58. 74%users will leave if your page takes 5 seconds or longer to load source - 2009, Compuware commissioned Equation Research
  • 59. CMSIntegrationGET RWD TO WORKIN YOUR CMS
  • 60. Create all new templates inOmniUpdate
  • 61. LessonLearned #6TEST, TEST, AND TESTSOME MORE By ~db~ - http://www.flickr.com/photos/dopey/123646856/
  • 62. Testing takes time By Thomas Hawk - http://www.flickr.com/photos/thomashawk/4440874971/
  • 63. Test on realmobile devices
  • 64. MobitestMOBITEST.AKAMAI.COM
  • 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. 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. Feb 20,The LaunchTime to Party
  • 68. What’sNext?The FUTURE By :: Radar Communication :: - http://www.flickr.com/photos/markchapmanphoto/5139429152/
  • 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. Already started building new DUcore site using responsive design
  • 71. Oct 3, 2012University of Denver presentsthe Presidential Debate
  • 72. Thank you very much!slideshare.net/skiboyjonbit.ly/redaptivejon.liu@du.edu @skiboyjon

×