Viewport, screen and fold

First, we need to make sure we’re on the same page, so to speak. I’ll talk about the viewport, the fold, and screen resolution.

Most web analysis tools will give you the screen resolution, which unfortunately is pretty worthless. More important is the viewport; the content window inside your browser, below all the toolbars, and inside the scrollbars and the framing. It’s the canvas that’s left in your browser that will put a limit to the experience we give the user.

The fold is at the bottom of your viewport. To see anything below the fold, your user will have to scroll. The expression comes from the printed newspaper industry, where newspapers in a news stand often were (and some still are) folded. Only the top half of the frontpage is immediately visible, thus being the main selling point. The problem on the web is that it’s hard to tell where the fold actually is. More in this further down the article.

Developers have too large screens

A luxury and a problem for most companies with a web based business, or perhaps a business that buys web advertising, is that they will have far better equipment than the average Joe or Jane. The front page that looks good on their 24 inch web developer screen won’t necessarily communicate the same message as the same page viewed on your father’s 14″ CRT monster or his 3 year old 14″ laptop. And our web stats tell us that these screens and laptops will live happily for quite a while, if not ever after.

- This isn’t relevant, you might argue. «I know for a fact that my users scroll.» Well, so do ours. They scroll quite happily. As long as they are given indication that there is more to find. This is the core of the problem.

Depending on Google or other search engine traffic?

My surfing habits change. And more so lately. I no longer stay with the regular dozen of daily sites I visit. My bookmarks are no longer my main source for information. It’s rather search engines or social networks, like Twitter, where I follow links from people I trust, or find interesting.

When I arrive at a new site from a Google link, or a link from my network, I scan the page quickly, to see if this is a good place to hang around. According to Steve Krug, or was it Jakob Nielsen, don’t remember, the average user only spends a very few seconds deciding whether a page meets his or her expectations.

You have very little time to show that you are relevant. This is where the viewport is crucial. Do your typical landing pages tell your users what you’re all about? Or do you show half a dozen ads, and 80 percent of the main image? To me, that might very well be a bounce. That means a one-page-visit, where I don’t even read the content on that page.

What all web developers should consider

You have to decide for yourself if this is relevant to your site or sites. But I believe this knowledge should always be in the back of the mind of all web developers, and one of the questions you always ask yourself when you design any page.

Will the submit button for this form be visible for most users? A visible submit button will undoubtedly increase the response. Look at the Expedia example on the right. Some 20% of the users don’t see that they can search for a hotel at the same time. I’d say it’s a pretty good chance they are loosing some business this way, especially considering the travel booking market is one with fierce competition.

Will all users see the most important content at first glance?

Do I have typical horisontal spacing near the fold that indicates that the page ends, when there actually is more gold below?

Take Norwegian consumer info site DinSide. It’s a great site, with lot’s of reviews and tips in categories that appeal to most people.

Unfortunately, they don’t tell me that they have all this gold on their frontpage. Roughly one third of all users will see less than the page to the right. If I found it on Google chances are I wouldn’t proceed. At least I’ll bet my father wouldn’t.

Other examples are online newspapers. One of the considered leading online Norwegian newspapers is Dagbladet (example to the right). Most people will assume and know that there is more content below the fold, but I’m quite certain they would keep users longer at the site by always showing off more of the fresh stuff they have.

The list of sites with similar approaches are endless. They give little indication at all that there is tons of content buried inside.

A tool to aid the process: Viewport Gradient Overlay

I have created a tool that will aid these desicions. It’s an overlay that will show what’s actually visible to your users. I use transparency to indicate how many users will be affected. The tool is a bookmarklet that you just drag to you bookmarks, and can be overlaid on any site.

Drag this link to your bookmarks toolbar: Viewport Gradient v3

This is the tool you’ll get, and can use on any page. It should work in most browsers. Tested on Firefox, Opera, Safari and Internet Explorer 6 and 7. (As if I care about IE6 support:)).

The tool isn’t extensively tested, so feedback and suggestions are highly appreciated! On the todo-list I have at least: support for centered designs and the option to select your own colors.

Convinced or not, where is the actual fold?

I’ve analysed the actual viewport size from all web traffic for FINN.no, Norway’s leading classifieds site, with pretty much every Norwegian visiting the site every month. The numbers are from March 2009, covering more than 16 million visits from more than 4 million users. The numbers should be transferable to most countries with a decent internet penetration, as we buy our equipment from the same manufacturers. If anything, I’d argue that the Norwegian screen sizes might be on the upper range, but that’s only speculations.

Put your main content below 600px and a whopping 40% of your users will miss it without scrolling!

If you need a general rule; make sure the main content on your typical landing pages are within 1000 by 550 pixels. As you see from the plot the height varies, but not even a third of your users have a higher viewport than 650 pixels!

Finally, a word about the width. Very little variation here. Stay below roughly 1000 pixels, and you’ll reach pretty much everyone. It you want it wider, you might as well move upt just below 1260 pixes. 76% will see this. If you cross the 1260 barrier, you’re left with 25%, falling rapidly.

Yes it’s a <table>. Because it’s tabular data.

The most common viewport resolutions measured on FINN.no March 2009:

1. 1259 x 654 (425.565 visits)
2. 1003 x 592 (352.856 visits)
3. 1259 x 628 (327.107 visits)
4. 1259 x 624
5. 1259 x 631
6. 1259 x 604
7. 1003 x 599
8. 1003 x 566

Feedback

This is the first article on this site. Please share your feedback on this matter! I want to be better at every aspect of the web business, especially in the crossing between technology and business. And I truly believe that the way to get there is to share anything I learn!

If you share my passion for the web business I also invite you to follow me on Twitter: @nerdegutt (mainly Norwegian tweets) and @schei (English).