The University of Tennessee at Chattanooga Gets a Responsive Design Refresh

With approximately 300 website contributors in Modern Campus' Modern Campus CMS, the University of Tennessee at Chattanooga (UTC) web team had their hands full making sure each user was trained, as well as motivated and excited to use the product. This was no easy task when working with an outdated website.

The university’s website architecture hadn’t changed since the year 2000. It desperately needed a design refresh that could easily be managed within Modern Campus CMS. And, with demand for sites that adjust to mobile and desktop screen resolutions at an all-time high, the site needed to be responsive. To maximize recruiting efforts, as well as ease current students’ use of the institution’s website, a complete refresh that incorporated responsive design was a project worth undertaking.

Inconsistent Templates

A design refresh was especially favorable because of the lack of consistent templating across the UTC sites. Each department was operating on its own for the most part. This free-for-all created inconsistencies in the flow of the site and made it harder for each department to maintain content. The university clearly needed new responsive templates that would work within Modern Campus CMS and that would help create a unified look and feel for all pages of their website.

The “Special Sauce” Solution

UTC needed a tool for the design refresh that would provide HTML- and CSS-based templates. Bootstrap was their answer. Bootstrap is a free front-end framework developed at Twitter. Utilizing Bootstrap as a framework for their templates, the UTC web team was able to begin their implementation process ahead of the game. The unique combination of Bootstrap and Modern Campus CMS is what Dan Chase, Lead Web Administrator for UTC, called their “special sauce”—a new and improved way to address the issues of a stagnant website and thoroughly inconsistent template coding.

With Bootstrap, the coding and CSS were already programmed to be responsive, so there was little work to be done before putting the code into editable regions in Modern Campus CMS templates. This “pre-styled” approach made it easy to convert to a full responsive site and reduced the headache of trying to customize each individual page. The XSL structure of Modern Campus CMS and its flexibility with Bootstrap was ideal, as it enabled the UTC web team to meet the needs of each department.

“

The XSL structure of Modern Campus CMS and its flexibility with Bootstrap was ideal, as it enabled the UTC web team to meet the needs of each department.

The special sauce solution gave the UTC web team the ability to provide template choices, including those designated for administrator use and those for end users, such as interior and profile pages. Flexibility also allowed them to create custom header and footer options for each section of the site, which was a huge selling point for end users.

Training for Success

Once the Modern Campus CMS templates were in place, the process of rolling them out for each department’s site was smooth sailing. The UTC web team knew that user buy-in was critical for their project to be a success, so they armed their users with the resources needed to be self-sufficient. The web team had a section on the site for training, equipped with templates, so each end user could create a page and begin his or her work. They also provided web workshops and open labs for those who wanted additional training.

Snippets to the Rescue

Since standardized code is paramount in achieving a well-functioning website, the UTC web team was very grateful for a particular feature of Modern Campus CMS: Snippets. “Snippets allow us to give the variety of content that our users want with standardized code formatting and responsive design,” said Chase. Giving end users HTML access is risky, as it makes it possible for things to break easier. Snippets help avoid that risk. End users can simply insert tables and other pre-formatted elements that use standardized code into editable regions of a page. Snippets also can create a consistent look and feel for the site and help ensure that formatting and design remain stable. The UTC web team particularly took advantage of snippets for video and embedded media, as well as images with captions.
 
Snippets also came in handy with the UTC faculty and staff profile pages. End users could easily update their profile pages using the Modern Campus CMS MultiEdit feature, which provided standardized form fields. Snippets were then used to insert profile groups, giving all group pages across campus a uniform look and feel. And the Modern Campus CMS Multi-Channel Output functionality generated an XML file that was used to create an index for the profiles. The XML could also be harvested for other uses throughout the site.

New and Improved

Through blending the use of Bootstrap and OU Campus, UTC was able to approach the design refresh process with ease. OU Campus was a very helpful tool for them in doing the redesign because it helped to narrow the focus of the project and focus on templates. After narrowing it down to the templates that they needed, it was simply a matter of integrating the existing content into those templates.

The UTC web team’s implementation process took several months of preparing, designing, planning the architecture, planning the integration, and more. But in the end, the university’s website was responsive, had a refreshed design, and could be managed easier with Modern Campus CMS and Bootstrap. Their special sauce approach proved to be an efficient and effective way to create consistent templating and a beautiful visual design.