A review of your church website may result in someone mentioning “The Fold”. Although a valid worry at one time, this is a web design concept that is (or at least should be) extinct. Because of certain advances in technology it is not necessary to worry about this impossibly nebulous horizon. Instead I will encourage you to stop worrying about The Fold, and establish a prominent visual hierarchy for your pages.
I normally shy away from something this down in the weeds as design points. However I have had this come up in a project at my workplace. The conversations that ensued left me intrigued. First, let me describe what The Fold is. When a web page first loads, the portion that is visible in the browser window, without scrolling, is “above the fold”. Everything else is “below the fold”. Thus, the fold is the bottom of your browser window. Now, that we all agree on what The Fold is, let us see why it is not as important in modern web design.
Resolutions & Sizes
Although we know what the fold is, where does it exist? Unfortunately, every screen size and resolution has a different location of the fold. The fold on a laptop most likely is different than a desktop machine. The prominence of tablets made it even more complex since screens often display in landscape and portrait views. Smartphones add yet another smattering of resolutions. With so many screen sizes, it is nearly impossible today to determine where the fold is.
Browsers
So are you still adamant about the fold existing at a certain pixel height? Have you considered that each browser has different tool bar heights? Yes, each major browser has different real estate that they dedicate to viewing the actual website. It differs even more when considering mobile browsers. Want even more confusion? Do you have the Google add-on bar? How about Yahoo? A dizzying array of browser add-ons can push the fold even further up the page. Thus, users with a lot of these toolbars are used to scrolling down for pertinent information.
Ease of Scrolling
In the early days of the web, the act of scrolling down a page was a bit tiresome. You had one of three options: Use your mouse to click & drag on the tiny scroll bar, deal with the slow jerky movements of your arrow keys, or endure big warp jumps using the page up & page down keys. However, in 1996 Microsoft created the IntelliMouse that featured a small plastic scroll wheel. This advancement allowed for much easier scrolling up and down the page. As more computer manufacturers provided this as standard equipment; the issue of scrolling down a page became less and less significant. Then in even more recent times, Apple’s iPhone, iPad, and iPod Touch eased the scrolling issue even more. Just by using the tip of your finger, you could carefully scroll along, or flick a page quickly up the screen.
What to do?
I think that with these three areas to consider, it is nearly impossible to narrow down where the fold exists on a website. What you can implement is a visual hierarchy. Before you go running away, let me explain what this is. You can use various design techniques, such as color, size, contrast, proximity, etc., to make elements stand out on your pages. Much like on this page, the title of the page is larger than the body text. The use of bullets and italicized text in the above items helps you scan through the list. If you want more information, check out this article on understanding visual hierarchy in web design.
Action Item
Stop focusing on The Fold, and look at a page as a whole. Obviously more important items should be put to the top, but help your web team and approval authorities at your church understand the concepts in this article. Remember, many banner ads are often placed at the very top of websites, but because of “banner blindness” our eyes skip right over them. By prioritizing your content and creating a solid visual hierarchy you make a better experience for every user and device configuration.
Photo courtesy of Ward Meremans
