Building great standards based
websites for the big wide world
with ASP.NET 4
Tatham Oddie
Senior Consultant
Readify
ASP.NET MVP
@tathamoddie
Damian Edwards
Program Manager
Microsoft
(former ASP.NET MVP)
@damianedwards
The Project
• Determine your “done” definition up front
• Ours were:
– XHTML compliance
– WAVE test
– Unit tested
– Browser support: IE6, IE7, IE8, FF2, FF3, Sa3
– Non-JavaScript support
• Develop your own
Standards
• XHTML is based on HTML 4.01
• Adds XML compliance & extensibility
• XHTML 1.0
– Frameset
– Transitional
– Strict
• XHTML 1.1
• ASP.NET is geared to serving XHTML
Standards
• XHTML 1.1 is the latest & most strict
• However it deprecates commonly used
elements & attributes
– iframe
– target
• Choose a base & switch when necessary
• HTML5 is backwards compatible so consider
using it
ASP.NET & HTML
REACH
XDR
Browsers above the
baseline “just work”
DOM Storage
Selector API
CSS 3 / extensions
Baseline
Progressive Enhancement
HTML 5
CSS 2.1
PNG
JavaScript
XHTML 1.0, 1.1
CSS 1
HTML 4.01
HTML 3.2
Browsers below the
baseline need
specific attention
Graceful Degradation
DOM 1.0 Level 2
Chrome
Safari 4
Firefox 3.6
IE8
Opera 9.5
Firefox 3.1
Safari 3
Firefox 3
Firefox 2
IE7
Safari 2
Firefox 1
IE6
Reach
• Important to have a browser support baseline
• CSS layouts: load quicker, easier to maintain,
best support for majority of users
• Progressively enhance from a standards
compliant base
• Build non-JS functionality first, then layer JS on
top
Reach
Accessibility
• WAI – Web Accessibility Initiative
– http://www.w3.org/wai
• WCAG 1.0 & 2.0
• WAI-ARIA
• WebAim.org
– WAVE accessibility evaluation tool
Markup
• Pop quiz… what HTML gets rendered?
– Label control
– Panel control
– Enabled attribute
• Do you really need the server control?
Using multiple forms
Markup
• Forms are fundamental to good websites
• Layout affects accessibility, stylability &
maintainability
• Choose a consistent form layout model & stick
to it
<fieldset class="customer-details">
<legend>Customer Details</legend>
<ol>
<li class="first-name">
<label for="firstName">First Name:</label>
<input id="firstName" type="text" />
</li>
<li class="last-name">
<label for="lastName">Last Name:</label>
<input id="lastName" type="text" />
</li>
<li class="action save">
<input type="submit" value="Save" />
</li>
</ol>
</fieldset>
<fieldset class="customer-details">
<legend>Customer Details</legend>
<ol>
<li class="first-name">
<label for="firstName">First Name:</label>
<input id="firstName" type="text" />
</li>
<li class="last-name">
<label for="lastName">Last Name:</label>
<input id="lastName" type="text" />
</li>
<li class="action save">
<input type="submit" value="Save" />
</li>
</ol>
</fieldset>
fieldset {
float: left; clear: both;
}
fieldset ol {
list-style-type: none;
margin: 0;
padding: 15px;
}
fieldset ol li {
clear: both;
margin: 0 0 4px;
}
fieldset ol li label {
display: block;
width: 120px;
float: left;
}
fieldset ol li.action {
padding: 0 0 0 120px;
}
<fieldset class="customer-details">
<legend>Customer Details</legend>
<ol>
<li class="first-name">
<label for="firstName">First Name:</label>
<input id="firstName" type="text" />
</li>
<li class="last-name">
<label for="lastName">Last Name:</label>
<input id="lastName" type="text" />
</li>
<li class="action save">
<input type="submit" value="Save" />
</li>
</ol>
</fieldset>
fieldset {
float: left; clear: both;
}
fieldset ol {
list-style-type: none;
margin: 0;
padding: 15px;
}
fieldset ol li {
clear: both;
margin: 0 0 4px;
}
fieldset ol li label {
display: block;
width: 110px;
float: left;
margin-right: 10px;
text-align: right;
}
fieldset ol li.action {
padding: 0 0 0 120px;
}
fieldset {
float: left;
clear: both;
}
fieldset ol {
list-style-type: none;
margin: 0;
padding: 15px;
<fieldset class="customer-details">
<legend>Customer Details</legend>
}
<ol>
fieldset ol li {
<li class="first-name">
clear: both;
<label for="firstName">First Name:</label>
margin: 0 0 4px;
<input id="firstName" type="text" />
}
</li>
<li class="last-name">
fieldset ol li label {
<label for="lastName">Last Name:</label>
font-size: 0.8em;
<input id="lastName" type="text" />
color: #444;
</li>
display: block;
<li class="action save">
}
<input type="submit" value="Save" />
</li>
fieldset ol li input[type=text] {
</ol>
width: 200px;
</fieldset>
}
fieldset ol li.action {
margin-top: 10px;
}
<fieldset class="customer-details">
<legend>Customer Details</legend>
<ol>
<li class="first-name">
<label for="firstName">First Name:</label>
<input id="firstName" type="text" />
</li>
<li class="last-name">
<label for="lastName">Last Name:</label>
<input id="lastName" type="text" />
</li>
<li class="action save">
<input type="submit" value="Save" />
</li>
</ol>
</fieldset>
fieldset {
float: left; clear: both;
}
fieldset ol {
list-style-type: none;
margin: 0;
padding: 15px;
}
fieldset ol li {
float: left;
margin: 0 30px 0 0;
}
fieldset ol li label {
display: block;
float: left;
margin-right: 10px;
}
fieldset ol li.action {
margin: 0;
}
Client Performance
• Use YSlow to highlight potential issues
• Minimize requests
– Combine your CSS during build/deployment
– Combine JS with ScriptManager
– Use CSS sprites for background images
• GZIP compression
Quality
• Why tests matter
• Types of tests
– Unit test
– Integration test
– Functional test
– Performance test
Quality
• Additive
• Facilitates good architecture
• New features
• http://webformsmvp.com
Web Forms MVP
In Conclusion
• Web standards make accessibility, reach,
quality & maintenance easier
• ASP.NET supports XHTML, but needs tweaking
& developer awareness (HTML5 is coming)
• Determine your done criteria early & automate
as much as possible
• Ensure quality by using testable patterns, DI,
IOC & unit testing
Resources
•
•
•
•
•
•
•
http://tath.am
http://damianedwards.com
http://www.w3.org
http://www.webaim.org
http://webformsmvp.com
http://markupsanitizer.codeplex.com
http://www.graysonline.com