Building great standards based websites for the big wide world with ASP.NET 4 Tatham Oddie Senior Consultant Readify ASP.NET Damian Edwards Program Manager Microsoft (former ASP.NET

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

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

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

Browsers below the baseline need specific attention Browsers above the baseline “just work” HTML 5 XDR DOM Storage Selector API CSS 3 / extensions CSS 2.1 DOM 1.0 Level 2 PNG JavaScript XHTML 1.0, 1.1 CSS 1 HTML 4.01 HTML 3.2 Baseline IE8 Opera 9.5 Safari 3 Firefox 3 IE7 Firefox 2 IE6 Firefox 3.1 Progressive Enhancement Graceful Degradation Safari 2 Firefox 1 Chrome Safari 4 Firefox 3.6

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

WAI – Web Accessibility Initiative – WCAG 1.0 & 2.0 WAI-ARIA WebAim.org – WAVE accessibility evaluation tool

Pop quiz… what HTML gets rendered? – Label control – Panel control – Enabled attribute Do you really need the server control?

Using multiple forms

Forms are fundamental to good websites Layout affects accessibility, stylability & maintainability Choose a consistent form layout model & stick to it

Customer Details First Name: Last Name:

Customer Details First Name: Last Name: 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: px; }

Customer Details First Name: Last Name: 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: px; }

Customer Details First Name: Last Name: 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 { font-size: 0.8em; color: #444; display: block; } fieldset ol li input[type=text] { width: 200px; } fieldset ol li.action { margin-top: 10px; }

Customer Details First Name: Last Name: 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

Why tests matter Types of tests – Unit test – Integration test – Functional test – Performance test

Additive Facilitates good architecture New features

Web Forms MVP

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