Presented by Tiffany Broadbent and Justin Schoonmaker from the Office of Creative Services at the College of William & Mary. Exploring the motivation, design, implementation, and future plans for the responsive design of the W&M homepage. A recording of this webinar along with the subsequent Q&A session can be found on Hannon Hill's site: http://hannonhill.com/products/demos/william-and-mary-responsive-design-webinar-video.html

1. W&M’s Homepage Refresh &
Responsive Web Design
Tiffany Broadbent & Justin Schoonmaker, Creative Services, College of William & Mary
April 17, 2012

2. For W&M (and all of higher ed)
times are changing...
+143% ~8% +58%
mobile visits of all site traffic visits to
is from mobile m.wm.edu
devices
Top Referral Sources
+224%
iPad visits
#3 m.wm.edu -7%
#7 m.facebook.com +11-22% non-mobile visits
international traffic
January 15 – April 15 2011 vs. 2012

3. What is responsive design?
No matter the size, it works (and looks nice)

4. Homepage Refresh Goals
 Better experience for mobile users
 Less clutter, more contrast
 Feature multimedia
 Emergency messaging
 Middle ground between app and
traditional site
 Nested content

5. The design
 Everything was done in-house
 3 stages
 Peer-reviewed design

6. The technical bits & pieces
 HTML5 Boilerplate
 CSS3 Media Queries Javascript library
 FlexSlider - responsive jQuery slider plugin

7. Dynamic Content
from Cascade
 Photo Sets

8. Dynamic Content
from Cascade
 Bloggers

9. Dynamic Content
from Cascade
 News

10. Dynamic Content
from Cascade
 Right Now

11. Dynamic Content
from Cascade
 Featuring

12. Dynamic Content
from Cascade
 Events
(RSS from http://events.wm.edu)

13. The responsive bits

14. Media Queries
<link rel="stylesheet" type="text/css” href="base.css"
media="screen" />
<link rel="stylesheet" type="text/css” href="print.css"
media="print" />
<link rel="stylesheet" type="text/css" href="base.css"
media="screen and (max-device-width: 480px)" />
or in your CSS file:
@media screen and (max-device-width: 480px)
{ <your styles here> }
W3C Media Query Specification

15. That’s not all...
<meta name="viewport"
+ content="width=device-width, =
initial-scale=1.0"/>

16. Responsive considerations

17. Moving Forward
£ Overall very positive response
£ Not replacing mobile site
£ Plan to further optimize load time of homepage and entire site, server
side detection to serve smaller images
£ Intend to make entire site responsive

18. Questions?...and Thank You!
College of William & Mary
Office of Creative Services
creative@wm.edu
@wm_creative
Tiffany Broadbent
tlbroa@wm.edu
@tb623
Justin Schoonmaker
jlscho@wm.edu
@justschoon