Pixel Garden Studio LLC


The Fold Does Not Exist...Not Really

March 18, 2013

When I create a website home page I use it as a mapping tool. It should have just enough information to tell you what the page is about with links to other pages of the site for more information.

With so many pages indexed by search engines it stands to reason that any page can become the landing page and my projects are designed with that in mind. So to a degree the home page, while still important, caries much less weight alone than all the other pages as a whole.

Occasionally when I submit a home page design a client will approve it based on their idea that the visitor will see all the information fit within their screen. It's not until it becomes a web page that they realize this isn't necessarily the case and we have to have a conversation about the fold.

What Is The Fold?

Above the fold is the upper half of the front page of a newspaper where an important news story or photograph is often located. Papers are often displayed to customers folded so that only the top half of the front page is visible. Thus, an item that is "above the fold" may be one that the editors feel will entice people to buy the paper. Alternatively, it reflects a decision, on the part of the editors, that the article is one of the day's most important. By extension, the space above the fold is also preferred by advertisers, since it is the most prominent and visible even when the newspaper is on stands.

The term can be used more generally to refer to anything that is prominently displayed or of highest priority. Above the fold is sometimes used in web development to refer the portions of a web page that are visible without scrolling.


Why This Is No Longer Important Or Practical

A web page is not like a television screen. The contents do not scale along with the size of the device. Web pages are laid out by browsers based on pixels, and that's where the problem comes in.

There is any combination of desktop resolutions from 640x480 all the way up to and above 1920x1080. Notice the difference in the second value? That is the pixel height of the screen used to view the website.

Now if we take all those variables and add to that mobile devices like smartphones and tablets we have even more variation of what may actually fit on the screen without scrolling.

A Happy Medium

I can understand wanting everything to show up without scrolling, I really do. To website owners everything they have to say seems equally important and they don't want to have the user scroll to see everything, and that may be the case.

What ends up on the home page goes back to the question I first ask with website owners when we come up with a marketing plan for their site which is, "What is the main goal of the website?"

We can also make some assumptions about site visitors screen resolutions before any design work or marketing is even started based on default settings for current devices.

For instance we can make the hypothesis that a desktop visitor will have a minimum resolution of about 1024x768. That give us roughly 600 pixels from the top of the browser window to the base of the monitor. We can also consider a default font size of 16 pixels.

We also know that mobile browsers are somewhat used to scrolling because of the limited space.

What I generally suggest is that the main focus of the site be in the first 600 pixels of the screen, with secondary and tertiary items below that. It still accomplishes the main goal while everything is still on the home page with minimal scrolling.

With so many variables web developers have to deal with such as screen resolutions, devices, browsers and operating systems it is nearly impossible to have the same experience on everything and that's not a bad thing. Desktop and mobile visitors demand different things but good planning from the start can accomplish those goals for both the visitor and site owner.

In other words. Don't worry about the fold too much.