Fold ’em when you need ’em

What is the mysterious “fold” ?

There’s this very big issue among many designers of making all the necessary information above the fold (that being a standard of about 600 / 700 pixels high). So they try and they try to fit everything that’s “important” in there. In a typical layout that gives us 960 x 660 pixels of space that the most users will instantly see. Which is about this much of this website :
cm-960x660

Now the fold we will mark on another image with a red line so it’s clearly visible.
cm-960x

So is it better to have both the image and the text above the fold in this case? To have a smaller image and the text on it’s side? We have checked some of our sites and some data about eye tracking online and we have found a couple of things. First of all let’s take care of a myth that has been with us for a long time now.

People don’t like to scroll

This is not true. People like to scroll and longer (but not too long) pages give them the mental image of a site that’s rich in content, thus more trustworthy. Sure we need things that will keep the viewer interested above the fold. But not all of them. Because if the viewer finds the site interesting he will scroll anyway. And if he doesn’t – then believe me – keeping content above the fold won’t help you. There are probably bigger flaws in your design or content that you need to take care of first.

So what’s the deal with the fold?

As with everything in life – overusing something leads to a bad experience. So be careful – plan your site to the smallest detail and if the content above the fold is good enough people WILL scroll. Just keep the key interest grabbing elements above. But visual clutter above the fold also distracts the users, so some things can be pushed down below and they will be seen anyway. Don’t you worry!

One thing to avoid

There’s however a thing you should definitely avoid when considering putting relevant content below the fold. And that is “hard dividers”. Meaning that if the site seems visually closed by a thick line or shape that contrasts with surrounding background the user is less likely to scroll down and see more. Avoid that at all costs. It’s better to have the fold breaking in the middle of a block of text or an image, so they will scroll down at least a little out of curiosity. And since images are the thing that attracts the eye the most on a website, having an image there will probably be the best option. Just remember to have only half or less of the image above the fold, so there will be a point to scroll down to see it.

Liked it? Please share!