Developing Web Applications with ASP.NET and Web Standards

Milan Negovan

AspNetResources.com

The End Game

ASP.NET is a very powerful platform for building the Web.

No matter how complicated back-end logic is, a Web Form ultimately produces HTML.

The $1M Question

Do we pay enough attention to the quality of HTML we send back to the user?

We can do better!

"Tag Soup" of Latter Days

Over the years it has become a habit to mix presentational and structural markup thus creating "tag soup" (familiar to developers as "spaghetti code")

• <font> elements to set font face, size and color
• <table> to lay out page elements
• <b>, <u>, <i>, etc
• <blink>, <marquee>, <center> for "glamorous" effects
• <bgcolor> to set background color

How Did We End Up in This Mess?

• Developers were never taught properly
• WISIWIG tools produced proprietary or plain messy markup
• Years of "dot-com" pushed bad practices (browser sniffing, code forks, design for one particular browser, etc)
• As a result ~95% of web sites are obsolete
• W3C is not aggressive enough

What is Semantic (Structural) Markup?

se•man•tic

adj: Of or relating to meaning

• Semantic markup is about meaning. How does an element describe the content it contains?
• Example: <h1> connotes "the most important heading on the page", not "big, bold and ugly"
• Example: <p> designates a paragraph of text, not a fancy way to insert a line break

The Web Standards Trinity

A suite of specifications developed by The World Wide Web Consortium (W3C)

What is XHTML?

• HTML reformulated with XML syntax
• Both HTML and XML
• There's no advantage to use HTML 4.x any longer
• XHTML 1.0 spec has been around since 2000!
• Stricter rules for authoring markup

XHTML Ground Rules - Part I

• Document must contain correct DOCTYPE
• Documents must be well-formed
• Element and attribute names must be in lower case

XHTML Ground Rules - Part II

• Non-empty elements require end tags (eg. <p></p>)
• Attribute values always quoted (<a href="...." />)
• Empty elements always closed (<br />)

XHTML Ground Rules - Part III

Some elements and attributes have been deprecated

• <BASEFONT>, <FONT>, <CENTER>
• <U>, <APPLET>, <ISINDEX>, <S>, etc
• name attribute of <img>, <form>, <iframe>, etc
• Therefore validate!

DOCTYPEs

There are three DTDs in XHTML 1.0

• Strict: Elements deprecated in HTML 4.x (such as font) are not allowed
• Transitional: Less restrictive DTD, i.e. deprecated elements are allowed
• Frameset: Pretend I didn't mention it

Validate

• Free HTML Validator (http://validator.w3.org/) from W3C
• Free CSS Validator (http://jigsaw.w3.org/css-validator/) from W3C
• Validate, fix, validate, ...

What is CSS?

• CSS stands for Cascaded Style Sheets
• CSS specs (currently solid in ver 2.1) are maintained by W3C
• Use CSS to control page layout for various media, typography, colors, etc

Separation of Content and Presentation

• Structure pages with semantic markup
• Use CSS to control the "look and feel"

One Stylesheet to Rule Them All

You can style the same code base in various types of media. "Build once, read everywhere."

• browsers
• handhelds
• projectors
• printing
• assistive devices

Benefits: Development Savings

• Code is easier to redesign
• True separation of design and code - let everyone do their job without overlap
• No need to recompile .NET code if server controls produce structured markup
• Single code base, many skins
• Developers hate UI. Let designers deal with it

Benefits: Bandwidth Savings

• Markup is cleaner with smaller footprint
• Pages load quicker
• Less bandwidth wasted
• Browsers cache CSS - less to download with every page request

Benefits: Accessibility & Wider Audience

• Governmental web sites (in US) must comply with Section 508 of the Rehabilitation Act
• People with a wider variety of browsing devices can access your content
• It's only a matter of time before lawyers start suing over accessibility laws
• Better positioning in search engines

Don't turn people down based on what they use to access your site or product

Benefits: Future Compatibility

Future compatibility with emerging user agents

Benefits: Be Ahead of the Game

• Few companies are aware of standards
• Build superior, accessible applications
• Reach wider audience
• Seize the opportunity and sell standards!

Test in Multiple Browsers

• Avoid "IE only" mentality
• Avoid catering to one particular browser
• Test with text-based browsers (eg. Lynx)
• No more "this site best viewed in xxxxx"
• Case in point: IBM goes silent on Linux desktop effort

Downsides

• No browser implements the specs perfectly (hair pulling)
• Some browser manufacturers are slower or more reluctant than others (politics)
• Have to use CSS hacks to keep presentation acceptable in older browsers (I see old browsers. They are everywhere)
• Developers have to "unlearn" old habits (learning curve)

Mid-point Check

See if anyone in the audience is asleep and play "Ballmer sells Windows 1.0" to wake 'em up.

Case Study: Microsoft.com Home Page Redesign

Disclaimer: this was an unsolicited, unapproved exercise I undertook to demonstrate numerous benefits of developing with web standards. No animals were hurt in the course of this redesign.

1. A Web Standards Showcase
2. Genesis
3. Rolling Up the Sleeves
4. Pardon Our Dust
5. The Final Frontier

Web Standards in ASP.NET 1.x

• Server controls produce old, non-compliant markup
• Too much reliance on Microsoft's proprietary JavaScript and DOM
• Adaptive Rendering is evil

What is Adaptive Rendering?

• The Request object enquires about capabilities of the visiting browser
• Two tag writers to render HTML:
  1. System.Web.UI.HtmlTextWriter to cater to Internet Explorer/Win 4.x, 5.x, 6.x
  2. System.Web.UI.Html32TextWriter for all other ("downlevel") browsers

Problems with Adaptive Rendering

• Html32TextWriter converts <div> elements into tables
• Client-side validation doesn't work in "downlevel" browsers
• Tweaking machine.config to disable Adaptive Rendering won't do much good
• Unpredictable ids of controls make them a difficult target for styling

ASP.NET 2.0: Huge step forward

• <xhtmlConformance mode="Transitional|Legacy|Strict"/>
• Server controls produce standards-compliant markup
• Web Forms produce XHTML Transitional markup by default

VS.NET 2005: Huge step forward

• Helpful IntelliSense with HTML and DOM
• Built-in accessibility checker

ASP.NET 2.0: Control adapters

Allow you to tap into control rendering and tweak the ouput. Use them to produce markup of your choice.

Example: ASP.NET 2.0 CSS Friendly Control Adapters 1.0

Game Plan

• There is no "secret sauce recipe" for ASP.NET developers
• Apply what you learned today in everyday work (web forms, server and user controls)
• Validate
• Don't lock yourself in on one specific browser
• Stop abusing browsers and write proper markup!

Resources

• Book: "Designing with Web Standards" by Jeffrey Zeldamn
• Book: "Eric Meyer on CSS" by Eric Meyer
• Book: "Web Standards Solutions: The Markup and Style Handbook" by Dan Cederholm

Resources

• Book: "Don't Make Me Think: A Common Sense Approach to Web Usability" by Steve Krug
• Blogs, blogs, blogs

Thank you. Come again.