Behind the Scenes: ou.edu redesign

homepageAfter many months of research, development, writing, information architecture and design, we are finally ready to launch a brand new ou.edu. Take a tour.

Content and design really go hand-in-hand with functionality and the technology behind the site. If it’s not easy for authors to create content and make it look good, a site will easily start becoming inconsistent even with the best intentions. Through web content management (WCM) in Adobe CQ5.4 we’re able to create new components, templates and functionality for our authors to generate content quickly and efficiently. Here Dave Hoecker takes us through the new features of homepage functionality and how we’re achieving these new details:

 

CQ5 Web Content Management:

mcboxThe biggest change we made with this homepage is the way we are pulling content. In order to eventually be able to share this content across multiple sites and pages, the content displayed on the homepage is all being referenced from articles or content pages within the site and we have options to display that content in a variety of ways. Through a custom component called “Meta Content” we can fill in content fields for title, description, thumbnails, etc. for every page in CQ. That way, by using custom components for video features, content features, carousels and more on the homepage, we simply reference the page we want and the Meta Content is then pulled onto the page and displayed based on the component referencing it.

This screenshot shows one view of a page’s Meta Content through a component called MC Box.

Another view of this content is through the article list at the bottom of the homepage. This list pulls articles under one directory and updates the news list when new articles are created and published.


Twitter Bootstrap:

A collection of tools to develop quickly using common UI elements and interactions to help rapidly deploy and create web pages.

We are using quite a bit of these components, but the main reason we chose this framework was for the columns and grid system. It also uses something called LESS, which is a CSS preprocessor. What this allows you to do is to define variables for CSS so that you don’t have to create CSS classes and simply maintain one variables document for globally maintained CSS. This is the biggest challenge and change from how we were maintaining CSS previously.

mobileBy using the Bootstrap framework for our CQ5 template, we also gain the feature of a responsive grid structure which means we don’t have to create a separate mobile site and maintain two sets of content. When you shrink the width of the browser window or navigate to this page on a mobile device, the content and components on the page restructure to flow better for smaller screens. This uses a media query to reorder content.

Some of the components we use from Bootstrap for content are the carousel, which powers the homepage “slideshow,” and tabs, which allow us to navigate between videos in the About OU page.

 

Columnizer:

A jQuery plugin to turn content into multiple columns.

columnsBecause we pull news items onto the homepage as a feed of the most recent news articles, we didn’t have the option to format this content into multiple columns as regular text. However, Columnizer allows us manipulate a single column into two columns with jQuery simply by calling a specific div.

 

Twitter and Facebook API Keys:

Pulling the social feed from Twitter & Facebook.

Facebook feeds can only be pulled by using a developer API key, so we’re doing a query directly against Facebook and Twitter to pull those feeds in a jSON format. The twitter link above shows the feed that is returned from that query, for instance.

 

Mustache:

Formats data on the client-side instead using a template of having to parse and format it on the server side.

 

Timeago:

twitter feedA way to display timestamps such as “4 mins ago” or “1 hour ago” similar to Twitter and Facebook.

This plugin will take timestamps and turn them into these less-specific, but more-readable timestamps for social feeds. It will also automatically refresh as you stay on the page so that the timestamp stays accurate. We’ve used this in the Twitter and Facebook feed and display minutes, days or hours as #M #H or #D.

 

 dotdotdot:

dotdotdotThis jQuery plugin cuts off text that is too long and adds ellipsis to keep desired formatting.

We wanted a static height in the “About OU” video feature component, but text for each video may not have fit within the space available. This plugin allows us to specify a size and what should happen after the ellipsis. In some cases we add a link to “read more” so that users can proceed to the article page.

 

Other jQuery plugins used on the homepage project: history.js for search/calendar and outside-events for search.

4 thoughts on “Behind the Scenes: ou.edu redesign

  1. I love the new site. Thanks for the indepth article on the changes. I’ve never heard of Bootstrap or LESS. Mobile devices have been a headache. I’ve been doing CSS the old fashioned way. It’s like I’ve been living under a rock.

Leave a Reply

Your email address will not be published. Required fields are marked *