Web Standards Primer
Emily Lewis
- Web Designer & Self-Professed Standardista
- 10 years as a web professional
- Specialties: (X)HTML, CSS, usability & accessibility
What Are Web Standards?
- Established by World Wide Web Consortium (W3C) and other standards groups, including Ecma International and Internet Engineering Task Force (IETF)
- Technologies, specifications and guidelines for creating and interpreting web-based content
- Designed to future-proof web content and make that content accessible to as many users as possible
- Encompasses Structural Languages (XHTML, XML), Presentation Languages (CSS, MathML, SVG), Object Models (DOM) and Scripting Languages (JavaScript/ECMAScript)
The Holy Grail
- Valid markup and styles
- Semantic markup and styles
- Separation of content (XHTML), presentation (CSS) and behavior (JavaScript)
- Works in any web browser
It All Starts With Valid Markup
- Valid means that the syntax of your markup is correct
- Correct according to the definitions of your DOCTYPE
- DOCTYPE also ensures browsers render your pages in Standards mode = more consistent display
Choosing a DOCTYPE
- Depends on the markup language and version you are using
- XHTML and HTML both come in Strict, Transitional and Frameset flavors
- W3C's recommended DTDs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Why Validate?
- Easier development and troubleshooting
- Browser consistency — both now and in the future
- Faster page loads
- Part of due diligence for accessibility
- Write it right = write it once
Validation Tools
* CSS should be valid too!
Semantics = Meaning
Semantic code means your content is marked up with elements that convey meaning and provide context:
- Heading elements (
<h1>–<h6>) for different types of headings
- Paragraph elements (
<p>) for paragraphs
- List elements (
<ul>, <ol>, <dl>) for different types of lists
<div> and <span> are last resorts- and on and on and …
The Good
<h1>About Emily Lewis</h1><p>I'm a web designer living in Albuquerque, New Mexico. I specialize in hand-coding semantic (X)HTML and CSS, designing accessible web sites, and writing and optimizing web content.</p><ul>-
<li><a href="http://twitter.com/emilylewis">Twitter</a></li>
-
<li><a href="http://flickr.com/photos/eplewis">Flickr</a></li>
-
<li><a href="http://www.facebook.com/profile.php?id=795097355">Facebook</a></li>
</ul>
The Bad (and Ugly)
<div class="heading">About Emily Lewis</div><div class="paragraph">I'm a web designer living in Albuquerque, New Mexico. I specialize in hand-coding semantic (X)HTML and CSS, designing accessible web sites, and writing and optimizing web content.</div><a href="http://twitter.com/emilylewis" class="list">Twitter</a><a href="http://flickr.com/photos/eplewis" class-"list">Flickr</a><a href="http://www.facebook.com/profile.php?id=795097355" class="list">Facebook</a>
Both Are Valid, So Why Does It Matter?
- Typically less code = faster page loads
- Faster and easier to style … and restyle
- No "tag soup" = more maintainable
- Naturally more accessible
- Search Engine Optimization (SEO)
Don't Forget About the CSS
- Avoid
classes and ids that reference presentation *
- Assign values that reflect meaning/context
#secondaryNav rather than #leftColumn
* More of a best practice and sometimes can't be avoided
Keeping Everything Separate
- Content = Text, images, media file contained by valid, semantic markup
- Presentation = Colors, fonts, layout, positioning (even sound) achieved with an external CSS
- Behavior = Interaction achieved with unobtrusive and external JavaScript
Great Presentation With Valid, Semantic CSS
- No more
<table>s for layout (only for tabular data)
- CSS controls layout via
positioning and floats
- Say no to
<b>, <br />, <i>, <sub>, <sup>, <font>
- Say yes to
<strong> and <em>
The Good = Lightweight XHTML
<h1 id="logo">Website Logo</h1><ul id="primaryNav">-
<li><a href="#">Menu link</a></li>
-
<li><a href="#">Menu link</a></li>
-
<li><a href="#">Menu link</a></li>
-
<li><a href="#">Menu link</a></li>
</ul><div id="content">-
<h2>Page Heading</h2>
-
<p>Introductory paragraph of content. Introductory paragraph of content. Introductory paragraph of content. Introductory paragraph of content.</p>
-
<p>Secondary paragraph of content. Secondary paragraph of content. Secondary paragraph of content. Secondary paragraph of content.</p>
-
<p>Tertiary paragraph of content. Tertiary paragraph of content. Tertiary paragraph of content. Tertiary paragraph of content. </p>
</div><div class="clearer"></div>
The Good = External CSS
body {font: small Geneva, Arial, sans-serif;color: #000;}h2 {font-size: 88%;color: #bb0e5d;}p {font-size: 80%;margin:0 0 10px 0;}clearer {clear: left}#logo {font-size: 95%;color: #bb0e5d;background: #777d6a;height: 100px;padding: 10px;}#primaryNav {list-style-type: none;font-size: 85%;background: #999f8e;float: left;width: 100px;padding: 10px;}#content {background: #d2d8c7;float: left;padding: 10px;}
The Bad (and Really Ugly) = Tag Soup, Code Bloat
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">-
<tr>
-
<td colspan="2" style="height: 100px;" bgcolor="#777d6a">
-
<font face="geneva,arial" size="4" color="#bb0e5d"><b>Website Logo</b></font></td>
-
</tr>
-
<tr>
-
<td width="20%" valign="top" bgcolor="#999f8e">
-
<font face="geneva,arial" size="2" color="#000000"><a href="#">Menu link</a></font><br />
-
<font face="geneva,arial" size="2" color="#000000"><a href="#">Menu link</a></font><br />
-
<font face="geneva,arial" size="2" color="#000000"><a href="#">Menu link</a></font><br />
-
<font face="geneva,arial" size="2" color="#000000"><a href="#">Menu link</a></font>
-
</td >
-
<td width="80%" valign="top" bgcolor="#d2d8c7">
-
<font face="geneva,arial" size="3" color="#bb0e5d"><b>Page Heading</b></font><br /><br />
-
<font face="geneva,arial" size="2" color="#000000">Introductory paragraph of content. Introductory paragraph of content. Introductory paragraph of content. Introductory paragraph of content.</font><br />
-
<font face="geneva,arial" size="2" color="#000000">Secondary paragraph of content. Secondary paragraph of content. Secondary paragraph of content.</font><br />
-
<font face="geneva,arial" size="2" color="#000000">Tertiary paragraph of content. Tertiary paragraph of content. Tertiary paragraph of content. Tertiary paragraph of content.</font>
-
</td>
-
</tr>
</table>
Unobtrusive JavaScript for Progressive Enhancement
- The Don'ts:
- Inline event handlers in (X)HTML elements
javascript: in links (<a>)- Inline JavaScript blocks anywhere in your web pages
- Proprietary DOM (i.e.,
document.layers, document.all)
- The Dos:
- Keep JavaScript in external files and apply events to elements from there
- Apply JavaScript event handlers to elements that already have built-in functionality for communicating (i.e.,
<a>, <input type="submit">)
- Ensure complete functionality even if JavaScript is disabled
- Standardized DOM (i.e.,
getElementById, getElementsByTagName, getAttribute)
An Aside: WYSIWYGs
WYSIWYG editors = Frontpage, DreamWeaver, Contribute, etc.
- All can produce bloated, non-standard markup, especially if you don't know how to modify preferences
- Some even restrict editing, preventing any chance to "fix" generated markup that is bad
- If you must use them, understand what is going on behind the scenes and know how to modify it as necessary
Worth Repeating: The Big Picture Benefits
- Reduced Bandwidth
- Shared resources (JavaScript, CSS) are cached
- Typically smaller file sizes
- Easier Maintenance
- Easier to change one CSS or JavaScript file than hundreds of pages of markup
- Easier to hand off work if best practices are followed
- Minimal need for development to suit multiple devices (mobile, print, etc.)
- Forward compatibility
- Easier to troubleshoot
Worth Repeating: The Big Picture Benefits
- Improved Accessibility
- Greater ease–of–use for people with disabilities of all types
- Browser independent
- Progressive enhancement
- Better SEO
- "Indexable" content for faster page spidering
- Improved search engine rankings
The Little Picture Benefits
- Quality work
- Professionalism
- Knowledge
Waxing Philosophic
- Web standards are a goal
- Web standards require commitments: to quality, yourself, your client/employer, your audience and the industry
- Web standards are simple to implement and reap enormous organic benefits
That said …
- Browsers do not consistently support specifications
- Like the web itself, web standards change (i.e., XHTML vs. HTML5)
- Getting "buy-in" can be a challenge
- The spirit of web standards must be balanced with reality
Standards in Action: This Presentation
- Uses Eric Meyer's S5: A Simple Standards-Based Slide Show System
- Semantic and valid XHTML
- Semantic and valid CSS
- Turn off Javascript … still works
- Turn off CSS … still works
- Accessible to search engines
- Can be printed without loss of content
- Can be viewed on a mobile device without loss of content or functionality