Web Page Layout 101 - Part I

Many newbie webmasters make mistake when designing and laying out the content of their web pages. Most of them try to put in as much as possible in one page. For example, they tend to have lots of graphics, URL links are scattered almost everywhere and there are probably have 10 different types of font, color and size combinations. Also, some make use client side scripting excessively like menu, mouse over effect etc.

Website layout plays a very important role in keeping visitors. When I say layout, it also includes:

• Page Width
  
• Site Navigation
• Graphics
• Contents Section
  
• Text/Font Size
• Client side scripting
• Cross Browser Compatibility
  

Let's take a look at each of those in the list.

Page Width
It has been a trend ( at least it looks as if it is anyway), most popular websites are simple and straight forward. The page width is limited to just below 800 pixels wide. Some sites limit the width to just below 1024 pixels. Look at these figures (800, 1024 etc), does it relate to anything? Okay... it is the page width of the users computer screen. Some popular size includes 640x480, 800x600, 1024x768 and 1280x1024. And some weird size screen (like my Dell Latitude D620) is 1440x900. It is known as screen resolution. The height is not very important. The width is critical here.

In general, these popular web sites designed their page to suit the visitors screen. It is very annoying if you have to scroll your browser to the right just to read one line of text. Then to scroll back again when going down to the next line. Your eyes rolls from left to right, and wait for the scroll, read some more and move to the left again.... It makes reading so unpleasant. Yes, some of your visitors will just look somewhere else regardless of the content - really good or not. Make your visitors comfortable if you want their repeat visit. Limit it to a comfortable width.

So, making it smaller technically is a lot better. But too small a size is also not very good. You won't be able to put extra stuff in there like navigation bar, advertisement and catchy graphics for example. So, very seldom you come across web sites with limit of 640x480. It is too small to begin with and not many visitors have that resolution anymore. 800 pixel wide is just nice and 1024 pixel probably good choice also. From my experience, I would stick to 800 since there are still a lot of visitors have this screen resolution. You need to check your web log or web analytics tools to find out more. More about this later.

Site Navigation
When your visitors come to your site, most probably they are referred to by a search engine. After looking at the page, they might not get what they are looking for. At this juncture, think of the next available options. What do you have to offer on the page? Another similar page on your site or some links that is looks or sounds similar to what they are looking for. If this two options is not available, then your visitor will just abandoned the page and look somewhere else.

This is where site navigation come into the picture. If the visitor could easily locate the links to other pages, the chances are they might browse to another page or few more pages just to find out the content that they are looking for. So, make your site navigation easy to find. Use conventional button links or text link on the side (left or right) and either top or bottom. Also, put it nicely sorted with a clear text and theme.

Use simplified menu system. First, it should link back to the main page or home page. Second, it should have links to next pages in the same section as current page. Thirdly, it should have links to entry page of other section. To make it clearer, have a look at this site, http://info.asianbatik.com. This is what I mean by simplified menu. BTW, the site is still under construction and far from complete.

All navigation menu system relies purely on style sheet. It is cross browser compatible. (More on this later). I first make a mistake of using fancy pull down menu using Javascript. At one stage, I am using slide in / out menu from the side bar. Not many people know where to find the menu. The visitors have to try clicking here and there and it really annoys them. Bear in mind that not all of them are web savvy or literate. Frankly speaking, some of them still does not know what is HTML !. So, think of your visitor.

Finally, if the visitor still cannot find what they are looking for on your website, you still can capitalize on this. What I mean is, refer them to something that they might be interested. In this sense, link exchange is good but today, most sites would have its own affiliated site or use infamous Google Adsense advertisement. It is good because the ads is targeted. Meaning, the links given by Google Adsense are based on the keywords that the visitors are looking for. You help the visitor and at the end, Google rewards you for referral. It is a win-win situation. And to me, it is not exploitation if you do it properly.

We will continue this in second part later on this week.