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.