What’s “Above the Fold” in the Best User Interface Web Designs
“Above the fold” is a term that originated in newspaper design, and literally referred to the content on the front page of that was visible before the paper fold. Now this term is widely used with reference to the web in user interface design.
Working definition: “Above the fold” refers to the top portion of a web page that is the area immediately visible in the browser.
Whatever’s above the fold is what visitors see when they first arrive on your homepage or landing page. If this content doesn’t appeal to them, they likely aren’t likely to stay long enough to see more. For this reason, it’s an essential practice of good user interface design to put the most important content in this readily visible space above the fold.
In one effortless glance, the content above 
the fold should clearly indicate who the site is for, what it’s offering, and how the user can access it/find out more. If used correctly, this space should give the user a silent indication of how to best navigate through the site.
To keep them on your site, the content above the fold must be interesting and appealing to the user. Attractive, large images that are accurate visual representations of your services and brand are a great focal point for the area above the fold; maybe you even want to display your own work here. Whatever you choose, it should tell something, but not everything, about your website. Preserving a sense of mystery and not giving too much explicit data is a key technique for good user interface design above the fold; this is how the site will retain the interest and curiosity of the visitor and drive them to look further, below the fold and beyond.
To appeal to the user’s sense of purpose, it’s important that the content placed above the fold establishes a clear positioning statement. This should be a concise, one-liner that describes what the site is, what it does, and who it’s for. If it’s unclear what the site is offering from the get go, the user will become confused and disinterested.
Including a clear call to action that tells the user where to go next is just as important. This is always a priority for user interface web design—designing the initial visual space so that the user can quickly and easily move forward through an intended process. Delineating a clear call to action through the web design layout that’s immediately visually available will keep the user focused on task.
Seeing a company’s clients represented on their website page helps to earn a site visitor’s trust. If your site’s primary purpose is to sell a service or product, then it may be a good idea to integrate notable past client logos, or even testimonials into the design layout above the fold.
What you place at the top of your homepage is crucial because it informs the user what to do next. Be forward thinking and strategic when you plan what goes above the fold on your web design. Stick to clear, simple lines and spaces, and don’t forget to get feedback and make iterations on your user interface design by conducting user testing.
@rebrivved
I agree that what’s most important belongs where users can see it. Having said that, it’s a bit more complicated isn’t it? I worry that clients fixate on what’s “above the fold” versus considering the full user experience. These are often the same clients who try to cram everything onto their home page, forgetting that it’s just one entry point.
@hess777
This article feels a little waited towards being for “above the fold”. But it’s not always the case that it’s possible to cram everything your saying should be crammed above the fold up there. I agree it’s important to have valuable info up there to grab the users attention immediately, but I agree with @rebrivved that putting too much above the fold doesn’t take into account the full user experience. Some of the best websites I’ve seen scroll with large beautiful backgrounds and important info certainly “below the fold” (wish I had time to paste urls/remember those sites).
My point is the fold IS a print term. Maybe we need to create a new/relevant that pertains to web and the interactive world. But, it really all boils down to each specific site your designing. Some site will call for very top heavy design stressing important things at a height above 600px. Some can certainly go beyond this space and explore the always taboo “below the fold” area. We need to stop enabling the buzzwords “above the fold” utilized primarily by people who do not truly know what they are asking designers to do when they ask them to keep their designs above it.
I’ll end with something to consider. Thing about a computer where you only have 600px to view a website (a laptop, your grandmothers computer from 1995, etc.). Correct me if I’m wrong but isn’t there ALWAYS a scroll bar on the right anyways? Yes, generally speaking on a computer where you only have 600px to view a site, you DO always have a scroll bar. And what do you do with that scroll bar? You scroll. Websites scroll. It’s standard web behavior. The “fold” needs to stop being a limitation, and start being viewed as just a general guideline.
Alex S
Thanks for bringing this up, @hess777 and @rebrivved.
I want to address an assumption that you’ve drawn from this post–
Designing solely based on a “strategy “of locating content above the fold will seriously compromise the quality of any web design.
This post in no way condones or commends this as a good web design practice.
Over-doing the “above the fold” concept by loading content in there is defeating the purpose of even considering this aspect of page layout in design in the first place.
On the contrary, the concept of “designing above the fold” is meant to call designers’ attention to the fact that this space is important to the immediate impressions and perceptions of website visitors. I point it out to underline the importance of thinking carefully about what you place there, and to do so strategically. Being strategic about designing above the fold also means being selective. Addressing this “above the fold” space as a web design concept is meant to point out an area of design that has a direct effect in marketing, and user experience. It’s necessary to strike a balance between an artistic and aesthetic perspective that solely addresses the “design” aspect, and a marketing and business perspective here (that could potentially sabotage good web design.) Doing both is what will ultimately make for a good user interface and user experience.
thanks!
Less is More: The Return of The One Page Website | Think Vitamin
[...] would agree that the single page website innately lends to a better user experience. The following web user interface design features are attributed to the improved UX of a single page [...]
Rob
Good stuff to keep in mind. An unanswered question: in terms of size, what does above-the-fold mean? Is there a current standard thought on the size of the fold for *most users? Does it vary by demographic?
There are a lot of considerations such as, screen resolution, browser window size, browser version, user-zoom settings, browser toolbars, tab rows, etc, etc. Is there any research on pixel count for above-the-fold?
P-J
Yes,
http://browsersize.googlelabs.com/