13 February 2009

The New York Times

I’ll start this with a warning. You’re very unlikely to find this anywhere near as interesting as I do. It talks about pixels. It’s not exciting.

With that out of the way, here’s the thing. I know users scroll. Maybe you also know users scroll. Two types of people who don’t know that users scroll are marketers I work with and developers I work with (note the careful phrasing to avoid slandering all marketers and developers). After a few discussions about making the masthead on my current project tinysmall so no-one need go near their scrollwheel, I took a look around to see what some sites I like do with their masthead.

After the jump, we’ll find out together!

Remember my warning: not exciting.

Social media sites

Vimeo

With the exception of Vimeo, with a 315px wait before you get to your content, things are pretty standard here. I’m defining pretty standard as falling into the 100-150px of header range, by the way. Now you know.

Flickr Piknik

Social network sites

Facebook

Facebook is the curse of many a design discussion for me. What looks at first like a super-minimal 30px header is actually pretty big; something in the region of 160px before you hit content. And then there’s the footer bar. Brightkite clocks in around the 290px mark.

Twitter header Brightkite

News sites

Guardian

I don’t know. Maybe it’s that they’re used to people not only having to deal with a real-life fold, but also having to open up a newspaper and actually turn pages with their hands, but it’s interesting that this group really gets behind the big, brandy header. And, of all the sites, these are the ones with the most content below the fold; get a load of those scrollbars!

Times online header BBC

If you’re a glutton for punishment, you can see the vast extent of my masthead screenshots over at Flickr. There are handy bonus measurements too!

Why does all this matter?

It doesn’t, really. There are plenty of research sources that indicate that users are willing to scroll (here are some that I’ve bookmarked on delcious) and that fewer, longer pages beats more, shorter pages. But when it comes to make a decision, it’s always good to have examples to back you up.

Update: I’d also intended to say something about the ideal of navigating through content links, rather than relying on global navigation. That thought must have been lost in the noodly jazz haze I endured while writing this.