Layout Tips and 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 comeback. Everyone is not born with a quality of creating layouts that arepleasing to the eye. If you have been to different Yahoo groups, youmight have found various color combinations that the group owner haschosen. Some of them have red backgrounds with blue colored textcreating a blinding effect. Although Yahoo provides all the possiblecolor 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 altertheir layouts to give it a new and better look. Also with advancementin technology, underlying code also changes accordingly, adding newpossibilities of providing a better layout.

Keep it simple:
A simple website layout is user friendly. Do not create complexnavigational links using complex scripts or images that maynot beviewable correctly in different browsers. Also search engines cannotindex the site properly if complex navigation is involved. Minimize theuse of bulky images which take long to load. Use smaller icons toattract visitor's attention instead.

Readable font size and face:
Use a standard font size of "-1" (11 or 12 pixels if using styles) sothat visitors can read the content easily. Select a professionallooking font face (Verdana, Arial, Helvetica, sans-serif are verycommon). Avoid using fancy fonts like Comic Sans (unless it is apersonal website). Use appropriate spacing between lines (12 or morepixels) to avoid clumsiness.

Use web safe eye pleasing colors:
The choice of colors may reflect one's personal taste. Every webmasteror designer wants the color combination that he/she likes best.However, it is a wise decision to get feedback from users or friendsabout what they feel about the color combination of the website. Useweb safe colors whenever possible.

Webpage Dimensions:
One important aspect of layout is keeping track of dimensions of a webpage. Most successful commercial websites limit the width and height ofthe webpage so that the important content of the webpage lies withinthe top 600x600 viewable area without scrolling. To avoid a horizontalscrollbar, set the page layout to expand and shrink with changes inbrowser window size. Sometimes this interferes with image and textpositions relative to each other and throws the layout structure out ofsynch. The best choice is to limit the width by placing a table with afixed width of 750 or 775 pixels. See the layout of this web page foran example.

The page height should not be any more than 4 scroll lengths. Limit thecontent of the page and if more content needs to be added, move it to anew web page. Provide a navigational link to the next page and a linkback from the second page. This will also increase your website's pageviews (adding more advertising space).

Limit File Size:
Webpage size is defined by the total size of text, images andsupporting files (including javascript, flash etc.) that is downloadedfrom the server to view a webpage. Page size is very critical for highvolume websites because of high bandwidth needed. However, it is alsovery important for any other site in order to keep loading times to aminimum. Most of the population on the internet use a slow 56K modem toaccess the internet. And smaller page sizes load faster. If you look atsome very high volume websites like Yahoo.com and Google.com, theyhardly have any images, making their site load faster.

There is a trade off between making your webpage look nicer with lotsof graphics and making it faster to load. The rough target for pagesize should be below 35K for at least the cover page. However, forecommerce sites, it is often not possible because they have to presentmultiple product images to attract attention. As a general rule ofthumb, a visitor will leave your site if the loading time is more than8 secs.

Tips & tricks
Extract Javascript code and styles from within the html page toexternal .js and .css files. Create a link from each html page to theseexternal files. Browsers download these files only once and caches themon the user's computer. This will reduce the size of the individualhtml pages.

Use server side includes for centralizing common content.
Use a background which creates a contrast to the font colors andgraphics. Look at media sites like movies.com for an example. It uses adark background with lighter fonts in order to create a theatre likesetting. However, the site is easy to read and navigate.

Check regularly for broken links. Using a link checker or checking thelist of 404 errors (File not found) in your website logs (or stats)will help maintain site links. Maintenance of links to external sitescan be centralized using link tracking tools.

Tips and Tricks on Effective Web Design
Web design doesn?t have to be as tough as some people make it. Here are some handy tips that will help you speed up that project and avoid some major mistakes.
Combined Hot Multimedia Practical Tips
In the site, Webmonkey.wired.com Francis Preve
Hacked Off With CSS?
Learn what CSS hacking is and why not to do it.
Ten Great SEO Tips
Are you afraid of competition that you see everywhere in the World Wide Web? Dont be. The following ten simple proven tips will guide you through to get ranked in search engines. You dont need to pay thousands of dollars like many companies do in order to get a high ranking. By consistently appl.....
Discover How To Make Your Web Design Easier
If you are a complete newbie in web design looking for ways how to start a site, this tutorial is just or you. Its basic, but useful.
Easy Web Design Tips
Pick an easy layout; easy to design and easy to maintain. I have wasted many hours trying to design a site that was easily three steps above my skill level. This was a complete waste of time and I promised myself that I won
Discover How To Make Your Web Design Easier
Whenever I thought of web design my face would frown, I just hated the fact that I had to do any kind of web design. I just couldnt see why web design was simple for other and not for me.
Achieving Differentiation With Your Website
Internet Marketing is not a miracle marketing strategy
Design Tips
These tips are just a guideline, dont stick religiously to them. Some may apply to your site others may not. I know I dont tend to bother with number 9, unless im making a commercial site! 1. Consistency Colour schemes, page layout, font type & size should all be consistent throughout you.....
ASP : SSI Another Way
This is another SSI tutorial written by a friend, it shows another way of looking at SSI and also shows you some new tricks and tips.