Designing Above the Fold and the Google Browser Size Tool

Share this article

browser resize
“Above the fold” is a concept that originated in the printed newspaper industry. Only the top half of a folded paper is visible, so editors move important content to the top of the page to entice people to buy the paper. The term has been adopted by the web design industry where it refers to the visible part of the page when it’s loaded. Many “experts” still assume that content below the fold will be missed. A certain large international IT company I worked for employed a number of teams who competed to have their content placed in prominent positions. Managers, designers, coders, copy writers, and advert sales teams would all insist their content was more important than others. It normally resulted in a confusing mess at the top of every page. I’ve never been convinced by the “above the fold” argument. First, there is no clear fold line — monitors come in different sizes, browsers may not be full-screen, and OS controls and tool bars use space. Secondly, most users understand the scroll bar and a recent report from CX Partners provides compelling evidence. Their conclusions:
  1. Less is more Don’t cram everything above the fold — use of whitespace and images encourage exploration.
  2. Stark horizontal lines can discourage scrolling Full-width thick lines can subconsciously indicate the end of a page, so ensure content is visible to encourage scrolling.
  3. Avoid in-page scroll bars The browser scroll bar indicates the quantity of page content, so avoid using iframes and scrollable divs which break the convention. (I’d add that changing the scroll bar colors can cause users to miss content too).
However, you may be able to employ simple design tweaks which ensure people notice specific areas. For example, Google recently increased Google Earth downloads by 10% when they shifted the “Download” button upward by 100 pixels. The company has subsequently created Browser Size, a new tool from Google Labs which shows how many people can typically view areas of your web page. The diagram is calculated from browser height and width information collated at Google.com. For example, the top 600 x 300 pixels can be immediately seen by 99% of users. Whereas only 10% of users can see content beyond 1250 x 800 pixels. Browser Size tool
Designers can therefore create a page which ensures important content is prominently displayed and minimizes scrolling for the majority of users. It’s undoubtedly a useful tool, although I hope it doesn’t lead to a plethora of tiny 600 x 300 pixel websites! Links:

Frequently Asked Questions (FAQs) about Designing Above the Fold

What is the significance of designing above the fold in web design?

Designing above the fold refers to the practice of strategically placing the most important content or elements of a webpage in the area that is immediately visible when the page loads, without the need for scrolling. This concept is crucial in web design as it directly impacts user engagement and conversion rates. The content placed above the fold should be compelling enough to grab the user’s attention and encourage them to explore the rest of the site.

How does the Google Browser Size tool help in designing above the fold?

The Google Browser Size tool is a useful resource for web designers. It allows them to visualize how their webpage appears on different screen sizes. This tool overlays a grid on your webpage, showing what percentage of users can see each area of your site without scrolling. This helps in determining the optimal placement of key elements to ensure maximum visibility and user engagement.

What are some best practices for designing above the fold?

Some best practices for designing above the fold include keeping the most important content or call-to-action elements in this area, ensuring the design is responsive to different screen sizes, and maintaining a balance between text and visuals. It’s also crucial to keep the design clean and uncluttered to avoid overwhelming the user.

How does designing above the fold impact SEO?

Google and other search engines prioritize user experience, and designing above the fold plays a significant role in this. A well-designed above the fold area can reduce bounce rates and increase dwell time, both of which are positive signals to search engines. However, it’s important to avoid “ad-heavy” above the fold areas as this can negatively impact your site’s SEO.

What is the “fold” in web design?

The “fold” in web design refers to the point on a webpage where content is cut off and the user must scroll to see more. The term originates from newspaper design, where the most important stories are placed “above the fold” of the paper for maximum visibility.

How can I determine where the fold is on my website?

The location of the fold can vary depending on the user’s screen size and resolution. Tools like the Google Browser Size tool can help you visualize where the fold lies for different users.

Can I place ads above the fold?

While it’s technically possible to place ads above the fold, it’s generally not recommended. Google’s Page Layout Algorithm penalizes sites with too many ads above the fold, as it can negatively impact the user experience.

How can I test the effectiveness of my above the fold design?

A/B testing is a common method for testing the effectiveness of different design elements. By creating two versions of your webpage with different above the fold designs, you can compare which version leads to better user engagement and conversion rates.

What is the role of typography in designing above the fold?

Typography plays a crucial role in designing above the fold. The right font and text size can grab the user’s attention and convey your message effectively. It’s important to choose a font that is easy to read and complements the overall design of your site.

How does mobile design impact the above the fold area?

With the increasing use of mobile devices, it’s essential to consider mobile design when designing above the fold. On smaller screens, the fold comes much sooner, so it’s important to prioritize the most critical content and design elements in this limited space.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

DesignGoogle Tutorials & Articlesweb
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week