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

• Eric recommended Responsive Web Design by Ethan Marcotte which informed the implementation of the first responsive redesign of nd.edu.
• I maintain a page documenting my understanding of responsive design.

Professional Development

Conferences Agency has developers to:

• Breaking Development
• HighEdWeb
• RailsConf