Above the Fold

The Call to Action (CTA) is a staple on much of what we produce here at mcgarrybowen.  Truly, in many ways, it is the reason for our existence.  We create things for our clients that induce their customers to take a specific action, none more obvious than the CTA.

“Click here”

“Order now”

“Learn more”

But no matter how inviting our CTA is…no matter how enticing our digital offerings are…it is all for naught if the end user doesn’t see it.  What is actually “above the fold” is a significant factor in conversion rates.  So, how do we ensure that end users will see those all-important CTA’s?

The obvious answer is, put it above the fold.  However, like most obvious answers, it is rarely so simple.  How do we make that happen?  How do we ensure that when a user loads a page we have developed that they can then see all of the things that we need them to?  Do we even need to worry about this for the target user on the specific site that we are working on?

There are legitimate reasons to not force everything to display below the fold.  The site could be more of an exploratory one with a story-like experience, which would lend itself to encouraging the user to continue on below the fold.  Conversely, the site could be an e-commerce one, where triggers should always be prominent and accessible.  Perhaps the site is targeting more sophisticated users, who will tend to have larger monitors and be more comfortable with a site layout that breaks the “above the fold” mold, as it were.

For those projects where we do need to be conscious of the fold, we can start with a discussion of average screen resolution.  In North America and the EU we see the vast majority of desktop users are running one of two screen resolutions; about 60% of average site visitors are running a screen resolution of 1024×768, while another 25% are running 800×600.  In Asia, Africa and South America those numbers tend to skew towards slightly lower resolutions.

However, relying solely on screen resolution will often lead to erroneous assumptions.  Screen resolution does not tell us whether the end user has their browser window fully maximized, nor does it tell us whether the user has toolbars or the like taking up valuable real estate…real estate that we are counting on for our designs.

Google Labs has posted an informative page, which gives us a nice visual representation of how many pixels tall and wide a page would have to be to ensure that the end user could see a CTA without scrolling.  As it turns out, the sweet spot, where 90% of their users would have the CTA visible sans scrolling, was only 500 pixels tall (that’s not very tall at all, especially if you have to include the client’s navigation and other page elements on screen).

This particular Google Lab project has graduated and is now a feature within Google Analytics.  Go to the Content section in GA and click In-Page Analytics.  Then by clicking Browser Size you can shade the portions of the page that will display below the fold.  We can now look at that particular URL and then click anywhere on the screen to see what percentage of “typical” visitors can see specific areas or control the threshold percentage by using the slider.

This topic recently came up on a client project, where we were considering the location of the “SHOP” button on the page.  When we took a closer look at the client’s site we found that approximately 77% of their desktop users were using a browser window with a height of 600 pixels or taller.  Based upon that information, the recommendation was put forth that the “fold” be considered no lower than 600 pixels from the top of the web page.  This prompted some discussion between the different groups working on the project and forced us to consider making some changes to the initial design.

Nobody likes making changes to the design, especially when there is so much work to be done and so little time to accomplish it in, but at least we were discussing making changes for the right reasons and we were using quantifiable information to steer the discussion.