Web Site-Layout-Tips & Tricks
The importance of a good site layout
Websites are judged by content and layout. How good your content maybe, if your layout is not appealing, visitors will not be eager to come back. Everyone is not born with a quality of creating layouts that are pleasing to the eye. If you have been to different Yahoo groups, you might have found various color combinations that the group owner has chosen. Some of them have red backgrounds with blue colored text creating a blinding effect. Although Yahoo provides all the possible color combinations, some choose the wrong colors.
Points to consider while designing a website layout
Website design is not a one time activity. Almost all websites alter their layouts to give it a new and better look. Also with advancement in technology, underlying code also changes accordingly, adding new possibilities of providing a better layout.
- Keep it simple:
A simple website layout is user friendly. Do not create complex navigational links using complex scripts or images that maynot be viewable correctly in different browsers. Also search engines cannot index the site properly if complex navigation is involved. Minimize the use of bulky images which take long to load. Use smaller icons to attract visitor's attention instead.
- Readable font size and face:
Use a standard font size of "-1" (11 or 12 pixels if using styles) so that visitors can read the content easily. Select a professional looking font face (Verdana, Arial, Helvetica, sans-serif are very common). Avoid using fancy fonts like Comic Sans
(unless it is a personal website). Use appropriate spacing between lines (12 or more pixels) to avoid clumsiness.
- Use web safe eye pleasing colors:
The choice of colors may reflect one's personal taste. Every webmaster or designer wants the color combination that he/she likes best. However, it is a wise decision to get feedback from users or friends about what they feel about the color combination
of the website. Use web safe colors whenever possible.
- Webpage Dimensions:
One important aspect of layout is keeping track of dimensions of a web page. Most successful commercial websites limit the width and height of the webpage so that the important content of the webpage lies within the top 600x600 viewable area without scrolling. To avoid a horizontal scrollbar, set the page layout to expand and shrink with changes in browser window size. Sometimes this interferes with image and text positions relative to each other and throws the layout structure out of sync. The best choice is to limit the width by placing a table with a fixed width of 750 or 775 pixels. See the layout of this web page for an example.
The page height should not be any more than 4 scroll lengths. Limit the content of the page and if more content needs to be added, move it to a new web page. Provide a navigational link to the next page and a link back from the second page. This will also increase your web site's page views (adding more advertising space).
- Limit File Size:
Webpage size is defined by the total size of text, images and supporting files (including javascript, flash etc.) that is downloaded from the server to view a webpage. Page size is very critical for high volume websites because of high bandwidth needed. However, it is also very important for any other site in order to keep loading times to a minimum. Most of the population on the internet use a slow 56K modem to access the internet. And smaller page sizes load faster. If you look at some very high volume websites like Yahoo.com and Google.com, they hardly have any images, making their site load faster.
There is a trade off between making your webpage look nicer with lots of graphics and making it faster to load. The rough target for page size should be below 35K for at least the cover page. However, for e-commerce sites, it is often not possible because they have to present multiple product images to attract attention. As a general rule of thumb, a visitor will leave your site if the loading time is more than 8 secs.
Tips & tricks
- Extract Javascript code and styles from within the html page to external .js and .css files. Create a link from each html page to these external files. Browsers download these files only once and caches them on the user's computer. This will reduce the size of the individual html pages.
- Use server side includes for centralizing common content. Read this article for more details.
- Use a background which creates a contrast to the font colors and graphics. Look at media sites like movies.com for an example. It uses a dark background with lighter fonts in order to create a theatre like setting. However, the site is easy to read and navigate.
- Check regularly for broken links. Using a link checker or checking the list of 404 errors (File not found) in your website logs (or stats) will help maintain site links. Maintenance of links to external sites can be centralized using link tracking tools
