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.
BBC news shown at 800 x 600 resolution.

At larger resolutions you get a lot of space: BBC news shown at a 2300 pixel wide resolution, lots of white space to the left and right of the content. 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. Nomensa.com's homepage at 800 wide and 1280 wide, the narrow width shows a quarter of the content of the larger size. 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! Two screen shots highlighting that a large resolution screen can show almost all the nomensa homepage, but a smaller one has over 3 screens worth of scrolling.


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. Two screenshot of a website at 800 and 1024 pixels wide. At the smaller size the main navigation wraps onto two lines. 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. Screen shots of the same box at different resolutions. At the smaller resolution the text wraps below the picture instead of next to it.


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. Kath Moonan at the @media conference holding a large placard saying - there is no fold.
<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”>A graph of browser viewing area height against popularily, with peaks at around 590, 860 and 420 pixels tall.

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.

A screen shot with colours superimposed over the top, showing that although most people will see the top 300px, after that it doesn't matter.
<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: BBC news shown at 800 x 600 resolution. At larger resolutions you get a lot of space: BBC news shown at a 2300 pixel wide resolution, lots of white space to the left and right of the content.
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. Nomensa.com's homepage at 800 wide and 1280 wide, the narrow width shows a quarter of the content of the larger size. 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! Two screen shots highlighting that a large resolution screen can show almost all the nomensa homepage, but a smaller one has over 3 screens worth of scrolling.

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. Two screenshot of a website at 800 and 1024 pixels wide. At the smaller size the main navigation wraps onto two lines. 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. Screen shots of the same box at different resolutions. At the smaller resolution the text wraps below the picture instead of next to it.

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. Kath Moonan at the @media conference holding a large placard saying - there is no fold. 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”>A graph of browser viewing area height against popularily, with peaks at around 590, 860 and 420 pixels tall.

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.

A screen shot with colours superimposed over the top, showing that although most people will see the top 300px, after that it doesn't matter.
<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: BBC news shown at 800 x 600 resolution. At larger resolutions you get a lot of space: BBC news shown at a 2300 pixel wide resolution, lots of white space to the left and right of the content. 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. Nomensa.com's homepage at 800 wide and 1280 wide, the narrow width shows a quarter of the content of the larger size. 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! Two screen shots highlighting that a large resolution screen can show almost all the nomensa homepage, but a smaller one has over 3 screens worth of scrolling.

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. Two screenshot of a website at 800 and 1024 pixels wide. At the smaller size the main navigation wraps onto two lines. 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. Screen shots of the same box at different resolutions. At the smaller resolution the text wraps below the picture instead of next to it.

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. Kath Moonan at the @media conference holding a large placard saying - there is no fold. 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”>A graph of browser viewing area height against popularily, with peaks at around 590, 860 and 420 pixels tall.

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.

A screen shot with colours superimposed over the top, showing that although most people will see the top 300px, after that it doesn't matter.
<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: BBC news shown at 800 x 600 resolution. At larger resolutions you get a lot of space: BBC news shown at a 2300 pixel wide resolution, lots of white space to the left and right of the content. 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. Nomensa.com's homepage at 800 wide and 1280 wide, the narrow width shows a quarter of the content of the larger size. 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! Two screen shots highlighting that a large resolution screen can show almost all the nomensa homepage, but a smaller one has over 3 screens worth of scrolling.

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. Two screenshot of a website at 800 and 1024 pixels wide. At the smaller size the main navigation wraps onto two lines. 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. Screen shots of the same box at different resolutions. At the smaller resolution the text wraps below the picture instead of next to it.

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. Kath Moonan at the @media conference holding a large placard saying - there is no fold. 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”>A graph of browser viewing area height against popularily, with peaks at around 590, 860 and 420 pixels tall.

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.

A screen shot with colours superimposed over the top, showing that although most people will see the top 300px, after that it doesn't matter.
<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: BBC news shown at 800 x 600 resolution. At larger resolutions you get a lot of space: BBC news shown at a 2300 pixel wide resolution, lots of white space to the left and right of the content. 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. Nomensa.com's homepage at 800 wide and 1280 wide, the narrow width shows a quarter of the content of the larger size. 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! Two screen shots highlighting that a large resolution screen can show almost all the nomensa homepage, but a smaller one has over 3 screens worth of scrolling.

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. Two screenshot of a website at 800 and 1024 pixels wide. At the smaller size the main navigation wraps onto two lines. 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. Screen shots of the same box at different resolutions. At the smaller resolution the text wraps below the picture instead of next to it.

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. Kath Moonan at the @media conference holding a large placard saying - there is no fold. 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…

Let's work together

We believe that creating groundbreaking experiences that make measurable differences in the way people live takes a special type of collaboration. Our team designs impactful experiences by leaning on the variety of capabilities and expertise within Nomensa to ensure our solution is bespoke to your needs. We believe collaboration is key, let’s work together.

Contact us