Tips and tricks on effective web design – Creating a fast loading Website

The Number 1 rule that every web designer while creating a website is to create a fast loading web site. Even if the website has a great design only very few people are going to see it if it takes a long time to load. So while designing a web site it is always essential to consider the amount of time it may take to load and try to keep it to a minimum. Try out the powerful tips in this tutorial to build a great looking as well as fast loading web site.

• Minimize the use of images – An important key to a fast loading web site is the use of minimum number of images. Though images may enhance a page make sure that 80% of your web site is not just images as this can increase the loading time. Instead break it down as much as possible to simple HTML. The load time is more important to popular sites like Yahoo, Google, Ebay, Amazon etc., which is why the images are kept limited on these sites. It would be best to keep the site design simple in order to reduce the loading time as well as increase its effectiveness.
• Optimize the images for the web - Once you have decided on the images that you need on your site, optimize them by
• Converting the images to gif or jpeg format
• Minimizing the size of the image by choosing only the required number of colours from the colour palette. The lesser the colours you choose, the lesser the size of the image will be. In order to aptly optimize the image you can either use online tools like Gif Wizard or get a recommendation on how to cut down the size of an image from an expert.
• Use Tables creatively - Tables load very fast because it is just HTML code and can be used in the homepage, menus or anywhere you like. So using them creatively can reduce the loading time of your website as well as provide some great looking designs. To get a clearer idea, check out our homepage and our menus to see how we have used tables creatively in our site.

Read more on

Using HTML Tables Creatively

• Cut down the use of animated gifs - Use animated gifs only if it is absolutely necessary as they take a long time to load and can also be very irritating. If they are necessary to draw a visitor's attention to a particular section of your site, use small animated gifs which would reduce the loading time of your website comparatively.
• Design simple icons - Instead of using big, bulky images, use simple and small icons that add a little colour and draw the attention of a visitor. See how we have used small icons in our homepage to highlight the main sections of our site.
• Use background images instead of big images whenever possible - This is a very useful tip for headers and footers. Instead of using an image of width 580, which is a uniform design, you can use just a part of it as a background fill. This helps to reduce the size of the web page, as the image used is small. The code of the image will look like this: <tr background="/images/header_backgroud.gif" width="100%">
• Try out CSS Styles - Since a CSS style is simple HTML code it also loads very fast. You can also use CSS Styles to create some cool text effects like cool rollovers to enhance your website. Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect.
  Check out our CSS Styles tutorial for more cool tips on CSS Styles
• Limit the Use of Flash - Never make your entire site using Flash. Though it may look great, it would take hours to load, which can really put off visitors. Therefore either restrict or minimize the use of flash in your website. If you do want to use Flash, use it within an HTML site and make sure it loads fast.
• Design most of your site in HTML - Try to design as much of your site using HTML. You can create great designs by just using HTML code, tables, CSS Styles and simple fonts, at the same time keeping the use of animated gifs, Flash, bulky images etc. to a minimum
• Keep checking your load time - Before you decide on the final design of your web site, check its load time on NetMechanic. This site gives you a free analysis of your web site, which can be used to improve your site till you get a report of good loading time.

1. DHTML Menus – Use of navigation menus

• Use navigation menus to organize your links - If you have a large number of links under categories and sub-categories you could use navigation menus to organize your links. There are many cut 'n' paste scripts available on the Net that can help you create great navigation systems. A popular resource centre is SimplyTheBest.net, where you can find tons of useful navigation menus that are very easy to install on your site.
• Take a look at other sites to get some ideas on good navigation techniques.
• Use eye-catching visuals and small chunks of information to draw visitors to click on a link.
• Take a look at our portfolio to see the clear and consistent navigation we have designed for our clients, which help visitors find what they want with speed and ease.

Keeping these basic points in mind, you can go ahead and design an effective navigation system for your site.