Web Standards

What are they, and why do they matter?

You’ll hear a lot of talk amongst designers about "web standards." Those who say that they design to 'web standards' really mean that they create web pages that adhere to World Wide Web Consortium (W3C) standards.

The main 'web standard' that designers talk about has to do with the separation of coding from presentation. This separation is done using something called "cascading style sheets," or CSS. Web pages get split into two discrete parts: content and styling.

This division is a relatively new idea, and the use of CSS for layout is a hot debate in the web-design world. The traditional way to build websites has been to use "layout tables," and while tables do have some strengths, they also have a lot of problems.

A bit of history is in order. Back in the bad old days of the Internet, web pages were not meant to be interactive brochures, so they didn’t have navigation columns, fancy overlapping images and the like. Rather, they were meant to transmit scientific publications around the world. Web page structure was modeled after scientific journals, so that tables of contents appeared at the tops of pages, and images could be placed to the left or right of the text. Text flowed around images just like in a book, and tables were used to display columns of data.

But then the graphic designers got involved. They wanted to be able to display content in new ways: in columns, and with navigation on the top or to the left of page content, for example. The designers also wanted to display overlapping images and have varied borders around elements... and much more. In short, they wanted a way to create colourful print brochures online.

Sure enough, somebody hit upon a way to do this: take tables that were meant for scientific data, and stretch them to the full height and width of the page. Then, set their borders to "0" to make them invisible. They could then be used to hold and arrange content, and an online brochure was born.

This was not what tables were really meant for, however. For one thing, every time page layout changed, text and images had to be added or removed from every single table cell. This created a huge job for designers whenever they want to alter the look of a page or juggle its content. Large sites required a lot of content-specific web programming just to make their layouts work. Every table added complexity, and each cell required additional "markup" (web code) to be added into the page, code that took more time to download and render.

Layout tables also made things more difficult for search-engines. The most important content doesn’t always come first on the page; it is placed according to layout rather than importance. But as a result of this, ads and navigation usually come before content to search-engines reading the page; the words "about us" or "contact" are ranked more important than, say, a company’s information or in-house news! And a million other companies also have "about us" and "contact" listed on their pages, too...

So while this system worked well enough for what it was, the W3C specifically noted that layout tables were not the standard way to display text and images, and in 2001 they got working on a way to divorce layout styles from content. CSS was born.

CSS removes the layout information from the page content, placing it in a separate file that can be changed at will. It allows layout changes to take place in one central document that apply to all of the pages on a site at once. This means less "markup" is required, and pages load faster. CSS 1.0 was happily adopted by most web designers for text and image styling, but it still isn't universally favoured for layout. This is because it requires more time to set up; some browsers display CSS differently, and this means that a diligent designer must thoroughly test CSS layouts in different environments before using them in a production site.

The strength of CSS layouts outweight their weaknesses, however. The CSS model is based on typographic conventions for document design: content is placed in divisions which are named for the content they contain, so content can be divided-up based on its function into discrete blocks. Those blocks can be moved anywhere, and they always reflect the character of what content is inside them - rather than being arbitrarily placed on the page, they can be ordered by the importance of their contents without affecting their look, so that they get seen properly by search engines.

CSS 2.0 is now the standard, and CSS 3.0 is in the works. CSS-based layout is set to take over the web entirely in the next few years - and it is the right way to display content. Always look for a 'standards-compliant' designer; they will make your site easier to update, easier to optimize and easier to maintain.

There is more to standards-compliance than just CSS; watch this space for upcoming articles about accessibility for the visually-impared, code validation, and more!