Over the past year, I’ve been involved in the redesign of a lot of Web sites. Depending on how the sites were originally created, some redesigns were easier than others; however, most of them were still more difficult and time-consuming than they needed to be. As a result, I made a New Year’s resolution to start using XHTML and CSS2 exclusively when building or rebuilding sites. Not only do XHTML and CSS2 result in cleaner, more efficient code, but they also improve accessibility and scalability.
I created this Dreamweaver template to help designers and developers make the leap to XHTML and CSS2. I hope that it demonstrates how much easier XHTML and CSS2 sites are to build and maintain.
Here are a few of the benefits this template offers:
- It's XHTML 1.0 Strict-compliant—By jumping straight to XHTML 1.0 Strict (instead of moving to XHTML 1.0 Transitional), you won't have to go back and rework your code.
- It's CSS2-compliant—The layout of this template is CSS2-driven, so presentation is completely separate from the content. There are no TABLE tags and no spacer GIFs.
- It meets all of Section 508's guidelines for Web accessibility—There are currently 16 guidelines specified for the accessibility of Web sites and Web-based applications. This template complies with all 16.
- It's cross-browser-compatible with Internet Explorer, Netscape, and Opera—The template works perfectly in the latest versions of the major browsers and it degrades gracefully in the older ones.
- It's small and loads quickly—The code, style sheets, and graphics all weigh in at around 18 KB.
Some things to be aware of in this template
As much as I love this template, you need to know about a couple of things before getting started:
- Coding with the DWT file—Because the template is so dependent on external style sheets, you can’t really get a sense of what the page will actually look like when working in Dreamweaver’s Design View; therefore, I find it best to edit it in Code View.
- Mobile browsers—This template will not work if you are developing pages for mobile browsers, such as Pocket Internet Explorer. Pocket IE is based on HTML 3.01, so XHTML and external style sheets just won’t work.
If Pocket IE is one of your target browsers, you can add the following OS detect code to the template. It allows you to redirect Pocket IE users to a compatible page:
if (navigator.userAgent.indexOf("Windows CE") != -1)
If you have any questions or comments regarding this template, post them to the discussion below or e-mail me directly.