Liquid Layouts Explained – The Fold

This is the first of two articles aimed at explaining screen resolution and liquid layouts for non-developers / designers. As part of that I’ll cover what the fold is, why it shouldn’t matter, but often does. With the next article I’ll release a little presentation anyone can use to explain these concepts.

I’ll also cover why we (Nomensa) are changing our policy on layouts.

Resolution

The size of what you can see on a screen is defined in pixels. Different screens have different amounts of pixels they can show.

It’s usually expressed in X / Y pixels, e.g. 1024 x 768 pixels (px) is the most common screen resolution at the moment.

There’s a massive variety of screen sizes out there, new ‘smart’ phones have about the same resolution as early TV style monitors, about 640px wide.

A new 27″ screen can be 2560px wide, 4 times the width. You could fit 12 of the 640 x 480 screens on one of these new monitors!

BBC news at different screen sizes

The BBC news site (familiar to millions) is a good example of a fixed-width design.

The screen shots below are taken at sizes from 800px wide to 2300px wide.

Screen size vs resolution

Another key piece to understand is that screen size does not equal resolution.

For example, someone with a 27″ monitor could set their resolution to 1024 x 768, making everything look huge (but jagged), as there are less pixels per inch.

At the other end of the scale, the iPhone has a lot of pixels per inch, and will fit the BBC page into a 2.5 inch wide screen.

Another thing to realise is that not everyone keeps their browser at full screen. Although realistic data is scarce, there seems to be a tendency for people with larger screens (or OSX) not to browse at full screen. For these users their browser will rarely match the common screen resolutions, however, for the purpose of this article we’ll stick with the traditional sizes.

What is the fold?

“The fold” is a newspaper term from where the paper was folded and put on a stand. i.e. Above the fold is what the punter could see before buying it.

However, on the web, the fold is not in one place! Taking the BBC example again, the fold point is twice as far down the screen at a resolution of 1280 x 1024 compared to 800 x 600.

And yes, I realise that 1024 isn’t twice as tall as 600, but remember that the browser controls at the top take a fixed amount of screen estate, so take relatively more space at smaller screen resolutions.

Clicktracks did some research, and found that even the most popular sizes (570, 590 and 600 pixels high) account for less than 26% of the total.

On the web, the ‘fold’ is more of a gradient, and there is really only a small area at the top that you can be sure is seen without scrolling.

This diagram of the various fold points is still only a guess, for example, it assumes a square ratio (4:3) of traditional monitors, however, many laptops and monitors now are wide screen. The average is probably more skewed to the middle of the range, but even more blurred.

Fixed layouts and the fold

For a fixed layout, where the fold is for different screen resolutions is fairly straightforward, it only depends on what height your browser window is. However, at the lower end of resolutions you will get horizontal scrolling:

At larger resolutions you get a lot of space:

Neither is catastrophic, so long as you know about them, and the advantage is the predictability of how the design looks.

Liquid Layouts

Liquid design means that the layout flexes with the browser window, shrinking at smaller sizes, expanding into bigger spaces. In practice, you do have to put limits on the minimum and maximum size that you allow for.

Nomensa‘s homepage is a good example, where we’ve even adjusted the number of columns depending on the width.

Where the ‘fold’ is located is fairly predictable for a fixed width layout, but for a liquid layout like Nomensa.com the fold point gets further away the narrower the window!

Text wrapping

Something that affects liquid layouts more, is that text tends to wrap, pushing things down.

A common example is using a horizontal navigation, and having the options wrap at smaller sizes. This pushes the whole page underneath it down.

It can also affect how boxes within your page work, especially if they have fixed size elements like images.

When you have a variable sized box with (variable size) text, next to something that’s fixed size, there will be gaps at certain points.

Does the fold matter?

Typically, people want 93 things on the homepage, and they all have to be above the fold!

However, as shown above, many developers don’t really believe in the fold as a relevant concept for the web.

Whilst it is important to prioritise important information, it is false to assume that people don’t scroll (vertically).

In fact, ClickTale found that 76% of the page-views (for pages with a scroll-bar), were scrolled to some extent. 22% of those pages were scrolled all the way to the bottom.

“The most clicked on item on the TMZ homepage is the link at the very bottom of the page that takes users to the next page. Note that the TMZ homepage is often over 15000 pixels long – which supports the ClickTale research that scrolling behavior is independent of screen height.”

So, there is no fold, and people scroll, why does the type of layout matter?

Well, if you choose a liquid layout, how the design looks is far less predictable, and the amount of content people see at one time varies massively. It is almost a logarithmic scale because the narrower the width, the taller content gets.

With all this unpredictability and hassle, are liquid layouts worth it? As a company that has always aimed to make the most accessible websites possible, will we continue to use liquid layouts?

Check back next week to find out…