A Quick Tip: Webpage Simplification

admin — Sun, 07 Feb 2010 13:07:03 +0000

If your web pages have a large number of nested div and table tags you may end up wondering whether they are all really necessary, and whether you might not be able to get by with less. While you could run through your code and assess each one individually and decide if it can be removed, there is a quicker, easier way to approach the problem. Simply add the following right at the end of your CSS definitions:

table { border: 1px solid red; }

div { border: 1px solid green; }

This will draw a border round each div and table on your page and let you visually see which are really necessary. It also works better than looking at each table / div in turn as often each seems necessary; it is only when you look at the big picture that you see that two or more can be combined.

As an illustration, here are the before and after screenshots when I applied this to the Calcatraz homepage. The excess tables / divs can be seen in the before shot (click on the image to see it full size). Notice how I’ve been able to two of them in the after shot, leading to shorter, cleaner html, with more of the presentation being handled in CSS where it should be.

Before:

After:

Calcatraz Blog » simplify

A Quick Tip: Webpage Simplification