Twilight Universe

Why All The Fuss Over Web Standards?

Mainly this is to do with the goal of the strict standards, which is to separate style from content in web pages.

This means that the code on a web page should be structural, any tags should be meaningful not concerned with the presentation of the page. Presentation should be handled by CSS. More on CSS later.

An example of using meaningful code can be illustrated using the bold and italic tags <b> and <i>. These tags have no meaning by themselves. When we read bold or italic text we attach meaning to it however - bold is interpreted as words that are being stressed, and italic is text that is being emphasised. It is for this reason that browsers also support the tags <strong> and <em>. These two tags give meaning to the text that cannot be conveyed by style alone.

If you need to change a section of text to bold for stylistic purposes then you shouldn’t be using <b> or even <strong> in your code - you should be using style sheets to do that. That is what they are for.

Why Is Meaningful, Style Separated Code Important?

For two reasons: Portability and Accessibility.

Portability means that your code will be understandable not just across different browsers like IE and Mozilla, but across different platforms. This includes computer OS’s like Windows, MacOS, and Linux, but more importantly across platforms like mobile phones, PDA’s, and other equipment that can access the internet. While all of these may not be supported straight away these methods will allow your code to be transferred into the right format with the minimum of effort. Who can say that about a page with miles of nested tables?

Accessibility means that users who may not be able to use the net like the majority of people can access your site. They may use screen readers if they are partially sighted or blind, or have special browsers to make things more convenient. Either way the content of your site will still be viewable and meaningful to them. Not only is this allowing more potential viewers of your site, it may in fact be a legal requirement now for many businesses.

Basically it is maximising the availability of your content. This means that more people can see your work. Of course there are other more practical benefits to using style separated code as well, I’ll cover these as I go on.

The Concept of Tableless Design

Tables are another example of where structural code has been misused for design purposes. In the past it was common to work out a way where you could split your design into rows and columns so you could display it in a table. It is such a common way of thinking now that many web designers have trouble not thinking in these terms.

However tables are designed to display tabular information, not to act as a stylistic tool. This is where the idea of tableless design comes in - using tables only to display tabular information. If your content requires a table, by all means put a table in there. What you should not be doing is using them to control the layout of your page. This just leads to ugly, nested tables, lots and lots of code and, above all else - a website whose’ content is meaningless.

Sometimes it can be useful to use tables to define the basic structure of your page. In this case it is a semi-valid use - it is a structural element after all, and this method may help display your page in some older browsers that don’t support style sheets. However I would not suggest it, mostly because there is no need to do so, and it can lead to more problems than it solves. It is a good solution for people just getting into style sheets and learning how to work with them though.

Rather than thinking of your page as a set of rows and columns, think of it as if it is split into any number of boxes. In each box is an element of your page. These boxes don’t have to be aligned with each other, or even be next to each other - they could overlap for example. This is the concept of tableless design.

Each box would be an item, be it an image, a block of information enclosed in a <div> tag, some text in a <span> tag, or anything else on a page. Each of these elements would be controlled and positioned using CSS, allowing much greater flexibility in design, while keeping your actual code clean and simple.

How Does This All Benefit Me?

Coming down to brass tacks, most viewers don’t care how their page is coded, just that it displays properly. So what does all this mean in a practical sense? As Jerry Maguire might say - show me the money.

• Smaller Pages - Because you aren’t using lots of nested based markup that wasn’t designed to be used for presentation or tag specific attributes you’ll find that the pages you author are smaller in file size. Meaning that you use your web space better, and have more room for more content.
• Faster Loading, Lower Bandwidth - because your page size is smaller and the style sheet only needs to be loaded once you’ll find your pages loading faster. Being smaller also means you’ll use less bandwidth - which saves you, or your client, money.
• Less Work - That’s right, less work for you. Coding and working with table based layouts can be time consuming, and boring. You end up repeating large blocks of your code needlessly - especially when you are using the same or similar layout in every page (as almost all sites do). If you separate the style from the content all you need to do to design your entire site is to work with one file.
• Easy To Redesign - have you ever tried to redesign a nested table layout that you coded a year or two before? If you have then you’ll know that it is a tiresome and will sapping task - and that’s when you coded it, let alone some other developer. When the content is separated however all you have to is change the style sheet and you can have a totally different look in minutes.
• Get The Design You Want - Often many designers have had to compromise their design because certain things just weren’t practical. With style sheets designers have full control over their design and, while not as flexible as a professional design package, much more can be done - like pixel based layout for example.
• Access To More Viewers - If you code and design intelligently then more people will be able to see your site than ever before. Also you could be saving you or your client possible legal issues in the future.

Hopefully this demonstrates not just the usefulness of complying with web standards, but the business sense it makes - both in short and long term. A design will have less problems, a coder will have less headaches, and a client will save money.

Just remember all this for the next time you hear someone say that there is no reason to use web standards.