Where is the fold?

In my previous article we wrote about what ‘above the fold’ means, when to care about it, principles for web design and collected expert opinion.

What I’d like to answer now is:

  • Where is the fold? Are there any standards? What is generally agreed by designers and experts?
  • Where is the fold according to advertisers and other clients? Which browser types and versions and resolutions do they generally consider?

Where is the fold

The fold for 1024×768 desktop resolutions is on average 578 pixels down from the top of a webpage. *

This is based on my research and average figures taken from various sources (industry experts, ‘best practice’ blogs, etc).

How wide should your site be? In terms of width (pixels across to prevent horizontal scrollbar) for PC only: 1004 pixels across. (Mac= 972) Anything to the right of 1004 pixels across the webpage is much less likely to be seen by the 1024×768 audience.

* note that 578 is probably a generous figure. I would argue that 285 is worst-case but common case scenario, giving a ‘safe’ or secondary fold at 768-285=483 pixels. Averaging 578 and 483 gives you 530.

** This is average. For any person the fold can be anywhere between 285 and 714, but those are min/max extremes and rare. If you consider the fold to be somewhere in the 483 – 600 region,  or about 70 pixels above and below 550  would be good design practice.

What other experts say

If there is a fold…it’s at:

Anne Holland: 1024×768   15″ : 980 x 520

Jungle Minds: 714 pixels van de bovenrand (768 pixels minus 2 x 27 pixels voor de balken)

What the stats say

At a popular PL telco site,  7.6% (half a million users) had a browser height of 500 to 549.  (Measured with SiteCatalyst for the 6-month period Aug 2010 – Feb 2011)

Fold trends

Screen resolutions on desktops are getting higher, but increasing popularity of mobiles and  iPad. If you have a mobile equivalent site (designed especially for mobile), you have the challenge that your (responsive/mobile) site is going to viewed by a wide range of viewport resolutions.

So don’t worry about it too much. If you want certain things to be exactly scaled to the first pagelength, and show nothing more nothing less, then use coding techniques.

It is rare that users don’t scroll anymore, especially on mobiles. However, there is the odd case where it could represent an issue on your site, for example see image here

The lowest resolution to take into account is the iPhone 3 and iPhone 4  (both effectively use 320×480). The fold (if using the Safari browser) is around 480 minus  status bar (20px) minus bottom toolbar  (44px @ iPhone4) minus 44px top navigation browser bar. In this worst-case primary fold scenario this gives a primary fold at 372 px. Other sources say: 360px, 416px, … , so in the range 360 – 416.

This assumes there is a significant proportion of user that still have an iPhone 3 or phone with a similar or lower resolution. New iOS versions may have different toolbar and statusbar heights. See the differences example here. Always check your own site stats (Google Analytics > Resolution)

 

Screen dimensions of popular mobiles/tablets/monitors: http://screensiz.es/

Browser screen resizers: http://creatiface.com/tools/responsive-design-test

Chrome plug-in https://chrome.google.com/webstore/detail/dimensions-toolkit/oajdmmikmphdckpkjgkdofoegppahcak

 

Articles discussing the ‘new’ fold considering tablet/mobile

https://storify.com/xiwcx/there-is-no-fold-1  TIP  (to read)

http://moz.com/blog/life-above-and-beyond-the-fold

http://webdesign.tutsplus.com/articles/designing-for-the-new-fold-web-design-post-monitorism–webdesign-1891

http://writespeaksell.com/in-designing-a-website-for-mobile-viewing-where-is-above-the-fold-2

 

Where to get device/browser/iOS stats:

Mobile

http://tripleodeon.com/2011/12/first-understand-your-screen/

There’s so much to take into account (landscape/portrait, 1000 devices, 100 browsers, status bar heights, virtual keyboards)..it could be solved programmatically (viewport.innerWidth etc), but it’s more pragmatic to design for the minimal (landscape) viewport (with standard keyboard). It’s especially a challenge when wanting to force auto-complete from a user  (hint)

 

Tablet

iPad usable screen size

 

Why there is no such thing as ‘one fold to rule them all’

Typically, browser versions and types will be any that the client take into account are aware or that we have specified as compatible with the particular portal. To be more precise you should consider your audience’s resolution, platform, browser and browser version. I’ve regarded only the popular 1024×768 resolution in the most popular browsers using figures from consulted sources mentioned in the Side Notes below.

Determining the fold for your website and audience

  • Profile your (most important) users to get a clearer picture (latest browser/resolution stats). If you have no access to stats for your own site, then use those of popular sites that your users are likely to use.
  • Browser is not always maximized: only 50.4% of users maximise their browser windows so actual browser viewport is often smaller. (source missing). Put another way, screen resolution is not browser resolution and the two often differ [5]. In a more recent survey on our sites it was about 80%.
  • 800×600 is used on average by 8% of my users. You could argue that users with lower resolutions are more used to scrolling, and might even scroll more often (and faster?).
  • Height is the trickiest, because some (novice) users have many and/or tall browser toolbars installed. In extreme cases toolbars might be eating away 250px giving a fold of about 530px. Considering default browser settings + one average toolbar = ~170px?
  • The horizontal fold/scrollbar is equally important.
  • One source claims that 95% of above the fold screen estate should be targeted to the most common users. Debatable.
  • Rule of thumb? Two-thirds down the screen?

Side notes

In answering this I have consulted various sources and articles. Research gets out-dated. Proper research should keep track of the source credibility, date of article, audience and – above all – resolutions and browser versions.

In this article:

  • Last updated in 2008. On 9 April 2008, my visitors mostly used Firefox, MSIE6, MSIE7, and Opera 9.x.   Mac users account for 4% and 800×600 users for 6%.
  • Only 1024×768 resolution considered (still the most popular resolution for most websites ).
  • Sources that also consider Firefox or Chrome have not been consulted yet. Generally the fold of these browsers is about 100 pixels off from the Internet Explorer fold.
  • The date of any source or consulted article should be considered, as the new IE7+ browsers have a different fold due to introduction of tabbed browsing (which some users have turned off). Chrome is especially minimal hence the fold figure for this browser may be increased as mentioned above.

Sources

http://www.boxesandarrows.com/view/blasting-the-myth-of

http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm (…”Less content above the fold may encourage more exploration below the fold”)

http://www.motive.co.nz/glossary/fold.php

http://www.webmonkey.com/99/41/index3a_page2.html?tw=design

[5] http://css-tricks.com/9778-screen-resolution-notequalto-browser-window/

[add table: site/source, resolution, fold, browsers]

Calculate the fold

How is the fold calculated? In a 1024×768 resolution, the screen is 768 pixels tall. On an average browser about 190 pixels are devoted to toolbars and other non-webpage elements (browser user interface elements and settings + extra toolbars from browser plug-ins). This gives 768 minus 190 = about 570 pixels

To get an estimate of where the fold could be on your site, check out http://www.foldtester.com/
Cautions with foldtester.com:

  • It’s using global internet stats  (that is, the world-wide average). This doesn’t mean the percentages you are seeing reflect reality.
  • The trend is more and more people are using desktop/TV sizes that are getting bigger, but mobile browsing is also increasingly popular.
  • In fact, your audience might on average NOT have the internet average in terms of screen resolution, browser used, etc
  • For example there might be many people viewing your site on  iPads .
  • The site says it used “internet average”. This means low resolution (like mobiles) to high-resolution (like wide-screen TV’s)
  • Importance of the fold depends on your site stats, web skills of your audience  and the presence of ‘scroll-stopper’ elements
  • As this site demostrates, on any site the fold is not on one location but

[add table: browser, how much to substract for each user type (average user, high-resolution user, old PC user) to calculate your fold for any resolution]

Further reading

http://weenudge.com/thefold/  also check the links in the right-column

Advertisements

One Response to Where is the fold?

  1. Responsive and CSS3 have changed world

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: