Web Standards & Techniques

Why Should I Care?

I’m so sick of the attitude I run into “well, web standards inhibit innovation.”

What a crock. What’s inhibiting innovation right now is lack of standards.That’s why it is religion to me, and will remain that way until I find a better one to serve - after all, this is not just about technical innovation, but human progress as well. - Molly E. Holzschlag (as posted at 456BereaSt.com)

What are Standards?

Definition: An acknowledged measure of comparison for quantitative or qualitative value; a criterion.

- Reference.com

Survey!

How many in the room are using a ‘standard’ in designing web pages?

What standards are you using? Do you have a ‘target’ browser? Do you have a campus standard browser?

(non-)Standards on the Web: a short history

HTML & Mosaic – 1993 Netscape Navigator – 1996 Internet Explorer – 1995 CSS1 – 1996 HTML 3.2 & 4.0 – 1997 CSS2, XML, DOM Level 1 – 1998 Web Content Accessibility Guidelines (WCAG) -1999 HTML 4.01 – 1999 XHTML 1.0, DOM Level 2 Core - 2000

Current Standards

XML-Signature, Platform for Privacy Preferences (P3P), XHTML 1.0 2nd Ed, XML-Signature XPath Filter 2.0, XML-Enc, User Agent Accessibility Guidelines 1.0 -2002

DOM Level 2 HTML, SVG 1.1 and Mobile SVG, SOAP Version 1.2, MathML 2.0 2nd Ed, PNG Second Edition – 2003

RDF, OWL, XHTML Print, many XML advancements, CC/PP, DOM Level 3 (Proposed Recommendation) - 2004

Courtesy: Kevin W. Bishop, RPI

The Problems of non-Standards

Need to use tricks to get multiple browser support, I.e., browser detection

Can’t support All browsers without creating special versions for each

Future versions usually require revisions Sometimes you can’t get a browser to do what

it should at all!

CSS Compatibility Example

Compatibility Chart from CoreCSS Test Suite from W3C

What are the Benefits of Using Standards?

Simpler development and maintenance Compatibility with future web browsers Faster download and rendering of web

pages Better accessibility Better search engine rankings Simpler adaptation

-456BereaStreet.com

Benefit: Simpler

Using more semantic and structured HTML makes it easier and quicker to understand code created by somebody else.

Benefit: Future Compatibility

When you use defined standards and valid code you future-proof your documents by reducing the risk of future web browsers not being able to understand the code you have used.

Benefit: Faster Download

Less HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode.

Benefit: Accessible

Semantic HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.

Benefit: Better Search Rankings

The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings.

Benefit: Simpler Adaptation

A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.

3 Drawbacks of using Web Standards

1. Pages will not Look the same in all browsers

2. Need to enforce Standards use – create a new habit

3. Ummm…. Can’t think of any more!

How to Implement Standards

Start by specifying what standards you are going to design to satisfy: XHTML 1.0 or 1.1(transitional or strict mode), CSS1 or CSS2, XML… etc.

Set the DTD in each document you produce for the appropriate standard to allow validation

Validate, Validate, Validate… fix what doesn’t

That’s all?

Well… learning what you can do to create valid code and adjusting old code is the hard part

You will have to Know the rules, and follow them while creating designs

Once they are learned, and you use tools that support your efforts, it will be automatic

What Makes a Valid Document?

Requires the use of a Document Type Definition (DTD) in the document to declare what standard you are using

Well-formed code Satisfies some Requirements such as alt text

for <img> tags Example

Known Problems in Validation

Using Dreamweaver MX, you must have a live Internet connection to properly validate – MX 2004 seems OK.

Browsers have a Quirks mode when pages don’t validate… Mozilla falls back to NN4 compatibility!

Without a DTD, you are automatically put in Quirks mode for most browsers, even if code is Valid—Remember the DTD is part of the standard!

Suggestions

Use W3C’s HTML Validator Use W3C’s CSS Validator If you use templates, validate the template! Modify the default code for a new blank page to include

your chosen DTD, so it will be easy to validate Separate Content from Design with CSS Separate Data from Presentation with XML & XSLT

Inspiration

Web Standards.org CSS Zen Garden Mezzo Blue A List Apart 456 Berea St