Download - W&M's Responsive Design
![Page 1: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/1.jpg)
April 17, 2012
W&M’s Homepage Refresh & Responsive Web DesignTiffany Broadbent & Justin Schoonmaker, Creative Services, College of William & Mary
![Page 2: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/2.jpg)
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
![Page 3: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/3.jpg)
What is responsive design?
No matter the size, it works (and looks nice)
![Page 4: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/4.jpg)
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
![Page 5: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/5.jpg)
The design
Everything was done in-house
3 stages
Peer-reviewed design
![Page 6: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/6.jpg)
The technical bits & pieces
HTML5 Boilerplate
CSS3 Media Queries Javascript library
FlexSlider - responsive jQuery slider plugin
![Page 7: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/7.jpg)
Dynamic Content from Cascade
Photo Sets
![Page 8: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/8.jpg)
Dynamic Content from Cascade
Bloggers
![Page 9: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/9.jpg)
Dynamic Content from Cascade
News
![Page 10: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/10.jpg)
Dynamic Content from Cascade
Right Now
![Page 11: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/11.jpg)
Dynamic Content from Cascade
Featuring
![Page 12: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/12.jpg)
Dynamic Content from Cascade
Events(RSS from http://events.wm.edu)
![Page 13: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/13.jpg)
The responsive bits
![Page 14: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/14.jpg)
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
![Page 15: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/15.jpg)
That’s not all...
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ =
![Page 16: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/16.jpg)
Responsive considerations
![Page 17: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/17.jpg)
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
![Page 18: W&M's Responsive Design](https://reader036.vdocuments.us/reader036/viewer/2022062615/547e90ddb4af9faa158b56a3/html5/thumbnails/18.jpg)
Questions?...and Thank You!
College of William & MaryOffice of Creative Services
[email protected]@wm_creative
Tiffany [email protected]
@tb623
Justin [email protected]
@justschoon