I wrote this when I was the Digital Library Applications Lead at the University of Notre Dame. It was archived from http://www3.nd.edu/~dbrubak1/ which no longer exists.

What I Know About The nd.edu Website

The present (2011) website

  • is the second responsive design for nd.edu
    • there are layout adjustments at: 481px, 530px, 700px, 701px, 768px, 960px, 1050px, 1200px, and 1400px
    • media queries are sized in ems instead of px to avoid text resizing issues in some browsers
  • is “mobile first”
    • the site was designed with a phone-sized viewport as the primary target
    • small images are sent first, then large ones if needed
  • is NOT using a content management system of any kind
    • the website is a relatively simple PHP template
    • the pages are all the root file, index.php, within a directory hierarchy
    • there is only one person who updates the content that is not syndicated into the site and they do it using Dreamweaver
  • uses progressive enhancement to deliver
    • in-line SVG (vector images) for some logos including the one in the top left that anchors the navigation with a raster images fall back
    • embedded versions of the official university typefaces
  • employs RESS to alter how the template is rendered based on the UserAgent of the requesting device
    • at present this is limited to answering the question “Is this a mobile device”
    • the general idea is to store “modernizer-like” values in a cookie that is set on the initial request
      • this was initially implemented using Detector but it didn’t behave as originally hoped
      • the current implementation is an in-house developed script that consists mostly of regular expression matching against the incoming UserAgent
    • if the website is loaded on a mobile device:
      • the large, image slider in the background is not loaded at all
      • only one of the web fonts is loaded
      • the drop down menus in the main navigation are not loaded
  • loads large images, such as the ones in the image sliders, using media queries
    • pictures in sliders are all background images so their source file and dimensions can be adjusted with CSS
    • images in the large slider are scaled to the size of their containing element using “background-size: cover”
    • high resolution (“retina”) screens are supported with double resolution images using the “device-pixel-ratio” media query
  • uses several open-source, or liberally licensed components
    • jQuery as the foundation for all the site JavaScript
    • modernizer to enable client-side progressive enhancement
    • Flexslider for both of the image sliders on the main page

Responsive Design Resources

Professional Development

Conferences Agency has developers to: