Craig Francis

Vertical Scrolling

Most people today view websites in a browser, such as Internet Explorer or Firefox. These browsers allow you to type in a website address (URL) and it will then display that page for you.

Occasionally a page is too big fit on in the browser window, so it is common practice for the browser to show scroll bars. These allow you to scroll to the bits of the page which are currently outside of the viewable area.

On most websites, most of the scrolling is done in the up and down directions, otherwise known as vertical scrolling. There are some cases that horizontal scrolling is used (left to right), but this is quite rare as most people are not used to scrolling in this direction.

Some people refer to content that requires scrolling as being "below the fold". This statement comes from printing of newspapers, where it is believed that most people only see the top half of a newspaper before deciding to buy or read it, this is usually because the newspaper was physically folded in half.

Vertical scrolling is bad

Well there is some truth in that statement, vertical scrolling can be bad - in some cases.

For example, someone who followed a link straight into a website (e.g. from a search engines result page), they should be able to see the websites logo and website name straight away, without the need to scroll. Typically the first place visitors look is in the top left to find this information, as this is where most websites show their identity. This helps the new visitor identify the website and decide if the content is relevant.

There are also other elements on the page which need to grab the visitors attention without them interacting with the website, for example the navigation bar. This is because the websites author should want a new visitor loading the website to immediately know that there are more pages on the site which could be relevant.

Although, having said that, does the visitor need to see the whole navigation bar? The answer is different for each website, as in some cases it might be perfectly acceptable to only see the top of the navigation bar, this might be enough for the visitor to locate it on the page, then if they want to use the navigation bar, they can scroll down the page to see the rest. But if the website requires heavy use of the navigation bar, then needing to scroll on every page can cause problems.

Footer links are perhaps a good comparison though, not surprisingly they can usually be found at the bottom of the page, and normally include things like a copyright notice, a link to a terms and conditions page and a few other utility links. Anyone who is looking for something they expect to find in a footer (like a site map link), should not think twice about scrolling to the bottom of the page.

Page content

Now we have considered the main website template, we can start looking at the page content.

This area should be unique to each page. But it is at this point website authors should be considering how harmful scrolling really is. In most cases having content on the page that requires the use of the vertical scroll bar is perfectly acceptable.

For example, if the page is for an article, then presumably the title and first paragraph can be seen without the visitor scrolling. Ideally this is the case, as visitors can guess that they are on the correct page without any interaction. From this point on, the visitor is reading, they are soaking up the content and, taking that it's relevant, they will continue to scroll down the page until they have read what they wanted to read (and perhaps a little more... if the content is that good).

Things to consider

Some website authors can be so scared of creating a scroll bar, they split their articles onto multiple pages. Although allot of authors do this to show as many adverts as possible, it is still really frustrating for the visitor to have to actively locate the "next" link, use it, wait for the next page and then find where they can continue reading.

You should also have noticed that most computer mice sold today come with a scroll wheel, or other device for moving up and down the page. This is mostly because vertical scrolling is so common that having an easy scrolling tool makes life that little bit easier.

Scrolling will always happen

At the moment, some website authors go by the rule of ensuring that all of their page content fits into a browser window that is maximised on a 800x600 display. They do this to "ensure there is no scrolling", as they believe that no-one will view their website in anything smaller than that.

Well there is a small problem with that statement, how about people who have installed extra toolbars? or those people who like to see more than one window at a time, so they don't maximise their browser window? or how about people who have managed to get a default screen resolution of 640x480, but have no idea on how to change it?

A growing audience that website authors should consider are visitors who use a browser like Opera on their mobile phones. With that tiny screen, it can almost be guaranteed that they will get a scroll bar.

So, instead of trying to stop vertical scrolling by cutting back the content, the websites author should just understand that scrolling will happen, and instead spend their time making sure that its good content that people want to read.

A scrolling trick

There are a few websites that have put a large block of text into a content box on the page, which itself has a scroll bar. Sometimes this has been done so that it fits visually into the design of the page. But it can also be used in an attempt to stop the main page from scrolling. Many website authors refer to this technique as "overflow auto", and some older developers may call them "frames".

Unfortunately this usually just adds to the problems. For example, if the visitors browser still is not big enough for the whole page, then the visitor will have two scroll bars to deal with - this can confuse allot of people when trying to keep track of both scroll bars.

It also makes it harder if the visitor wants to resize that box... with a browser window, that can usually be re-sized quite easily, but a content box is usually out of their control.

Lazy visitors

You should now be happy that scroll bars are perfectly acceptable, more so with the vertical scroll bar.

But it is possible to go the other way, and that's by diluting the pages content. If the websites author has something to say, and that can be said in a 3 line paragraph, hey should not pad that out to multiple paragraphs to fill out the page, as in most cases it does not add any additional value. If they do this, then it might be the case that the websites visitors get bored, or cannot find what they are looking for, and move on to a different page or website, under the impression that page did not have anything relevant to say.

Keep in mind that quite allot of people will skim read text until they find a bit that is relevant to what they are looking for. If the text has been padded too much, then it is unlikely the visitor will scan a large block of text (perhaps only the first paragraph) before they move on.

So there is still a point to cutting back text, just don't let that reason be the so called "above the fold" problem.

Any feedback would be greatly appreciated, I don't include comments due to the admin time required, but if you email me, I will reply and make appropriate updates. Also, if you would like to take a copy of this article, please read the terms this article is released under. This article was originally written Sunday 19th November 2006.