MultimediaCommProf

My advanced multimedia students have agreed to tackle the task of redesigning our campus news site, The Spectator, and converting it this fall to WordPress. I’ll be documenting the process here in MultimediaCommProf.

McPherson College Online Spectator

Our student news site, The Spectator, is a simple three-column layout, with all navigation residing in the left-hand column; a right-hand sidebar making space for some multimedia teasers, polls, and search; and the central column carrying the content. The color scheme reflects the school colors of red and white, with accents of khaki-gold. The flag is a close reproduction of the one used in print before it was redesigned in 2010. Heads are set in Georgia and decks in italic Verdana. The overall effect is clean, simple, and usable, but definitely dated.

The biggest shortcoming of the online Spectator is not its design (although, again, it is definitely showing its age and lack of sophistication) but the CMS lying behind it. When the Spec first went online (in 2005?), Django and Joomla were relatively new and somewhat intimidating technologies to undertake.

We settled for a simpler open-source option known as PROPS, which was free and had a small support community, with the additional advantage of being the CMS in use at the Salina Journal, the daily of a community about 35 miles north of us. I struck up with relationship with the online manager there, who was able to provide some advice along the way. The greatest liabilities of PROPS are its very limited features within the admin dashboard itself and, thus, the demand that student admins learn a fair amount of HTML, CSS, and PHP to do anything other than to post text. In recent years, the principal developers have neglected to update the product.

The advance in CMSes since the Spec first went online has been little short of astronomical. While many professional sites continue to rely on heavy-lifters like Django and Joomla, many college and university news sites have opted for WordPress, the open-source blogging platform that has evolved into an impressive CMS in its own right. For a short while in 2009-10, CoPress, a student-run startup, was even engaged in assisting and advising college journalists convert their campuses’ news sites to WordPress. Although CoPress is no longer around, some good tutorials have made their way online, and WordPress theme developers are offering a fair number of attractive designs for news sites. This has emboldened my advanced multimedia students and me to try to moving the online Spec from PROPS to WordPress during this fall semester.

A critical step in making the conversion is choosing a theme with a design and set of features that comes close to what we want in the new Spec. We’re willing to build our own child theme from whatever theme we adopt, but since we’re all novices at this, the closer we can get with the parent theme, the better. In order to build a thoughtful list of design elements and features that students would want in their news site, I asked them to explore as many campus news sites as possible, choose three, and blog about what in those sites appealed to them. I agreed to do the same.

U of Nebraska Daily Nebraskan

Since our school colors are red and white, and I’d prefer to see the Spec continue with that color scheme, I was especially attracted to sites and themes and featured red on white. The Daily Nebraskan does so subtly. The body background is gray instead of white, which dulls the overall effect of the site. The site picks up just enough accents of red from the links–including the linked heads–and the boxheads, which are filled with red, with heads reversed out in white.

A banner ad that runs above the container for the content is several hundred pixels narrower than the container itself, and the gray body background only emphasized this and gives the page an awkward, asymmetrical appearance.

The flag of the Daily Nebraskan appeals to me. First, it doesn’t consume a lot of vertical space, but second it introduces a nice touch of natural colors while featuring a campus landmark. The paper’s title is a simple, white sans serif reversed out of the photo (no shadow!). It rests on the site’s main navigation, a narrow horizontal bar filled with a charcoal gray gradient.

The DNis laid out on a strict grid of three equal-width columns, which works out all right except in the right-hand column where standard ad sizes leave awkward amounts of white space. The top-left column features a rotating slideshow of vertical pix of Today’s Top Stories with lower-third heads and captions that link to full-length stories inside. Additional news stories populate the center column. Currently, the top two include thumbnail images. The right-hand column is reserved for ads and widgets.

Below the fold, the left and center columns are merged to make space for a playlist of video stories. Articles are highlighted in one-column section boxes below the video player. I like the PDF download and archive and the link to a Campus Events calendar.

Overall, the DN has a lot of what I’d like to see in the new Spec, but…

Normandale Community College Lions' Roar

… There’s even more to like about the Normandale Community College Lions’ Roar. First, the Lions’ Roar ditches the gray body background in favor of a much lighter, subtler gray background in the content container, which has the effect of just defining the boundary of the page width. The effect is much brighter and cleaner than the Daily Nebraskan. Again, red accents are provided by navigation rollovers, heads, and links, but the heads in each section are color-coded, which throws in splashes of orange and green. Perhaps most importantly, the whole page hangs from a 100%-width horizontal bar at the top, which features a newsfeed reversed in white.

The layout is on a four-column grid, which gives the page the feeling of a bit more flexibility but contributes to the chaos at the bottom of the page.

On the downside, the widgets and links below the fold are filled with a a gray that is much-too-dark for the rest of the color scheme, drawing attention away from more important content, emphasizing the absence of a horizontal grid, and weighting heavily at the bottom. The Lions’ Roar is a Joomla site, and its theme incorporates the overused ribbons and scrolls that one finds everywhere these days.

The plus to take away from the Lions’ Roar is the very clean impact that the site makes above the fold.

St. Louis Community College Lion's Roar

One last site I explored was the St. Louis Community College Montage. The site is dominated by a nice forest-green color scheme, but I decided to give this site some attention because it is a WordPress site built with the Original News theme from WooThemes, one of the themes I think we should be considering for the Spec.

The page of the Montage is defined by a gray body background, but the effect is not as troublesome as with the Daily Nebraskan, perhaps because there is no banner ad above the container. The Montage has two horizontal navigation bars. The top one is a solid bar of forest green that sits atop the flag containing links reversed in white for About, Contact, Archives, and supplementary content such as blogs and jobs. Navigation to inside section pages is black on white, running directly below the flag.

The layout gives the appearance of being built on a five-column grid, although content above the fold is presented in two columns divided on a 3-2 ratio. I expect it is a faux effect. (The Montage spoils the effect by ignoring the grid in the design of their flag.)

There’s less content available above the fold than in most news layouts. The top of the left column is a slide show with links to five “featured” stories inside. Directly below is a video playlist. Top right is an ad, followed by a widget for most popular stories and below that a widget for Flickr photos. Below the fold, the left-hand column is divided into two columns that carry links to stories organized by section.

Given the limited amount of content generated by the Spec’s bi-weekly production cycle, the Original News theme might make a good choice. We can let photos dominate the top of the page and worry less about generating enough stories to keep the front page filled with interesting options.