The Case For Standards-Based Web Page Design :: 2005 AISICS

As we start to dig into standards-based web authoring, you will start to notice that the people pressing for it start to sound like preachers. Indeed, it's like a religion. There are 10,000 different approaches to web design. Using standards is the right approach. It doesn't appear to be the easiest way at first, but as you learn you discover that it is the easiest way to make professional, consistent, compatible pages.

What are web standards?

By standards we mean, in general, the standards as established by The World Wide Web Consortium (W3C) and, specifically, we are referring to validated XHTML and CSS. The W3C is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards.

W3C's mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

—W3C

W3C Develops Web Standards and Guidelines

W3C primarily pursues its mission through the creation of Web standards and guidelines. In its first ten years, W3C published more than eighty such W3C Recommendations. W3C also engages in education and outreach, develops software, and serves as an open forum for discussion about the Web. In order for the Web to reach its full potential, the most fundamental Web technologies must be compatible with one another and allow any hardware and software used to access the Web to work together. W3C refers to this goal as Web interoperability. By publishing open (non-proprietary) standards for Web languages and protocols, W3C seeks to avoid market fragmentation and thus Web fragmentation.

What are non-standard ways of building a web site?

HTML = HyperText Markup Language.

XHTML = eXtensible HyperText Markup Language.

XML = eXtensible Markup Language.

CSS = Cascading Style Sheet.

Table-based Layout = the practice of using HTML <table> tags to control the positioning of design elements on a page.

Spacer GIFs = small graphic files consisting of a single transparent pixel, used to position content in table-based layouts. The <image> tag for the spacer gif is given height and width attributes to pad out the space.

When the World Wide Web exploded in popularity in the early '90s no one could foresee the directions web page design was headed. Early browsers only partially supported the full HTML specification and even less of CSS. Browser writers started adding their own extensions to HTML and there was no control over the direction things were heading. As the demand for visually compelling page designs increased, web designers had to scramble for techniques to deliver the designs their customers wanted. Thus the era of table-based layout and spacer gifs was born. The alternatives to table-based layout were all-graphics layouts where the page was controlled pixel-by-pixel, and proprietary environment page design such as Flash.

Why are table-based or all-graphics sites bad?

They are harder and take longer to build.
Because the content is embedded in the presentation, editing content is less intuitive and more prone to the sort of errors which could break the entire layout.
Since they are larger in size, they take longer to load and take up more server space.
When it is time to change the design, it is a much more difficult and costly task.
They use markup in ways not intended and as such are not likely to move easily forward as new web technologies and standards appear.
They are much more difficult to make accessible to handheld devises, screen-reading software, phones, etc.

Why should you use web standards?

Increased separation of content and presentation: By using CSS to control a site's design, updates and redesigns become easier. Site-wide changes can be made instantly through the update of a single style sheet.
Easy to maintain: As a direct result of the separation of content and presentation, editing content is much easier and less prone to error. By using standard markup in the ways intended, people unfamiliar with the site can make additions without wasting time trying to figure out how the original author did it.
Forward compatibility: By authoring pages using web standards, you are ensuring that they will still be readable in the future.
Improved accessibility: Web standards enable us to reach the highest possible number of browsers and devices. Content can be easily read by any browser, phone, PDA, or by those using assistive software.
Reduced markup: Less code means faster pages. Less code also means more server capacity, which in turn means less money needed for server space and bandwidth.

The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all its attendant benefits, while still remaining confident in their content's backward and future compatibility.

—W3C

Why XHTML?

XHTML is a transitional language that uses the semantics of HTML and the syntax of XML. What this means in plain language is that XHTML uses the same <tags> as HTML but they are subject to the stricter rules of XML. The three most important rules which must be followed in order for markup to validate as XHTML are: (1) all tags and attributes must be in lower case; (2) all attributes must be enclosed within double quotes; (3) all tags must close. These and the rest of XHTML's rules can be found at:

www.w3.org/TR/xhtml1/ — The formal definition of XHTML. Very academic.
www.w3schools.com/xhtml/ — a much more accessible and understandable approach to the whys and hows of XHTML.

By adhering to these rules we are assured that our content will be compatible with future browsers, designers and developers will have an easier time modifying and debugging code, pages have a better chance of rendering properly on browsers that understand the standards (cell phones, PDAs, etc.)

Structured Markup

When HTML was created, the authors had specific intentions for the <tags>. The tags' names were indicative of what the content meant; they added meaning to the content. But back in the dark ages of designs assembled from nested tables and spacer-gifs the <tags> were used beyond what was intended.

When we use meaningful (structured) markup we add meaning to our content without concerning ourselves with the presentation of that meaning. When we use <strong> instead of <b> we tell the browsers that these words should appear or sound more important than the other words and it is up to the browsers (with the help of our style sheets) to render that meaning. This is also called semantic markup and the more we use it, the closer we get to separating content from presentation.