W&M's Responsive Design

2,451 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,451
On SlideShare
0
From Embeds
0
Number of Embeds
346
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

W&M's Responsive Design

  1. 1. W&M’s Homepage Refresh &Responsive Web DesignTiffany Broadbent & Justin Schoonmaker, Creative Services, College of William & MaryApril 17, 2012
  2. 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 devicesTop 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. 3. What is responsive design?No matter the size, it works (and looks nice)
  4. 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. 5. The design Everything was done in-house 3 stages Peer-reviewed design
  6. 6. The technical bits & pieces HTML5 Boilerplate CSS3 Media Queries Javascript library FlexSlider - responsive jQuery slider plugin
  7. 7. Dynamic Contentfrom Cascade Photo Sets
  8. 8. Dynamic Contentfrom Cascade Bloggers
  9. 9. Dynamic Contentfrom Cascade News
  10. 10. Dynamic Contentfrom Cascade Right Now
  11. 11. Dynamic Contentfrom Cascade Featuring
  12. 12. Dynamic Contentfrom Cascade Events (RSS from http://events.wm.edu)
  13. 13. The responsive bits
  14. 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. 15. That’s not all... <meta name="viewport" + content="width=device-width, = initial-scale=1.0"/>
  16. 16. Responsive considerations
  17. 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. 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

×