The Evolution of Themebot

Creating Websites with Clean Code

A few weeks ago, upon recommendation by several visitors, I redesigned the header area for Themebot. But the lingering problems with the XHTML / CSS code and the table-based layout were still bothersome. I decided to do a little Spring cleaning and completely gut the template to make it a 100% CSS-based layout.

Themebot uses the Joomla content management system for the main site. Of course, the core output produced by Joomla and third-party components still uses tables, but at least the template itself is CSS-based. Apparently, developers will be able to easily override the core output in Joomla 1.5 and I'm looking forward to the stable release.

When looking for a template to use as a starting point I had specific requirements in mind:

1. Three columns
2. A fluid center column
3. Collapsible right and left columns
4. Optimal space available for viewing content.
5. Attractive graphics used for the layout, of course.
6. Lots of whitespace

I started browsing around for templates and came across one called Mitra. This template fit all of my requirements, except that the header area was too big. I really liked the graphic design done on the modules and there was only one XHTML validation error.

It took some work to redesign the header area and the first revision of Themebot ended up looking like this: Themebot Rev1. After spending a lot of time in the code for both the index.php file and the CSS file, I really wanted to have a go at making the layout CSS-driven and removing any unnecessary style properties.
But, there were more important things to take care of and the template was functional so I left it alone for the time being.

Finally, last week I got around to reworking the template. This was a bit challenging due to the nature of the template. Here are the improvements that were made:

• The code is a lot leaner and organized much better in both the stylesheet and the index.php file. It is easier to work with when I need to change something.
• The graphic files used for the center column border were removed. It was a big hassle to try and rebuild that part without using tables for layout,and I decided they were unnecessary and wasting bandwidth.
• Source-ordering is optimized for search engines. The div containing the header with links to main areas on the site is followed by the div containing the content.
• All HTML attributes and inline styles were removed.

By implementing these changes, I have noticed that pages load a lot faster and there are less display errors while the pages are loading. Furthermore, the design degrades gracefully when viewed in Internet Explorer 5. By the way, if you are still using IE 5.5 or older please consider upgrading to either FireFox, Opera, or another modern browser.

Themebot may not be the most attractive design, but it excels in functionality. I will include the code for the index.php files used in the first revision and the current revision of the Themebot template in the forum that discusses this article. Who doesn't love looking at code? :P

Anyhow, I think this is a good example of what is possible when using clean code and CSS-based design. Let me know what you think.

Comments