Otaqui.com Blog

Posted on 07/02/2009. By Pete Otaqui.

Despite suggestions to the contrary, we web developers still very much have to work with the concept of a “fold” – that is the part of the page that is immediately visible when a user visits your site.

This is usually considered to mean “before the user has to scroll down” but can also just mean “the stuff they look at first” even if they have a really big monitor. This gives us a slightly more useful thing to think about – the first “batch” of content that will be at the top of the page, and incidentally will be the entirety of what a considerable portion of our users see first.

So, I have a suggestion to all the web *designers* out there to mull over: introduce the idea of “Two Rows” in your design. By having a single row that is for content “above the fold” and a second one for everything below, we can get the absolute minimum “perceived load time” of the page.

Let’s have a look at a fairly standard wireframe of a page:

This will be more or less as you expect, a header and footer with 3 (or however many) columns in between.

Now let’s have a look at a wireframe designed for the fold:

As you can see, I’ve changed the structure to split the main content completely into two distinct rows.

The advantage here is that we developers can do several things to make the first row appear as quickly as possible:

1. Firstly we don’t have to do anything. The source order itself will mean that the content of the first row is loaded first, meaning that you won’t have that all-to-common “pause for the right-hand-column” to load.
2. Place all styles at the top of the page, and all required scripts between the two rows – this will make the page appear correctly styled and have javascript-driven functionality available.
3. Taking the point above to a further degree, we could in fact *split* the javascript (and possibly even css) files, which is normally a abad idea, to provide only the functionality required for the “first row”, and then load other resources afterwards. This is a rather extreme approach, but could help if your site really needs the content “above the fold” to be absolutely as fast as possible even at the cost of overall page performance.
4. With a dynamic site, we can flush the buffer after the first row, and leave any further processing overhead to happen after that much of the page has been sent to the browser.

There is no real need for the actual design to exagerate the rows in the same way that the wireframe does – but you would need a horizontal split of the content at that point to make things as easy and flexible as possible. This limitation can be overcome with CSS, and possibly javascript, but this will rapidly become fiddly and hard to maintain.

To demonstrate what I mean, I took the Guardian’s homepage, and reworked it (as a graphic) to have the horizontal split required for Two Rows, without really appearing much different to the current, pure-column structure.

Before:

And after (with the “second row” being slightly greyed out):

This example worked fairly well in terms of “hiding” the row lines since some things are bumped right up to them and others have varying amounts of whitespace either side.

I must admit that I’ve never implemented this technique, but I certainly believe that it could have significant impact for a site like the Guardian that has a large amount of content “below the fold”.