Does the fold still have a hold?

John Murray

If you have more than a passing relationship with web design you’ll be familiar with “the fold”. If you’ve less than a passing interest in web design then you’re unlikely to be familiar with the concept of “the fold”, either way you could be under its spell.

The fold refers to the top section of a website – the part you see when the page first loads, before any scrolling takes place. It’s taken from the way large newspapers used to be folded on shelves or on the newsstand; the top half of the page would face front, showing the logo, the title, the main headlines and stories. Anything below the fold would be face down and hidden, so publishers and designers would have to ensure the good stuff was the above the fold in order to attract the attention of passers-by and potential buyers.

During the web’s infancy and its attempt to find its feet as a design medium in itself, a lot of cues would be taken from the print industry and designers would attempt to construct a website using the principles of paper-based graphic design. Generally, a lot of these conventions make perfect sense when transferred across the web; logo at the top/top-left, text copy displayed in columns, small-print in the footer, etc. With each new generation of common computer monitor size and resolution there was an unspoken, agreed fold height that designers would work above. However, how do we guess the fold within the modern dichotomy of both mobile and large-screen web?

The shift towards mobile browsing

The number of people browsing on tablets, smartphones and other non-desktop devices is rising steadily; we can no longer put all of our design eggs into a single browser-size basket. Content that sits nicely above the fold on a large monitor at home will be cut off on a laptop screen, and will take a few swipes to scroll to on a smartphone. Trying to estimate and design within the fold becomes futile. Instead, now that we’re constructing our websites with a responsive design to control the layout at differing screen widths, we should be less sensitive to a fixed cut-off point, and simply be mindful of the optimum opening content in different environments and adjust accordingly.

The trick isn’t to shove all of the important stuff above the fold, but to ensure that the right stuff is shown first, to encourage site exploration. Mission statements, product summaries or preview images will spark a user’s interest, hopefully decreasing bounce rates. A call-to-action or a contact form could function just as successfully in the footer if a natural journey down is cultivated. We need to get under the skin of our users, determine who they are, what they’re expecting to see and how to give them the best possible journey navigating a site. Users will respond better to gentle guidance than to shouting.