Introduction to XHTML/CSS

Posted April 03 2008, tagged webdev,

CSS/XHTML are two separate technologies designed to make construction and maintenance of medium sized web sites, easier and faster. In the long run it saves time, it complies with laws, and its easier to modify your site with. Making the switch is not as hard as you may think and offers tremendous advantages.

The two pillars.

XHTML does not offer anything in addition to what is capable with the older HTML layout method. On the surface the changes appear to force the designer to jump through more hoops and be more careful as to how the code is written. However what it gives the designer is much more freedom in the long run to change the pages. A good page layed up using XHTML should not use any tags which control the look of the page, XHTML is all about the data or information that the page contains.

CSS on the other hand is all about the look of the page. If XHTML is all about the information, then CSS is all about the appearance. For a dull looking XHTML page, CSS will transform it into a work of art. We’re not talking about just changing colours, and size of fonts here. No, by using various techniques you can transform one layout to another. This is demonstrated by the site: csszengarden.com. Anybody can submit a different CSS file to the site, all of these designs radically change the layout structure by just CSS along.

Why bother with CSS and XHTML.

The doubters may ask Why bother going to all this trouble, my site only has one look? It may only have one look now, but over time, it will gradually (or even radically) change and those changes will be easier using the more modern techniques of CSS/XHTML.

This is the future standard. By keeping to standards (www.w3c.org) which should be followed by everybody, your site can be usable by everybody an any type of machine that accesses the Internet. Of course, Macs are not that important anymore, and in five years Apple will be history!

Talk, at the moment is about convergence. Different devices connecting to the Internet. Its nearly impossible to find a phone without access to the Internet. I don’t know if you’ve ever tried to use a mobile phone to look at a site, more often than not its impossible to When someone connects to your site using a different device, you can give the device a different style sheet. That right, if a user reads your site on a PDA or phone, then it will be shaped to suit the particular device. Probably the most important device to consider will be Internet TV. The lower resolution and lack of features on the TV means using an HTML site difficult.

Also under various European (and I’m sure American) directives, a site must be accessible to disabled users. That means Screen reading software. While screen readers can cope with old sites, they work a lot better with CSS/XHTML. You can see for yourself by downloading a copy of Firefox and it’s extension Foxy Voice. Try it on and older site, and on this one and see the difference.

CSS/XHTML means cutting down on the junk that held in a html file. I have found it is much more quicker to lay up a page using the techniques rather than hacking about with tables.

Less junk in the page means smaller file sizes, which means less bandwidth used to host your site. I think a good rule of thumb is that each page is about a third the size of the conventional page. I leave you to draw the conclusion on how much quicker your site would be.

comments powered by Disqus