Web Standards Primer

An Introduction to Web Standards

Brett Stimmerman

http://socket7.net/

This presentation can be printed as a handout that includes further information.

Part 1 of 5 in a series available online at http://socket7.net/presentations.

Web Standards?

At the most basic level, Web Standards means:

Using specifications set forth by the W3C
Examples: XHTML, CSS, DOM, SVG, etc.
Embracing recommended Best Practices as much as possible
Examples: Valid, semantic and accessible markup

"A site built to Web Standards should be lean, clean, CSS-based, accessible, usable and search engine friendly."

Russ Weakley

Co-Chair, Web Standards Group

Web Standards is a broad term that encompasses several aspects of modern web design. Designing with Web Standards means adhering to specifications and recommendations set forth by the W3C such as XHTML and CSS.

[Sidenote: HTML 4.01 in this respect is also considered a standard. However, HTML 4.01 is the last version of HTML to be developed, and it is aging. Focus at the W3C has moved on to XHTML and CSS. XHTML 1.0 and XHTML 1.1 exist today, while XHTML 2.0 is currenty under development. CSS 2.1 exists today, with CSS 3.0 coming soon, alongside XHTML 2.0.]

Web Standards also encompasses a collection of best practices that designers should apply, but aren't necessarily required to, such as semantic markup and accessibility. Though, when applying these best practices to your work, the results, as you'll come to find, will speak for themselves.

Before Web Standards

Browser makers fumbled and designers found a way

These are aging techniques as browser makers are more standards compliant than ever.

Have you ever debugged a misaligned cell 4 tables deep? How many times have you found yourself saying "If I add 3 more spacer GIFs, it will be perfect?" How many sites have you redesigned where you've had to edit each and every <font> tag?

Before Web Standards, "Tag Soup," that troublesome mass of HTML, wasn't disadvantagious. "Tag Soup" and Nested Tables were solutions to a greater problem plaguing designers: the desire for more adaptable control. Web Standards not only fills that void, it gives the Web more meaning.

Web Standards isn't a new idea. A noticible push towards Web Standards began as early as 1998, and truly gained momentum in 2001. For the past 5 years, designers have been begging browser makers for better support of W3C specifications, and accessibility experts agree a majority of the web is inaccessible to those with disabilities. We designed poorly because the internet landscape was constantly changing.

The Benefits of Web Standards

Designing with Web Standards has numerous advantages

Web Standards isn't a new idea. A noticible push towards Web Standards began as early as 1998, and truly gained momentum in 2001. For the past 5 years, designers have been begging browser makers for better support of W3C specifications, and accessibility experts agree a majority of the web is inaccessible to those with disabilities. We designed poorly because the internet landscape was constantly changing.

Note that "works in any browser" does not mean "looks the same in every browser." This is A Good Thing. Your site will be accessed by a wide variety of devices on several operating systems, with monitors of different sizes (or no monitor at all), by users that may have customized their default text size and other preferences. Web Standards makes this possible.

But Tag Soup Works Just Fine!

Perhaps for you, but is it working for your customer?

Nested Table & "Tag Soup" approaches of web design arose from the early beginnings of the web as a marketing space. Entrepreneurs capitalized on the technology faster than browser makers (and even the W3C) could keep up with.

Every time a user browses to a new page, the entire page of "Tag Soup" (structure & presentation) is retrieved from the web server. This creates unnecessarily higher bandwidth usage for the business and the viewer.

Solution

Separating Structure From Presentation

The benefits of separating presentation from structure are numerous. Development times are significantly reduced for designers. Browser caching not only gives visitors a faster experience (especially over dial-up), it eases business expenses in the areas of hosting and bandwidth costs.

On the web, content is king. Visitors to most web sites aren't interested in your lastest rollover technique, the masthead graphic with the latest trend or the giant BUY NOW button. They came to your site for information. Simple questions like What time do you open? How do I get there? When is the next show? How much is it? How did other people like it? What services do you offer? What's your phone number? are extremely common.

Separating sturcture (content) from presentation allows the information contained in your site to be available to anyone that wants it, on any device. Those that happen to use a capable device have the added bonus of a visual - or audible - style.

Because the content is only accompanied by semantic markup, search engines have an easier time indexing and ranking your pages. Search engines don't care how your site looks. More than any other visitor, they want your content.

What Does "Semantic" Mean, Already?

To web designers, semantic means

"As much as possible, the tags surrounding the content of a document should describe what that content is and/or what it is for."

Jason Kottke

kottke.org

Semantic markup gives content meaning and logical hierarchy regardless of browser or user agent. This means that any device can access your page and view your content.

Search Engines like semantic markup because it allows their spiders to parse the content in a logical fashion.

Semantic Markup is also beneficial when a site needs to be changed, or redesigned completely.

Examples of Semantic Markup

Further Explantations

Headings are used to announce a topic or section. They are more than just a larger font size. Also, search engines often place ranking emphasis on heading content.

Tables are used for marking up tabular data, similar to an Excel spreadsheet.

Lists are used to formally group related items together.

<div> and <span> are the least semantic structural tags we use. And we use them constantly. However, when properly id'd and/or classed with CSS, they can imply meaning.

Semantic Markup Is Powerful

Accessibility
Content is logical and accessible to all visitors and user agents
Search Engine Optimization
Content separated from presentation is logical and easily indexed
Site Redesigns/Maintenance
Markup is logical and easily understood; use CSS to change the look and feel

Caveats To Web Standards

Sites Built with Web Standards Are

Futher Reading

Yes, There is Homework

Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on topics of web standards, provide evidence of their benefits, or give you a first hand look at Web Standards in action. You may browse each site further if you'd like, but I don't expect you to.

However, please do browse the CSS Zen Garden as much as possible. It's absolutely wonderful.

It's Over!