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

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

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

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

6. ASP.NET & HTML

7. REACH

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

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

11. Reach

12. WAI – Web Accessibility Initiative – http://www.w3.org/wai WCAG 1.0 & 2.0 WAI-ARIA WebAim.org – WAVE accessibility evaluation tool

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

14. Using multiple forms

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

16. Customer Details First Name: Last Name:

17. 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: 0 0 0 120px; }

18. 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: 0 0 0 120px; }

19. 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; }

20. 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; }

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

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

27. Additive Facilitates good architecture New features http://webformsmvp.com

28. Web Forms MVP

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

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