Charter Oak State College Home Page

Charter Oak State College’s DIY Responsive Website Redesign

Case Study

Highlights

  • Highlights

  • Built on open standards, OU Campus™ makes it possible to use third-party frameworks to redesign your site and make it responsive.

  • Multi-Channel Output allows developers to publish content into multiple output types,including HTML, CFM, and mobile.

  • Campus buy-in can be increased by assuring content editors that all their page URL’s will remain the same. 

When it came time to think about redesigning the Charter Oak State College (COSC) website in early 2015, the decision to make the site responsive was a no-brainer, according to Dan Russell, Associate Director of Marketing Technology & Analytics at COSC. With the site's mobile usage increasing several percentage points every year and 15% of the current total visitation coming from either a phone or a tablet, the entire COSC team agreed that responsive design must be a key element of the new site. It was important to the COSC team that the first impression made on their website was as welcoming as possible, regardless of what device or browser a site visitor was using.

Pennant

Charter Oak State College Logo

Located in New Britain, Connecticut, Charter Oak State College (COSC) was named to commemorate the state's early success in its struggle for self-governance and is quite fitting for a public institution in the "Constitution State." Offering flexible degree completion opportunities, COSC is designed to help adult learners return to finish their studies. Students can choose from 50 degree concentrations, including Philosophy, Literature, Criminal Justice, and Computer Science.

The DIY Decision

The COSC website was managed using OmniUpdate’s OU Campus™ web content management system (CMS), so Russell considered outsourcing the redesign project to OmniUpdate. However, he ultimately decided to take on the project himself because he saw it both as a great opportunity to learn something new and a cost saver for COSC.

Choosing a Responsive Framework

Responsive design can be achieved in OU Campus templates using CSS3 media queries, JavaScript, or frameworks such as Bootstrap and Foundation. Russell used Bootstrap’s HTML and CSS structure as a base for the page templates and the code pieces. When it came to selecting a responsive framework, Russell chose Bootstrap based on his previous experience with it on another project. He found it simple to use and felt comfortable knowing it was an industry standard.

A Little Help from OU Campus™

An advantage of using a CMS like OU Campus is that it separates content from design, which simplifies the process of applying the site changes. Russell created the new XSL templates in OU Campus using the Bootstrap design and then the content was simply dropped in.

Another feature of OU Campus that Russell found both helpful and "very cool" was Multi-Channel Output. This feature made it possible for him to extensively test server-side code, develop the redesigns, and test all the changes on unlisted pages. Russell used ColdFusion Markup to publish CFM and CFML pages with different templates, so he was developing the new site with a new layout (CFML pages) while the old site (CFM pages) was still live.

Multi-Channel Output made it possible to extensively test server-side code, develop the redesigns, and test all the changes on unlisted pages.


Increased Buy-In, Reduced Friction 

Because Russell was basically a one-man department, he was the only web marketing person so he needed the project to be low friction if it was going to be successful. Utilizing Multi-Channel Output, the new site was hidden in the CFML URL. By simply adding an L on the end of any URL in the address bar, any staff member could see what the page would look like when the new design was implemented. This helped reduce internal friction because staff could see that all their pages were still right where they had always been, while also seeing the new and improved responsive design.

To keep it simple and increase buy-in, the COSC redesign was a substantial cosmetic change without any significant structural changes. The only exception was the navigation that simply changed from vertical to horizontal. Staff members could rest assured that every single page that existed in the previous site still existed in the new one.

The other decision that facilitated COSC's determination to simplify the redesign process was using a preexisting template rather than dealing with a custom redesign. COSC merely purchased the rights to a template the college liked, and then Russell modified it using the school colors, logos, and images that made it unique to COSC.

Changes Get Positive Feedback

According to Russell, the redesign was about as difficult as he had expected, but he knew when taking on the project that it was going to be a process. His previous experience with Bootstrap as well as XSL and XSLT coding was limited, so he learned quite a bit as he was doing it. Russell said he really loves working with XSL now, so he's glad OU Campus gave him a reason to dig into it.

Though COSC has not yet done a formal survey to get feedback on the site changes from current or prospective students, the internal reaction has been great. And the icing on the cake? Getting kudos from the college's president, Ed Klonoski.

Charter Oak State College Mobile Website

Ready to learn more?