“Light” Graphics

So many times I have designed website template mock-ups for a client and then realized the graphics would probably be way too heavy in terms of download time. I would then begin the process of “cutting back” on the visuals hoping the look remained as sparkling as it did the day before. Often times, it wasn’t.

I needed a solution to the problem, and there was one – table background colors. Tables are wonderful things on their own for many reasons, but where they really come to the rescue is with colors. If you find that your pages are too “graphics heavy”, and you are forced to cut some of those bit map graphics, you should consider filling in some of the blank areas with table background colors. Not only can this technique spice up your page, but it can also greatly decrease the amount of time it takes for the page to load if used correctly.

For example; have a look at the Home page for Metamend.com. There is a lot more going on here than meets the eye. For instance, all of the left navigation aside from the icons, is designed using nested tables [tables inside other tables] and transparent GIF’s. You will notice the bottom of each section is beveled – I accomplished this by creating a one color GIF in this shape and then making the entire thing transparent. I then assigned the table cell <td> with whatever color I wanted it to be and voila – a very lightweight graphic.

Also, all of the colored borders were made via nested tables. At the top of the Home page is a graphical “console” navigation which is really a series of bit map graphics with a twist – the main body is transparent with a table cell <td> assigned to the appropriate color. This doesn’t decrease download time, but rather ensures color matching across different browsers.