Designing "Above the Fold"

I have a question with designing above the fold. With so many different platforms, resolutions and such, what is the best way of going about doing this.

Is there a safe zone for pixel height that the most important information should be in (or at least what you want people to see initially, no matter if they are on a laptop or a huge screen).

Should you follow the standard and have the logo on the left hand side as opposed to the right hand side due to different resolutions?

I’ve been using to check my sites. I’ve tried searching articles but only found ones with dates relating to 2+ years ago. I would like to know if the same ideas are followed or if things have changed because the viewing technology has changed.



As you say, ‘the fold’ varies too much from one device to another to have any hard and fast rules. The fold on a large monitor on a PC is in a different place to a small monitor/low res on a PC, but that again still gives you much more than a typical mobile phone browser.

Always put the logo/branding top-left. That is a recognised design standard, and it is where people look for the logo/branding, so if it isn’t there, they can get confused and disorientated. Plus, it is guaranteed to be above the fold on all devices.

Beyond that - keep the most important content as near to the top as you can without compromising the design. People are used to scrolling, so if key items are below the fold that shouldn’t be the end of the world, as long as (a) you’ve given them enough in the first screenful to entice them to scroll down, and (b) they don’t have to scroll too far, because people do get bored and give up quickly!

Basically what Stevie said. Keep the important things closer to the top of your design (call to action, buttons, descriptions, etc).

Don’t get too fired up about “above” and “below the fold.” It’s more important to ensure that what needs to be on the home page is on the home page, and (even more importantly) what doesn’t need to be on the home page isn’t. Studies show that people don’t mind scrolling if the info is pertinent and well-organized.

Thanks for the information guys!

Thats what I figured with the scrolling. These days if people go to a site they usually automatically scroll down, even if its a quick scroll to get a snapshot of the whole site.

Black Max: Do you know of any articles that show these studies? I would like to read them!

Probably worth reading this for an insight from google that placement with regards to the ‘fold’ can have a direct effect on conversion:

I’ve experienced an issue recently which also indicates UI placement with regards to vertical placement matters - a form was returning a lot of obviously erroneous data in one field (a combobox). Turned out the combobox was at the bottom of the page for a lot of users at a common screen resolution, they were selecting a value, then using their mouse scroll wheel to scroll further down the page, often accidentally changing the combobox value. Repositioning it so it wasn’t near the ‘fold’ removed this source of errors.

There was a very recent little article on either UXbooth or UXmatters or one of those sites, where it was pointed out that you do need to be aware of, does it LOOK like there’s fold? Or does it look to some users that they are already at the bottom when they aren’t?

The trick is to make anything after approx 400px look like there’s more if there’s more: so tall things like boxes with some border or background colour which, if it gets cut off, clearly looks cut off and lets the user know there’s more after it.

I get hit regularly with pages where I think I’m seeing the whole page but if I had scrolled down there was more. There wasn’t anything visually tying the bottom stuff to the top stuff, just looked like I was at the bottom. Like may people I don’t always check to see IF I have a scrollbar.

Kristinam, I don’t have any of those studies at hand, sorry. I imagine you can find tons of material by Googling.

Thanks for more of the insightful posts and links!

I will try to find those studies, it will be interesting to see the different correlations on how people react to different things that they see on the page.

I have seen similar references in design books (I can’t remember which ones). Apparently a lot of people don’t actually look at the scroll bar in working out whether to scroll the page but instead look at what is visible in the page and if it looks complete then they don’t scroll down to see if there is something else below it.

I did some searching by looking for UXbooth and UXMatters and I stumbled upon this article by smashing magazine, it has other tips as well. Its from 2009 but seems to make sense for this current time:

If you look near the bottom there are a few resources listed as well. :smiley:

here is another link on eyetracking articles( also older):

This made me smile and I show it to some clients: