Fun with Screen Area Analysis

By Deane Barker on January 3, 2009

Here’s a page that shows what’s wrong with news on the Internet. This story is from an NBC affiliate in Nashville. I clicked through to this story, and….

I couldn’t find the story. I was assaulted by this page. I had search before I could visually frame where the main content of the page began and ended.

I did a little math on it:

  • Total screen area: 805,409 pixels
  • Total area devoted to the main content: 79,146 pixels
  • Percentage of space on the page devoted to the main content of the page: just 10%

Just to make sure I wasn’t throwing stones a glass house, I did some math on an average Gadgetopia story. And I set up a couple rules (and re-did the one above based on these rules):

  1. I screencapped the initial screen my browser captured. Whatever was above the fold.

  2. I resized the browser to eliminate gutters on the outside of the site design. I basically reduced the screen width until I got a horizontal scroll.

  3. I drew a box around the main content. I didn’t discount internal whitespace inside the main content, although I did remove elements that had nothing to do with the main content (still, it’s grossly unscientific, because what you do you about, say, headlines separated from the story by lots of whitespace or other design elements — see the CNN story below).

Anyway, here’s a post from Gadgetopia:

  • Total screen area: 721,984 pixels
  • Total area devoted to the main content: 278,848 pixels
  • Percentage of space on the page devoted to the main content of the page: 37%

Here are some other sites (reduced to just the percentage):

What seemed like a great idea for analysis in the beginning runs into problems because you have questions about what is related to the story and what isn’t. But, in general, the numbers hold true from an eyeball perspective as well as a mathematics perspective.

Jakob Nielsen has always been a proponet of doing screen area measurements. He divides the screen up into three areas:

  • Content
  • Navigation
  • Advertising

He has recommended percentages for each, through I can’t remember what they are.

Look back over the screencap that caused me frustration in the first place, I learned an important design principle. Nothing should compete with the headline.

The fact that I couldn’t find where the story started certainly was affected by the small space the story occupied on the screen, but it was also affected by the fact that so many other things on the page competed with the headline. The ads to the top and right of the headline make it tough to pick it out amidst all the clutter. If that was easier, the lack of space devoted to the main content wouldn’t have been as much of a factor — I would have at least known where to start.

What Links Here


  1. I’m going to stake out the opposing position here for a moment: Overwhelming the content is annoying only to a certain demographic: largely, internet veterans who’re 30+. So, for example, it annoys the h-e- double-hockey-sticks out of us.

    Overwhelming the content doesn’t annoy my blushing bride (an accountant) nor the kids (surfer, coder & film guy). IOW, most peeps aren’t “in to” the internet for the aesthetic and really can’t be bothered. Now comes the kicker:

    The story is lost in ads because it’s only this mix that gets a “sufficient” amount of click-throughs. Whatever “sufficient” is in this case. I see it all the time with “normals.” They go to a site to read something and >poof!< "Ooooh, lookit the pretty picture! I want one!" I'm not saying these peeps are dumb, btw, just that they're inured: they expect this and go along.

    This won’t work on Gadgetopia but if you’ve a site that’s geared more towards normals, try it. I’ll wager a double-decaf, half soy with a sprinkle of nutmeg at 130F that your click-throughs jump.

    fwiw, -Craig

  2. This is a great idea for analyzing site design, and it’s particularly interesting in light of the “sky is falling” discussions going on about the news industry. Most of our local news sites — especially for the TV stations — resemble your example above. It may be that they do find this number of ads to be necessary to meet their goals, but I would challenge them to take a look at the sponsorship model (The Deck, or similar) that works for high profile bloggers. It appears to be a win-win-win.

Comments are closed. If you have something you really want to say, tweet @gadgetopia.