Standards-Compliant Design

This article will discuss the various techniques used to build web sites and the consequences of these techniques. It will focus heavily on emerging Internet standards, such as Cascading Style Sheets, and compare them with more common development techniques.

Background

Web sites are developed using Hypertext Markup Language (HTML). HTML is the coding standard for all web pages and it is what is read by your browser when you view a web page (browsers are the programs on your computer that show you web pages; for instance Internet Explorer or FireFox). An example of a very simple web page's HTML is shown here:

When you go to a web page, your browser (e.g. Internet Explorer) shows you its interpretation of the HTML that makes up that page. What it shows you is the visual display of that HTML.

The visual displays of the HTML elements of a web page are not universal, but rather set by each individual browser. For simple elements, the difference is usually very minor. For more complex elements, however, the differences can be staggering. For the HTML above, the web page looks like this:

HTML is a structured language composed of tags that describe the various items on a web page. For example, a paragraph is indicated by a <p> tag. Anything within this tag is the text of a paragraph (tags technically need to be opened and closed, so the text of a paragraph is actually within a starting <p> tag and a closing </p> tag, but don't worry about that for now). In the HTML code shown above, the "Hello" is in paragraph tags.

Similar to paragraphs, headings are placed within <h> tags, images within <img> tags, tables within <table> tags and so on. Don't worry about knowing these tags; just understand that HTML uses tags to describe what kind of information is on the web page.

History of Visual Display

Until recently, there were very few standards on the Internet relating to the visual display of web pages. This meant that a web page would look radically different if it was viewed in different browsers. These variations were often not just minor differences, but were large enough that a web site could be unintelligible if it were viewed in the wrong browser!

As a result of the variations, web designers looked for ways to add consistency to their web sites, regardless of the browser used. To do this, they started misusing the HTML tags that make up a web page.

The biggest culprit was the misuse of the <table> tag. It was discovered that if a designer placed all the parts of the web page in a table, it would display properly on different browsers. Halleluiah!

For a very long time, this was the only way to get a web page to display properly on the Internet, and it became the de facto method for building web pages (what else could you do?). This has become know as a table-based design.

Enter CSS and Standards

Cascading Style Sheets (CSS) are separate files on a web site that allow the way an HTML tag is displayed (styled) to be changed. They override the browser's native display of the tag and instead allow it to be displayed in a way that fits better with the intended look of the web site.

This sounds great! But there was a catch: Along with not displaying HTML tags consistently, different browsers didn't display CSS consistently either. What a nightmare!

Fortunately, an international group was working hard to standardize the way CSS displayed. Over time and with a lot of work, their efforts have paid off to the point where CSS web sites are now not only possible, they're preferred.

When CSS is used to create web sites by following the international standards, it is called standards-compliant CSS (SC CSS).

The Nuts and Bolts (i.e. Show Me the Code!)

We're going to take a look at the HTML code itself to see the differences between SC CSS design and table-based design. For this section, we are going to use the Bionex Multimedia web site's old About Us page, with some changes to show the styling in action. For reference, here's what the page actually looked like:

To start with, we'll use a sample of the Bionex Multimedia web site's old About Us page before getting a SC CSS design. After, we'll compare it to its modern SC CSS counterpart.

Table-Based Designs

Even Bionex Multimedia used table-based design once upon a time.

First we'll see the About Us page with the tables of the table-based design highlighted in white. This is followed by the HTML code (note that text in paragraphs has just been replaced with Text…). As an added bonus, we'll also see how the page looks if it is printed.

Tables Highlighted

That's a lot of tables, which makes for messy code (see below) and difficult updates.

Table-Based HTML Code

That's a lot of code!

Printable Version

Doesn't look too good, does it?

SC CSS Based Layouts

Now we'll see the web site after its conversion to a SC CSS based layout. It looks identical to the table-based design, but without the misused table tags.

The Web Site Bare Naked (No CSS Styling)

Here, the styling has been turned off so only the pure HTML shows to give you an idea of how elegant these web sites are (this view is also what search engines such as Google see):

Pretty straight forward, isn't it? Google thinks so too.

SC CSS Based Code

That's a lot less code, and it makes more sense (so it's easier to update and for Google to figure out).

Printable Version

Now that's what a printout should look like!

The Verdict

What a difference: that's 59 lines of code (table-based design) versus 27 (SC CSS design), and more importantly, its file size has been reduced by 60%! That means the SC CSS version will load 60% percent faster. Wow.

Also imagine how much easier the SC CSS web page is to update and redesign. Bear in mind that this is a simple web page. More complicated web pages see even greater savings. Plus, how cool is the printable version?

Why Standards-Compliant CSS?

Good question! In the end, who cares about the nuts and bolts of my web site if it looks good and works well, right? Right. Developing SC CSS web sites isn't just about doing what's recommended or fashionable; there are a lot of benefits too. SC CSS web sites are:

• Faster Loading: There is less HTML on the web pages, so the web site loads faster.
• Easier for Search Engines (e.g. Google): When HTML elements actually contain what they say they contain (e.g. tables really do only contain tabular data), search engines have a much easier time figuring out what's on your web site.
• Quick to Update: The content isn't placed willy-nilly in a jumble of table tags, so it's easier to find and change when you want to update your web site.
• Less Expensive to Change: The visual display of all the pages on the web site is controlled by one file, so changing the look of the web site is much easier: Just one change to one file and the whole web site changes (versus making the change on every page with table-based designs). This means you save money on web site updates and changes.
• Excellent for Printing: SC CSS allows different styles to be set for different media. That means your web site can be built to print perfectly to a standard sheet of paper, showing only what's need on the printout. All without the hassle and expense of creating separate 'printable version' pages.

Is All CSS Standards-Compliant?

Not at all. Any web site can use CSS and, as a result, any web designer can say they develop CSS web sites. Using the old table-based designs and using CSS are not mutually exclusive. Just because a designer is using CSS, does not mean that you are getting the benefits of SC CSS.

Many web sites that use CSS still suffer from the old problem of misusing HTML tags. Paragraphs are not in paragraph tags, tables are still used for the visual display. What's poor Google to do?

Without the proper use of HTML tags to back it up, the advantages of using CSS are negated. In other words, SC CSS allows us to get the HTML right, which is where many of the benefits come from (remember, Google doesn't see the CSS). All CSS in not necessarily SC CSS.

Don't All Web Site Designers Use Standards-Compliant CSS?

Surprisingly, no. There are many web designers who still use the old table-based web designs. The main reason for this is time and experience. Since SC CSS is a relatively new concept, many web designers have not invested the time and effort required to keep current.

Changing to SC CSS web design requires a radical change in design thinking that can take years to develop. Many designers feel that what they are doing works, so they either don't want to change, or have tried and have been unsuccessful.

Summary

Congratulations on making it through this complex topic! We hope that you have learned a lot about the differences in web design techniques. Just remember that in the end, it's your web site that's being built. It is worth getting to know a bit about the design and development techniques being used so you can be sure you are getting the most bang for you web design buck.

This article has only touched on the advantages of SC CSS. If you would like more information about SC CSS, or you have any other questions, please do not hesitate to contact us.