UTC logo

The University of Tennessee at Chattanooga Gets a Responsive Design Refresh with OU Campus and Bootstrap

Case Study

Highlights

  • Highlights

  • Implementing responsive design capabilities is more important than ever in this dynamic web world.

  • Utilizing Bootstrap and OU Campus together is effective for creating consistent templating to manage multiple departmental sites.

  • OU Campus snippets give editing freedom to end users without the risk of HTML mistakes.

With approximately 300 website contributors in OmniUpdate’s OU Campus™ web content management system (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.

Pennant

UTC logo

The University of Tennessee at Chattanooga (UTC) is one of four public universities in the University of Tennessee System. UTC was founded in 1886 and began as a private university under the name Chattanooga University. Today, the campus spans 417 acres of urban area. Offering bachelor’s, master’s, and doctoral programs, this 12,000-student institution prides itself on being a model for metropolitan universities and representing Chattanooga in the statewide system.

The university’s website architecture hadn’t changed since the year 2000. It desperately needed a design refresh that could easily be managed within OU Campus. 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 OU Campus 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 OU Campus 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 the OU Campus 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 OU Campus 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 OU Campus 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 OU Campus 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.

UTC OU Campus Training Site
UTC Documentation and Training Site for OU Campus

 

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 OU Campus: 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 allow us to give the variety of content that our users want with standardized code formatting and responsive design.

 Dan Chase
UTC logo

Snippets also came in handy with the UTC faculty and staff profile pages. End users could easily update their profile pages using the OU Campus 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 OU Campus 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 OU Campus and Bootstrap. Their special sauce approach proved to be an efficient and effective way to create consistent templating and a beautiful visual design.

Ready to learn more?