Fixing home-page spacing problems

The ColorLabs "Coverage" theme used to format theorion.com is what's called a responsive template, which means it automatically adjusts its content to the size of a visitor's screen.

ColorLabs & Company

With people accessing the Web with desktop and laptop computers, tablets and smartphones, going responsive is smart. But it does present some challenges.

While white space is usually a designer's friend, used badly it can hurt the usability of a web page. At theorion.com, too much white space in the home page's main news area can push headlines off the screen and make the landing page one-dimensional.

This spacing problem can be avoided by paying attention to two layout elements:

Photo crops: I've drawn orange lines to show where the photos on this morning's theorion.com home page could have been cropped to reduce the size of the rectangle that contains the story. The Zingg photo isn't terrible as it is, but trimming just a little from its bottom would tighten up the excess white space below the text.

Writing enough text: I think a good standard for length-of-text in this template is three lines, or about 20 words, about the length of a tweet. The template configures the lead story so its headline runs above the art, so more space is created in the text area. The Coverage template demo shows links to related content in that space (audio, video, stories on the same topic), which I think is both a good addition and solution. I'd avoid referring the reader to unrelated stories, which has been happening recently.

Actively managing the home page

As I mentioned in my last Eye on the Orion post, the home page is the most important element on a news website. It shouldn't be a surprise, then, that daily papers have someone working full time to manage its content and configuration. Some newspapers have a real-time heat map of their home page traffic on a big screen in the newsroom that constantly indicates which stories and photos are getting the most hits.

Those are luxuries theorion.com doesn't have, but there are some things worth paying attention to that would make the page more effective.

Sticky posts: The menu items at the top of The Orion's home page are designated to play there by checking a box in the site's back end. Any story from any section can be displayed there. It's a great place to promote stories that aren't time sensitive because they won't automatically rotate out of the menu. They should still be actively managed, though, to make sure fresh content is regularly displayed.

Breaking news: This scrolling news bar next to The Orion logo needs to be managed aggressively. I think it works best when it's tied to Twitter posts instead of regular news items. Notice that the City faces sewer strife item displayed in the scroll on today's home page also appears in the main news display on the left side of the page (second item). I don't think that duplication is the most effective use of the tools or page real estate. The sewer story does belong in the news roundup, but it should carry a slightly different headline than the breaking news hed and provide updated information.

Main news module: I'm on the website all the time (as you might imagine), and I use the news section on the left side of the home page to find out what's new on the site. It's tied strictly to the news section right now, and I'm wondering if it wouldn't serve readers better if every new post from every section was displayed there first, then channeled to its designated section on the website after a day or so. That would increase the number of new posts in that module daily and call attention to stories that readers (including me) might otherwise miss. I'm thinking of all the great arts content that went on the site last week that I didn't see until I went looking for it in the arts section.

The gallery: The photo gallery on the home page is a really nice feature of the Coverage template used by theorion.com, but the site loads all the photos in the gallery at start up. That can mean a really slow load time unless the number of photos is kept to a reasonable number (five? six?) and the photos are optimized for the Web. It would be great, too, if photographers were assigned to shoot an event on campus every day so that first gallery image would be new every single day.

Optimizing photos: I suspect one of the big culprits in the slow-loading problem is photos that haven't been compressed. It's really easy to make photos big enough but not too big by using the Save for Web and Devices tool in Photoshop.

Here's a photo from the features section that was displayed on the home page this morning. It measures something like 150 pixels wide by 100 pixels tall on the page, a fairly small image. But when I saved to my computer and measured it, it weighed in at more than 7 megabytes, way too big for a Web page.

Using Photoshop, I opened it in the Save for Web and Devices tool in the File menu and converted it to a medium-size jpeg. That reduced its size to a svelte 60 kilobytes, a size  that would reduce the load time of the page by several seconds, but changing the original size of the image would have cut that in half or more.

Optimizing should be done with all photos and graphics displayed on the website. Remember that people browsing the Web are an impatient lot.

A tale of two home pages

Even with so much traffic coming into websites from search engines and social media -- both of which usually send the reader to a specific photo, video or story -- the homepage remains the most important piece of real estate on a news site.

Of course, the most important parcel on the home page is the information that appears on the screen when a user first lands.

Today's typical news website is usually jammed with headlines and summaries and, of course, banner advertisements. The New York Times just redesigned its home page. Here's what the landing screen looked like this morning:

While it's typical, it reminds me of newspaper front pages before offset printing, when a front page might have 15 or 20 stories.

I prefer the Coverage WordPress template The Orion uses for its site, particularly the deployment of different-sized headlines in the main news area. Its layout does a great job of identifying the most important story on the page. But the editors need to be careful to use the typography and art elements carefully.

This morning's top-of-home-page had a headline and photo that essentially reduced the number of featured stories in the main news window to one. Here it is:

The long headline and typical mugshot crop of the photo means newly arrived readers are invited to read just one story, one photo and one ad.

That's not what the page looks like typically. Here's a screen shot from late last month that makes better use of the space and typography:

While I would have liked to see a little more of the top of President Zingg's head in the first photo, overall this page works much better for readers than the one from this morning.

Specifically, here's what this top-of-page does well:
- Main headline is contained in two lines
- Headshot is cropped into a horizontal rectangle.
- Extra white space below the first tease is used to refer readers to a related story.

The editors should keep those things in mind when posting stories to the screen readers see first when they want to check what's new at theorion.com.

Using TweetDeck to manage Twitter

Twitter is one of the great tools for getting news online quickly.

Reporters can tweet live from a breaking news event, retweet information they find interesting from tweeters they follow and promote stories they write for a newspaper or website.

One of the challenges for news organizations, though, is getting the tweets of individual reporters onto the organization's own Twitter feed. Most readers won't know the Twitter handles of all writers, photographers and videographers who work for theorion.com, for example, so it's important that editors at The Orion figure out a way to transmit those Tweets to the audience.

One way is to give everyone on staff the password to @theorion_news and @theorion_sports, but I think the free Twitter tool TweetDeck is a better approach.

Individual section editors can easily create a column for each reporter on staff to follow, in real time, what they're posting (TweetDeck refreshes automatically). The editors can then retweet a reporter's post or rewrite it, adding a URL link if the story is already online at theorion.com, using one of the two Orion Twitter accounts.

TweetDeck can also be used to generate story ideas and follow breaking news. Editors and reporters can create columns in the application to search or follow Twitter accounts and hashtags their interested in.

Here are some tutorials to help you get started with TweetDeck:
From Twitter - https://support.twitter.com/articles/20169620-getting-started-with-tweetdeck
A 19-minute YouTube tutorial - http://www.youtube.com/watch?v=6YysKcsDjt0

Doing more with mobile

I just finished watching a Poynter Institute webinar on structuring the newsroom to emphasize mobile apps and came away psyched. Etan Horowitz, CNN's mobile editor, presented his ideas for shifting an organization's focus to serve phone and tablet users better. He started the presentation by showing a growth graph of mobile app use that makes it clear smartphones and tablets are becoming the media delivery device of choice, especially for young people.

One of his really excellent suggestions was to make mobile site analytics available to everyone in the newsroom, then using that information to inform coverage. The Orion's numbers for last month, for example, show what mobile users are most interested in.

Click to make this image larger

Looking at the numbers suggests that getting a reporter over to the Chico and University police departments every day to update the blotter would be a good move.

The analytics for "Offers," the digital-couponing service that's part of the Orion app, shows nothing for December because there were no offers. The reason the paper purchased its app from iCampusTimes was for the offers function, so the numbers are pretty disappointing. The paper has to start making money from the app or stop shelling out $1,500 a year to maintain it.

Advertisers are understandably reluctant to try something new, especially when no one else is out there using it. Which made me think it's up to The Orion to introduce the benefits of offers in an easy, low-risk way. Here's what I came up with:
• The Orion creates a daily offer (The Daily Deal?)  that features a coupon for a different advertiser every day. It could be $1 off a burger at Mom's or a free game of bowling at Orchard Lanes.
• The advertiser doesn't pay for the offer. He or she simply makes the coupon available to customers for a single day.
• The Orion pushes the daily offer each morning to students who have downloaded the app.
• The advertiser sees results from the coupon and becomes more interested in increasing traffic by subscribing to the offers service.
• Students, who are always interested in a bargain, use the app more often and
• tell their friends, who download the app to get the same deals.

Click to make this image larger

The app is getting close to a critical mass of downloads (a little more than 2,000) thanks to the efforts of last semester's PR team. This semester's team could design house ads for print, web and mobile pushing The Daily Deal to make sure readers know about it. That, coupled with the push notifications, should give the strategy a decent chance of succeeding.

By the way, I need to thank the AS Sustainability Committee for extending the $5,000 grant it awarded The Orion that's allowed the paper to double its downloads this year.