Charter Oak State College’s DIY Responsive Website Redesign

About Charter Oak State College

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.

 

Modern Campus at Charter Oak State College

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.

The DIY Decision

The COSC website was managed using Modern Campus' Omni CMS web content management system (CMS), so Russell considered outsourcing the redesign project to Modern Campus. 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 Omni CMS 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 Omni CMS

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

Another feature of Omni CMS 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.

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.

 
Charter Oak State College's responsive website on a mobile device.

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 Omni CMS 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.

 
Book a demo now!

Tackle your biggest challenges

We’re looking to topple the ivory tower.

Do you want to see how? Let's talk.

Request a demo

 

 

 

We use cookies on this website to enhance your experience and improve our services and our website’s functionality. By continuing to use our website, which includes remaining on this landing page, you consent to the use of cookies and agree to our Privacy Policy.