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

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

7. Tweet us!
@skiboyjon
#denverdebate
#eduweb12

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

19. Lesson
Learned #1
DO YOUR
HOMEWORK

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

49. The typical process

50. Content Design Development

51. Development
Design
Content

52. Mobile First
Luke Wroblewski
@lukew

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

79. Mobitest
MOBITEST.AKAMAI.COM

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