A couple of blog entries ago, I mentioned that I was prepping a revamp of the main site, blog and Exchange application.

One of the key drivers behind this was that the Exchange application was going to have a different user experience than the blog and main site, and that I wanted to at least force some consistency among the sites.

Another reason why I wanted to to do this was to get the main site up to modern coding standards. I threw the site together using tables, mainly because I could get the layout grid up and running in a very short period of time.

My current site layout uses an overly simplistic 2 column grid, which really limits how I present my content, especially what appears "above the fold".

As a proponent of typographic grids for report design, I felt I needed to eat my own dog food, and the new sites will use a 12-column typographic grid, with table-free code. As long as you're using a relatively modern standards-compliant browser, the site will render nicely.

I'll also be validating my code with W3C standards to make sure the site is fully compliant.

Since I also happened to learn JQuery with a dashboard challenge that I worked on, I'll be adding JavaScript interactivity to the front page only. A little goes a long way, so no need to overdo it.

The best thing is that most of the changes are css and layout-based, so the work isn't even remotely as intensive as getting the first iteration of the site out.

Cool Infographics had a cool entry on visualizing the structures of web sites.

I decided to run it on my site's front page.

The dots are color coded:

• Links (the A tag)
• Tables (TABLE, TR and TD tags)
• DIV tags
• Images (the IMG tag)
• Form Elements: (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
• Breaks and Quotes (BR, P, and BLOCKQUOTE tags)
• HTML tag, the root node
• All other tags

There's an surprising node of high complexity at the top, which is actually the structure of my news stream.