Web Standards

1
Web Standards Techniques

• Why Should I Care?

Im so sick of the attitude I run into well, web
standards inhibit innovation. What a crock.
Whats inhibiting innovation right now is lack of
standards. Thats 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)
2
What are Standards?

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

• - Reference.com

3
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?

4
(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

5
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
6
The Problems of non-Standards

• Need to use tricks to get multiple browser
  support, I.e., browser detection
• Cant support All browsers without creating
  special versions for each
• Future versions usually require revisions
• Sometimes you cant get a browser to do what it
  should at all!

7
CSS Compatibility Example

• Compatibility Chart from CoreCSS
• Test Suite from W3C

8
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
9
Benefit Simpler

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

10
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.

11
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.

12
Benefit Accessible

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

13
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.

14
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.

15
3 Drawbacks of using Web Standards

• Pages will not Look the same in all browsers
• Need to enforce Standards use create a new
  habit
• Ummm. Cant think of any more!

16
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 doesnt

17
Thats 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

18
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
  tags
• Example

19
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 dont
  validate Mozilla falls back to NN4
  compatibility!
• Without a DTD, you are automatically put in
  Quirks mode for most browsers, even if code is
  ValidRemember the DTD is part of the standard!

20
Suggestions

• Use W3Cs HTML Validator
• Use W3Cs 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

21
Inspiration

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