Designing Visually Appealing Websites for Low Bandwith Audiences

Web design can be fun for highly creative and telented graphics and web designers but what should you do when you have to limit your creativity to allow for decent loading of your site?In a few third world countries, internet connectivity is still very poor and web sites do not load fast at all! I have found myself developing sites for a number of clients in this region (Nigeria to be precise) and a major factor I had to consider in my designs is speed. A survey found out that the biggest single reason visitors do not stay on a site is that it takes too long to load.As a result, I have developed some techniques over the years that I employ in deploying super fast loading sites without compromising on aesthetics. These techniques are also employed on my website, web design nigeria

1. All jpeg images to be used must be compressed in photoshop or an equivalent software. In Adobe photoshop cs2 you can use the save for web feature and adjust the settings. Care must be taken not to compress images to a noticeable point. When compression has been used excessively, some artefacts begin to be noticeable and that messes up the whole aesthetic idea.

2. Never ever use primary colours. Always mix some gray or black with your colours to generate a cool tone. Since you cannot express too much graphics, you have to make up with your colours and they must be perfect. Also non gradient colours used should be replicated in html and not imported as jpgs.

3. Utilize a lot of straight lines and avoid curves. CSS should be used to draw the lines. The whole idea is to minimise the amount of jpgs you import into your web page. An expample of how to use CSS to draw lines is shown below:td style="border-left: 1px solid #88aa4c".This gives the left part of the table a 1pixel border. The strong point of CSS lines is that you get very crisp lines and they load very fast. Jpeg lines are usually anti-aliased and look very blurry when exported.

4. Any gradient backgrounds should be brought into html by making a thin slice of the gradient and tiling it as a table background. By using this method, just that one thin slice is loaded and then replicated to cover the rest of the table. Never export a massive area of a gradient. Just a thin slice is good enough.

In conclusion, the whole idea of this process is to make your site as clean and symmetrical as possible and most if not all graphics done in photoshop should be replicated in html to minimise load.