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:
- 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.
- 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.
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.
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”.