w&m's responsive design
DESCRIPTION
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.htmlTRANSCRIPT
April 17, 2012
W&M’s Homepage Refresh & Responsive Web DesignTiffany Broadbent & Justin Schoonmaker, Creative Services, College of William & Mary
For W&M (and all of higher ed) times are changing...
+143%
mobile visits
+224%
iPad visits -7% non-mobile
visits
~8% of all site traffic is
from mobile devices
January 15 – April 15 2011 vs. 2012
Top Referral Sources
#3 m.wm.edu
#7 m.facebook.com
+58% visits to
m.wm.edu
+11-22%
international traffic
What is responsive design?
No matter the size, it works (and looks nice)
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
The design
Everything was done in-house
3 stages
Peer-reviewed design
The technical bits & pieces
HTML5 Boilerplate
CSS3 Media Queries Javascript library
FlexSlider - responsive jQuery slider plugin
Dynamic Content from Cascade
Photo Sets
Dynamic Content from Cascade
Bloggers
Dynamic Content from Cascade
News
Dynamic Content from Cascade
Right Now
Dynamic Content from Cascade
Featuring
Dynamic Content from Cascade
Events(RSS from http://events.wm.edu)
The responsive bits
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
That’s not all...
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ =
Responsive considerations
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
Questions?...and Thank You!
College of William & MaryOffice of Creative Services
[email protected]@wm_creative
Tiffany [email protected]
@tb623
Justin [email protected]
@justschoon