Your SlideShare is downloading. ×
W&M's Responsive Design
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

W&M's Responsive Design

1,762
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 …

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
1,762
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
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. W&M’s Homepage Refresh &Responsive Web DesignTiffany Broadbent & Justin Schoonmaker, Creative Services, College of William & MaryApril 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 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. 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 Contentfrom Cascade Photo Sets
  • 8. Dynamic Contentfrom Cascade Bloggers
  • 9. Dynamic Contentfrom Cascade News
  • 10. Dynamic Contentfrom Cascade Right Now
  • 11. Dynamic Contentfrom Cascade Featuring
  • 12. Dynamic Contentfrom 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