The Tasks Pro™ web site is my first XHTML 1.1 compliant web site. I think this is the way to go if you are building a new site right now (or if you have an existing site and and totally re-skinning it). Should you rewrite an existing HTML 4.x site as XHTML 1.1? Probably, if you have time… 🙂

Here are some notes and tips from the process.

I already knew how to do 90% of the things I wanted to do for the site in CSS/XHTML from various projects and my work on the standards-compliant WordPress system, but following it all the way through was definitely a good learning experience. Use Google/Yahoo/etc. and search for articles on various CSS techniques – there are lots of them out there. You can also look at the CSS of a site that is using a certain effect you want to use. However, if you do this remember that the CSS of another site is probably copyrighted and using their CSS or images is likely a violation of their copyright. Borrow the CSS technique, but apply it with your own style and images.

XHTML benefits. Once the CSS is in place, it is much faster to add XHTML content to your site than using traditional techniques because there is much less mark-up involved. The initial hit of creating the CSS and getting it just so can take longer, but I think you come out ahead in the end. Also, smaller pages load faster and use less bandwidth. More on this has already been written elsewhere.

The design process. I always start with an idea and flesh it out a little in Photoshop before I start coding. Once I have the basic shell design in place, I start mentally tagging the areas of the page and write out the template in a XHTML page. Then I write the CSS to match the tags, export any images I need and tweak and fiddle until it looks right in the browser and looks right in the code. If you make a mess in the code in the beginning, you’re just asking for headaches down the road. The design for taskspro.com was intentionally very basic and simple. I want the focus on the content and the software, not on the design of the site. Because of this, I probably avoided some potential CSS problem areas.

Use a templating system. It doesn’t really matter what system you use as long as it makes it easy for you to change the shell of the site from a single place. At some point you will discover a problem you hadn’t expected or decide to change something fundamental and you will be very glad you have a template in place. I generally custom code template functionality to fit each site I build, but they have the same general concepts in place. The alexking.org site and the taskspro.com site use similar techniques but I couldn’t interchange them. I don’t use an existing templating system like Smarty because I don’t need 95% of what it offers – just a little something to stick the content in the page and automate the navigation links does the trick for me.

Test the site in all browsers. I ended up loading browser specific over-ride stylesheets for browsers that render certain CSS poorly. This seems like the right way to handle it instead of adding browser-specific hacks into the CSS. Bad browsers are punished by having to load extra stylesheets. I have browser-specific stylesheets for IE Win 5.0-5.5 and Opera; each handles one specific issue in that browser.

URLs matter. Put some throught into what your URLs are going to look like. This is important from both a polish perspective and a usability perspective. Use terms that are common and that your visitors understand. For example, ‘taskspro.com/support/’ is a lot nicer than ‘taskspro.com/index.php?page=support’ or ‘taskspro.com/pages/support/support.html’ or ‘taskspro.com/support/name-of-support-software-you’re-using/’. I’m using Apache mod-rewrite rules to pass information from the nice clean URL to my PHP template. At some point, I’ll clean alexking.org up with this as well.

Automate your validation process. I wrote a small script that gives me individual validation links for each page and groups of 50 page URLs at a time that I can run through the batch validator. If you’re going to bother with XHTML, you might as well make sure it all validates.

This post is part of the project: Tasks Pro™. View the project timeline for more context on this post.