The Fold
Many of us are probably familiar with the idea advanced in the early days of the Internet, that most users don’t know how to scroll through a website. Today that seems pretty unbelievable. The vast majority of websites, and indeed many of the most regularly visited, not only favour scrolling but to a large extent rely on it for navigation. So have the rules of the so-called ‘fold’ changed since the Internet’s inception? And what role should it play in decisions made regarding a website’s design today?
Viewing the web can be a very personal experience. Depending on your very own choice of browser, monitor or resolution, the web can look a very different place. If you’ve ever for some reason been forced to view one of your regularly visited websites on a much lower resolution monitor, for example, you’ll know what I mean. What once appeared spacious and easy to read suddenly seems squashed and cluttered. The cute little thumbnail images now take up good chunks of room and force you to scroll around them to get at the text. And should that site employ a fixed-width design that is wider than the current resolution, even more space goes to waste with the appearance of a side scrollbar.
Of course, well designed websites take their average readership into account, using accrued data to work out profiles that fit the viewing set up of their users. But finding out where that ‘fold’ lies can nevertheless be a tricky business, even armed with knowledge regarding the average resolutions used, given the various toolbars and other gimmicks most browsers can come equipped with, to say nothing of the size of the browser window, the workspace of the operating system, or whether the site will be viewed ‘zoomed’.
So does the fold even really matter? Jeff Atwood over on his blog at Coding Horror posits that scrolling fast became something of a litmus test for web users. Scrolling soon proved to be a prerequisite skill for web surfing, and thanks to the principle of survival of the fittest, every web user today should be a scroller. Yet old ideas die hard. Trying to cram as much content as possible into the top section of a web page is pretty common practice even today, and more graphically inventive or intensive preamble to content hidden beyond the fold are more of a rarity than they perhaps otherwise would be. The fear that content not immediately displayed on a page will go unread then, is perhaps given users’ willingness to scroll unfounded. But just because everyone is in the position to do something, doesn’t necessarily mean they’re going to do it.
As the research over at cxpartners points out, scrolling is par for the course, and in fact having content that is obviously cut-off or clearly points to content further down a page increases the amount of time users will spend scrolling through it. That isn’t to say there aren’t any pitfalls to avoid, and one thing that can seriously distract users and disguise potential content hidden offscreen is the use of strong, horizontal lines. Particularly if these should ever happen to coincide with the bottom of a browser window, such lines can act as a mental barrier, as users expect the content to end. A second pitfall can be the use of scrollable content embedded in the page, which remains hidden from the main scrollbar, an tool often used to gauge further content according to the results.
But the most important conclusion drawn from the test is that sites should avoid trying to cram too much content above the fold. Assuming that users will be drawn in by their first impressions of a site is one thing; concluding that they will only care for what they first see is entirely another. There are things that certainly belong in that noble place above the fold, depending on the type of site. A site logo/link to the home page, the main site navigation, the search form, a link to the checkout, the login form/registration link. We’ve come to expect that such staples of the web find themselves in an easy to find location above the fold. Sites which break these conventions, however, are not unheard of.
The original reason I started this little post was seeing Chris Coyier’s personal blog redesign detailed over at CSS-Tricks. I was particularly impressed by the use of custom designs for various pages, such as this one and this one. What does this have to do with the fold? Because with this miniature resolution I’m using, there’s little content to see on first impressions, and only the content of the entries themselves to draw the reader further in. What made the pages particularly inviting, however, was certainly this attempt at customisation, a move towards giving each of his entries a more personal look suited to the content it is delivering. This step towards a magazine-style approach to displaying content is, in my eyes, a very welcome one. Of course, Coyier’s site is a personal blog and can perhaps be forgiven for breaking the other ‘rules’, ((In my opinion the site suffers from a poor navigation and a lack of search functions.)) but I hope his reckless approach to the fold, along with throwing more colourful and individual content out into his posts will prove to be a success and an inspiration to others.