Designing for the New Fold: Web Design Post Monitorism

Designing for the ‘fold’ has long been a priority for many Web Designers, but with so many devices capable of displaying your website, how on earth do you know where it is? Should we be worried? This article asks how important the ‘fold’ actually is, the variables at play, changing browsing habits and what you can do about it. The Death of the Fold is upon us, at last!

The Death of the Fold

Browsing the World Wide Web is no longer a task confined to desktop computers. Mobile browsing seems to be increasing day by day and many more devices such as Internet-ready televisions are becoming readily available. Brandon first mentioned it in his big yearly webtrends post, The State of Web Design Trends: 2011 Annual Edition … “The Death of the Fold” as he called it, is at last upon us.

But what does that really mean?

Because the traditional “screen” that people view the web through has undergone an explosion of variety… we can no longer expect web-surfers to be on something close to a 19″ monitor with a resolution somewhere between 1024×768 and 1280×700. Screens nowadays come in all shapes and sizes, from iPhones (and smaller phones) to 60″ HDTVs. It’s not just resolution that can vary wildly though; the very aspect ratio of a screen (even on the same device like the iPhone) can change with the flick of the wrist. Sure, web designers will always be advised to keep the most important messages of a site near the top, but with so many new ways for web-surfers to view the web, there’s no longer a defined height for where content must be above.

Before we get ahead of ourselves though, let’s kick off this article with a trip back to the old school though…

Introduction: The Old Fold

“The ideal area to place bold introductions, essential information, enticing imagery and call to action elements is above the fold…”

If you have had any graphic design education, you will likely be familiar with the term ‘above the fold’. If not, let us take a brief moment to explain.

The term was first used in reference to traditional media, newspapers to be precise. The thinking is that newspapers are often delivered or displayed folded up and the area ‘above the fold’ will be the first that the reader sees and it is therefore a prominent and important location. Eye-catching headlines and striking imagery are often displayed to attract the reader’s attention.

The phrase was naturally transferred to the field of Web Design when it became popular in the last 90′s. It is more or less the same concept, except the area above the fold is instead the area that the user can immediately see without scrolling (not as catchy, right?). This area is the ideal area to place bold introductions, essential information, enticing imagery and call to action elements. It is also the preferred space for any advertisements.

The area above the fold is the top section of a web design that the user can immediately see without scrolling.

The importance of the area above the fold seems to be supported by the ‘five second rule’ that is commonly quoted within Web Design; which states users pass judgment on a site within the first five seconds of visiting. Usability expert Jakob Nielsen has also suggested that users spend up to 80% of their time viewing information above the fold.

The three traditional fold-lines at 570, 590 and 600 pixels, shown overlaid on the Webdesigntuts+ website (scaled down to fit the post).

The importance of the “fold” over the past decade can not be overly emphasized in it’s historical context… Hotly contested debates were held in many design-studios and marketing agencies about where, precisely, the fold was. Large amounts of money were spent on market data to predict the optimal placement of ads, and entire designs were thrown out the window because they didn’t maximize the use of the “above the fold” space. The almighty fold, at the height of its importance, was defined as one of three horizontal lines at 570, 590 and 600 pixels.

Everything below 600 pixels was irrelevant, second-tier content… not worth the effort for a dignified web designer to concern themselves with.

Phooey.

Now, at this point some of you may be thinking, or even shouting (given the amount of debate this subject seems to cause) that the ‘fold’ is irrelevant and any discussion of it should be confined to the history books. The notion that a web designer is restrained to a small portion at the top-part of the screen is absurd. We would like to believe that all web users scroll and that we have the freedom to express ourselves and create a design in as much space as it takes. Some have even got pretty creative in demonstrating that people are willing to scroll.

Undoubtedly there has been many an argument between a web designer and their client as to the importance of the ‘fold’ and this may have contributed to the somewhat bad reputation it has. A client, overestimating the importance of the fold, may request everything and the kitchen sink to be squeezed and crammed into that relatively small space and the web designer will be left frustrated that they cannot demonstrate their skill for position, alignment and subtle use of white space.

The key to this issue, as with many other design aspects, is achieving a balance. Obviously, confining yourself to a small part of the screen would limit your creativity and design options. On the other hand, to disregard the idea of the ‘fold’ entirely would be a mistake, and you would miss out on a potentially powerful design technique as we will see below.

The Fold in Action

The beautifully crafted website for the Kaleidoscope app is an excellent example of designing with ‘the fold’ in mind. The large title, an introductory paragraph, an eye-catching image and call to action elements are all instantly visible and available to the user. Notice how supplementary information under the heading ‘Learn more’ falls beneath the cut-off point. The ‘fold’ has clearly been considered in the design of this website, yet scrolling down will reveal a vast amount of information and many more detailed design elements. It is apparent that the designers of the website still expect users to scroll.

You will find similar design patterns implemented across many large web sites. The importance of that first impression is recognised, yet a much larger area is fully utilized to tell a story and communicate the information they need to. The area ‘above the fold’ is often used to lead and guide to the user further down the page and to the areas the designer wants the user to see. It is indeed an important skill to have, to be able to grab a user’s attention, yet keep them intrigued enough to remain on the site and actually seek out new information and content.

It will always be second nature to include the key messages and call-to-action material near the top of a site design… but dogmatically trying to squeeze content above the fold is no longer a strategy that should chain down your designs.

If you visit the Kaleidoscope website for yourself however, you will more than likely be presented will a somewhat different view. You may be able to see more or less of the website – and here is the problem that faces every web designer. How can you design for the fold if you don’t know where it is for any particular visitor? There are many different factors that combine to determine the physical size of the area ‘above the fold’.

The Problem of the ‘New’ Fold

Web Designers are well used to designing with browsers in constant consideration. The many quirks and inconsistencies have frustrated us for years and they also play a role in this conundrum. Each individual browser will take up a different proportion of the screen depending on the size of the browser U.I and any additional toolbars. The trend with modern browsers does seem to be positive however as they appear to be occupying less space than previously. The developers of Google’s Chrome, Safari and Internet Explorer 9 have realised that there is a better browsing experience when there is little to distract users from the website itself.

Today, there is also such a multitude of monitor size and screen resolution combinations that it proves almost impossible for a ‘one-size fits all’ web design. Many years ago, it was established that 1024×768 was the most common screen resolution and this appears to be what most designers still design for. The resolution statistics from WebDesigntuts alone demonstrate the scale of the problem for designers.

Let’s take a quick peek at the browser resolution statistics for the Webdesigntuts+ site for a quick case study:

The resolution stats for Webdesigntuts+ reveals a much wider spectrum of resolutions than any single fold-line could ever account for.

“You can’t guarantee that they are using a traditional monitor screen at all.”

The graphic shows that there is a wide variety of resolutions currently being used with a majority of usage spread across six different sizes. As you can see the 1024×768 screen resolution now only counts for a small percentage, although this may have increased recently due to the IPad deciding to use this resolution.

If it wasn’t enough that you don’t really have an idea of what size monitor a web user had, now you can’t guarantee that they are using a traditional monitor screen at all. The age of mobile browsing is well and truly upon us and there are many different devices currently being used. Let’s revisit the analytic statistics for Webdesigntuts:

As you can see there are many different operating systems being used, and platforms such as Android can be incorporated into various devices. Tablet based browsing, which exploded with the release of the IPad, will only become more popular with the release of many different sized tablet-computers. Mobile devices of all kinds also pose a unique challenge for web designers in that they can be used in either landscape or portrait mode – a decision that would vastly change the position of the ‘fold’ line. Many websites are now making the effort to be ‘optimized’ for devices such as the Ipad.

Strategies for Designing for the New Fold

So with all of these variables, how on earth is it possible to know where the ‘fold’ is?

The truth is you can’t. With so many variables in play it is almost impossible to know exactly where the fold line will be. Fast-forward just one or two years and we’re likely to see even more changes to the screen environment. This all just means that the previous advice to design within the first 600px cannot be safely relied upon anymore. It would appear that striving for pixel perfection will only leave you frustrated.

The mobile devices breakdown for readers on Webdesigntuts.

A more sensible approach would be to design for general, ratio based folds that would take both landscape and portrait orientated browsing into consideration…

This would entail designing not only for the traditional fold, but also a second fold further down the page. Such a fold would take nothing away from a conventional design but would have an added bonus for those using mobile devices and tablet computers. By using an approximate ratio rather than relying than fixed pixel measurements, while it will be certainly less accurate, you should still be relatively safe.

We believe the key here is not to focus too much on the ‘fold’ itself, but rather attempt to keep your core message within a ‘safe zone’ while maintaining a quality design overall. Ideally you should test designs on mobile devices, but there are many simulators available if that is not always possible.

The best possible design strategies that adapt to a wide range of monitors will be those that have an established sense of hierarchy across the entire design. This means that the core message of a site should be apparent from just about any “scaling” of that site – and more detailed information and content should be readable in order of it’s importance on the page.

Other design principles like Typography, Color Theory, Layout, and Gestalt all play a huge role in this as well, so web designers would do well for themselves to polish up on these established practices. Indeed, perhaps one of the great new opportunities that the “death of the traditional fold” offers designers is a return to core design principles… leaving behind rigid, dogmatic, and nonsensical notions of layout in favor of age-old design theories.

• Read more about Understanding Visual Hierarchy in Web Design here.
• View our entire Design Theory Library here.

The Bigger Picture

Data from the W3 Schools website.

“…In the study, they found that 76% of users scrolled and that a good portion of them scrolled all the way to the bottom, despite the height of the screen.”

The statistics for Webdesigntuts site alone is helpful to look at (mainly because we have such detailed data on it), but it certainly doesn’t represent the entire internet, right? Even when we look at the official browser display statistics from the W3 Schools official site, a similar trend begins to emerge.

Certainly, the data from just these two sites doesn’t represent the entirety of the internet browsing audience… but by looking at the writing on the wall, it’s easy to determine that this is not just a fringe occurrence, it’s a new pattern that’s emerging. Combine this with sales of new devices and the growth of the monitor industry, and it’s rock solid ammunition for the anyone looking to dispel the myth of the traditional fold.

Furthermore, many research studies have been conducted that debunk the importance of the fold, even back when it did exist. The conclusions: even when you do use a fixed monitor size (ie: 1024 x 768), people surfing the web not only glance below the fold… they often spend most of their time there!

Conclusion

We have discussed a lot in this article so let us round up some key points.

The traditional concept of designing for the ‘fold’ appears to be somewhat outdated when it comes to modern web design. We have seen that a combination of variables and a change in the browsing methods of many people means that a fixed position of the ‘fold’ line cannot safely be established. Web users are also very much prepared to scroll; especially with multi-touch devices such as the IPad that make the task very intuitive.

However it does not mean that the ‘fold’ should be disregarded completely. The ‘fold’ can still be an effective element in any design. There can be no doubt that first impressions do indeed count in web design and this space can be used to not only capture your audience but also lure them further down the page. Reserve this area for your most essential information while reassuring your clients that visitors will still see that paragraph on their history further down the page.

With no signs that mobile browsing is slowing, an argument can also be made for designing for a second ‘fold’ line for those browsing using a portrait-oriented device. It should not be detrimental to your design in any way and will only give those using such devices an added bonus.

What do you guys think? Do you still attempt to design for the fold? Is it a case that we designers are already aware of such changes and is it the clients that we need to educate?

^{This article was originally conceived by Brandon Jones, then written and researched extensively by Shaun Cronin, and finally re-written and edited with Brandon.}