Vancouver Island University

VIU.ca Public Web Site


With roots dating back to 1936, Vancouver Island University shares a rich history and connectedness with local Vancouver Island communities.  VIU has evolved into a dynamic, internationally-known university, supporting a student population in excess of 18,000.

Based on a previous client's recommendation, VIU hired us in the spring of 2013 to assist in building their new mobile-first, responsive public web site, being developed on the open source Drupal CMS.

Working with their in-house development team, we at Taunt implemented and delivered a series of front-end templates utilizing the Zurb Foundation responsive framework. We developed and (extensively) tested an HTML5-based solution for VIU, including Schema.org microdata for improved SEO, and custom client-side logic to handle additional responsive functionality.

We also customized and integrated variety of responsive Foundation components, allowing important content to reflow and be read comfortably on mobile phones, tablets, and desktop browsers. Templates were not only designed to support a variety of browsers and devices, but to also include multiple easy-to-use themes for the University's faculties and departments.

Technical summary

This project was strictly front-end, so the focus of development was on developing solid, well-tested HTML5 templates, as well as any necessary client-side interactions required by VIU. In addition to Zurb Foundation, we worked with external libraries such enquire.js for handling media queries in JavaScript.

Like many of our more recent projects, we utilized SASS and the Compass framework during development in order to structure and optimize our CSS3 stylesheets. Going this route meshed well with Foundation's SASS implementation, and helped simplify fulfulling VIU's requirement of custom themes for faculties and departments within the University. At the client's request, we also made use of Jonathan Snook's SMACSS front-end structure for optimal and formalized client-side project organization.

Visual design (including mobile and tablet variants) and final Drupal theme integration were handled internally by VIU's design and engineering teams, respectively.

CSS3Drupalenquire.jsHTML5jQuerySASS / CompassSMACSSZurb Foundation

Examples

Examples

Previous

Next