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.

It’s times like this, at the beginning of a semester when I’m teaching a subject such as multimedia storytelling, which literally changes day to day, that I regret that I have so many disparate fields to keep up with. I pick up this blog after a two-year hiatus, recognize how little I’ve actually been able to engage with the field of multimedia storytelling, and feel a touch of regret that I have so many rapidly changing subjects to keep up with that I’m never genuinely caught up and on top of any one of them. Then I think that if I were a specialist in only one or two narrow fields, I’d likely be at a research institution, teaching the same courses every year if not every semester. B-o-r-i-n-g.

Even if I’m unable to keep up with the newest tools and trends in multimedia storytelling, I welcome the challenge of trying. This blog is a place where I can document and share what I learn. Since I’ve made blogging about multimedia a formal requirement for my students this semester, I hope to make this blog a more regular part of that learning process.

Here’s to good intentions!

This package is a good example of design that has been shaped by the subjects and content. The package’s most powerful and moving components—the beautiful, warmly lit brown and black faces of the boys—are allowed to dominate the screen. The subdued, earth-tone color scheme complements the skin tones, and the clean, simple design avoids flourishes that would detract from the images and their subjects.

The contents are neatly organized by medium and are navigated by way of a simple navbar with text buttons. An inverted tab in the header of the opening screen is flipped and reproduced at the bottom of the interior index pages, softening the otherwise boxy package.

There’s a good deal to learn from this package. First, pay attention to your images. Let them take the lead in the design. Second, simplicity allows what’s really important—your content—to shine. And third, a simple band of color top and/or bottom, can anchor your package to the screen. A few other pleasant surprises crop up, but all of the hushed, muted variety. For example, in a design dominated by warm complements, a contrasting sky-blue background cools down a couple of interior screens.

“Where Children Find Hope” is good multimedia journalism enhanced by good design.

Everything about Ms. Rabaino’s Web site says connected! The right-side content area links to all the social services that she participates in. It’s an impressive list, and and she appears to maintain a professional, active presence in the ones I checked (Twitter and WiredJournalists).

There’s so much to like about this site. Ms. Rabaino illustrates a number things I’m encouraging our majors to do with their portfolios. First, the design immediately communicates a distinctive identity. The type, the color scheme, the graphic of converging diagonals all shout edgy, youthful energy—which Ms. Rabaino must have in abundance to keep up with all that she’s attempting to do. I’ve also advised my students to make it immediately clear who they are and what they do, which this home page does in the branding area. Ms. Rabaino also blogs regularly about the leading edge of journalism and the current state of the industry. I’m telling our majors there’s no more convincing way to demonstrate to a prospective employer that they will make innovative, professional staff members than to start a blog about what they’re learning and reading.

A few areas in the site need attention—the display of news stories is still basic and inconsistent with the rest of site and a number of the audio files in the broadcast area aren’t playing—but both the presentation and the work presented represent Ms. Rabaino as an exceptionally talented young woman. Who could resist wanting to hire her after spending even five minutes with this portfolio?

The Roanoke Times took away the top prize with its feature, “Age of Uncertainty,” an extensive collection of galleries, video, audio, and interactive resources that document the rapidly growing population of aging adults in Virginia.

The package’s interface is pretty traditional, with a top banner that remains at the top of every page and a horizontal dropdown navigation bar. The dropdowns presented some problems as I used them in Firefox 3.0: they often would flicker and disappear before I could select the link I wanted. The main content of the home page is a Flash show that alternates animated text with brief audio snippets representing the various viewpoints about caring for the elderly that are covered in the story. I usually don’t care for extended Flash intros, but this one is exceedingly well done and provides a clear overview of the problems and issues treated in the various features and stories. One annoyance is that the Flash show restarts every time you return to the home page. Interesting and moving the first time you hear it, the interview that begins the introduction quickly becomes an irritant and sends one looking for switch to turn the audio off.

In putting Adrielle’s Black History Month package together last week, we struggled some with the Flash audio player. Probably for that reason, I found interesting Roanoke’s use of Soundslides essentially as an audio player. Users choose the audio story they wish to hear by clicking a thumbnail of the speaker. This loads Soundslides. A full-size portrait of the speaker appears for the duration of the audio story. It allows users to really study the face that goes with the voice they are listening to. Of course this puts a premium on outstanding portraits.

While not outstanding, the interface for “Age of Uncertainty” is satisfying and user-friendly as far as design goes, even if the dropdown menu didn’t work smoothly.

I’m going to end this post here, but I want to examine a few other interfaces from the POYi winners. Next up will be “Where Children Find Hope,” from The Detroit Free Press.