Transcript Web Standards & Techniques

Web Standards & Techniques
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)
Why Should I Care?
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.
2.
3.
Pages will not Look the same in all browsers
Need to enforce Standards use – create a
new habit
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