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.


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.
<br? 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…

<a <href=“/blog/sites/default/files/blog/assets/uploads/2009/11/clicktale-fold.gif”>

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.


<br 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…

<a <href=“/blog/sites/default/files/blog/assets/uploads/2009/11/clicktale-fold.gif”>

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.


<br 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…

<a <href=“/blog/sites/default/files/blog/assets/uploads/2009/11/clicktale-fold.gif”>

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.


<br 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…

<a
<href=“/blog/sites/default/files/blog/assets/uploads/2009/11/clicktale-fold.gif”>

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.


<br 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…