Web Design
The Cure for L-O-N-G Web Pages
How many times have you visited a web site lately that had a page so long you thought it would never quit loading? Or you scrolled so much you completely exhausted your mouse? Or worse (for the site owner), you left!
It seems I'm seeing this technique more and more these days, in relation to what I call "cyber info-mercials" which are popping up everywhere selling you little known secrets about a topic you cannot get anywhere else.
A good rule of thumb to remember: "If you put ALL your web content on one page, your visitors are more likely to leave quicker." Massive amounts of information all at once causes "information overload". Many folks (like me for example) leave really fast. If the information overload phobia isn't the cause, then the reason is likely that they feel they are being spammed. Such practices do not reflect well on the creditability of the site owner and often has the opposite effect than what the site owner was trying to achieve. Site visitors instantly feel uncomfortable. Over the years, I have literally observed the way many folks search and surf the web. They don't read, they skim and scan. If they have to scroll too much regardless of how trivial a thing it may seem to be, they will leave. Overblown page content that rambles on will blow your visitors right off the site. :)
Occasionally it may be necessary to put lengthy information on one page. If you have a page that is excessively long, and you simply cannot split it up for whatever reason, give your visitors' mouse a break. Include "to top" anchors or other quick "same page" anchor links. How?
The HTML code for "top of page" anchors:
<a href="#top">To Top</a>
Huh? That's it?! Yes. Place this code at regular intervals on your page and your visitors are more likely to stay longer.
Another technique is to place anchors to a section on the same page. For example, let's imagine my page is lengthy, and I have it divided into five sections. As a visitor, I'd like to get to Section 4 right after I read Section 2 without having to scroll down five miles. Give your visitors that option. Instead of only using a "to top" anchor, use a named anchor menu bar such as the one shown below. Change the section names to something more meaningful that will quickly tell your visitors what they will find there, ie: Product Overview - Product Add-ons - Ordering Info - Return Policy - Etc.
Place the bar between each section. It is common to right justify it and perhaps make it a smaller font size in a different color. We recommend using external CSS (cascading style sheets) to control the font properties. (Read our articles regarding CSS). Below is what the source code for the bar looks like. You can name your sections and section anchor links anything you like:
<p align="right"><a href="#section1">Section 1</a> - <a href="#section2">Section 2</a> - <a href="#section3">Section 3</a> - <a href="#section4">Section 4</a> - <a href="#section5">Section 5</a> - <a href="#top">To Top</a></p>
One more step. Place the HTML code for the corresponding anchor at the beginning of each section. When your visitor clicks on a link in the anchor menu bar, it will take them to the beginning of that section. For example, the code to place at the beginning of Section 1 would be:
<a name="section1"></a>
|
