Long gone are the days of Internet users consuming website content on desktop and laptop computers with roughly consistent screen sizes and monitor resolutions. It was easier then to determine the placement of your most important content — the "above the fold" space where content would be immediately visible on page load and not require scrolling. Now there are a myriad of screen sizes, resolutions and modern website development practices that allow the interface design to automatically respond to fit the screen size. Determining where the "above the fold" line is now a moving target. Given this, is the concept still important?
What is it and how does it apply to website design?
Traditionally, "above the fold" refers to the upper half of the front page of a printed newspaper where important news items or photographs are located. Newspapers presented for sale are often folded so that only the top half of the front page is immediately visible. These above the fold items are what editors believe are the most important news of the day and their high visibility is designed to grab your attention and encourage your purchase of a paper. In general terms, "above the fold" refers to anything that is prominently displayed or of the highest priority in the visual hierarchy. In website interface design we use the phrase "above the fold" to refer the part of the web page that is immediately visible without scrolling. High priority items for this space include branding elements such as a company logo to let the user know they've arrived at the correct website, navigation components that show what is available on the website, and images and headlines that communicate what the web page is about. This can be particularly important for a homepage design. Acting as the front door to your website, the homepage is your opportunity to make a good first impression and establish your purpose. For the homepage above the fold space, priority should be given to promotional messages with strong visual elements highlighting key products or services, calls to action or communicate the "big idea."
Is it still important?
There are those in the website design community that question, or outright reject, the relevancy of the concept given today's technological landscape and savvy computer user base. I would argue, and those engaged in website user experience research agree, that "above the fold" is still important to consider. To be sure the rise of responsive website design has complicated things a bit — moving from a fixed to a flexible design interface which tailors itself to the viewing device — but it is still important to show users at a glance where they've arrived and what your website is all about. The exact location of the fold is going to vary between desktop, mobile and tablet devices so a website designer may find that there are multiple above the fold lines to consider. Take a look at your website's browser statistics, consider which devices are likely to be used to consume your content going forward and set your fold lines accordingly. If you are using Google Analytics for your website user statistics there are a number of useful reports on how your users are consuming your website. The Audience reporting, in particular, will provide you with usage data on screen resolutions and help you identify shifts or trends regarding the use of desktop, mobile and tablet devices. Many website designers, myself included, use large, high-resolution monitors when sitting down to do their concept work. It can be easy to forget what page content might not be visible without scrolling when the designer can see most, if not all, of the website interface from the header to the footer. In addition to your responsive grid guides, it's a good practice to set a line guide or layer representing the above the fold space and refer to it as your interface design concept is coming together. Keep the "above the fold" space in mind and you're on your way to designing a website that effectively establishes your brand with a compelling message.