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 developing super fast loading sites without compromising on aesthetics.

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.

Dolapo Taiwo is creative director of UNOTECH MEDIA. Dolapo has close to 10 years experience in web development and multimedia authoring and has worked in various capacities in the ICT industry. His career has taken him through various spheres of the IT industry from web applications development, 3d graphics and animations, video technology and music production to e-learning and multimedia development. Dolapo Taiwo is a graduate of Computer Science (Engineering) from Babcock University and also possesses a series of professional qualifications.

Website: http://www.unotechmedia.com




Image taken on . Image Source. (Used with permission)

Related posts:

  1. How to be creative and find motivation for designing websites
  2. Simple HTML to Design Websites Designing
  3. Instill Life In Websites With Graphic Designing
  4. Website Designing Companies Have the Expertise to Design Perfect Websites
  5. Website Designers Can Work as Freelancers, Designing and Maintaining Websites