MJHutchinson.com Michael Hutchinson's Home on the Web

Finally, someone found a clean way to do three-column fluid layout with XHTML and CSS. This solves just about every three-column layout problem I've ever had. It fixes the visual elements, keeping the footer at the bottom of the page no matter which column is the tallest, and resizing without the elements running into each other.

The visual side of this has been done before – especially with tables! – but what is most important about this version is that is using clean XHTML, with no extra non-semantic markup needed, though one div tag can be added for increased browser compatibility. What's more, it allows a good struture: when it's unstyled, it displays the heading and content before the navigation. This makes things easier for people with screen readers and older browsers.

I've been thinking about how the ASP.NET Visual Designer should work with CSS and good semantic markup, and I've been thinking a lot about the role of both of these in the Web. In particular, what part do they play with ASP.NET?

I believe that the content of a document should be kept separate from its presentation. Semantic markup is good; structured content is easier for a machine to interpret and convert, as well as being cleaner and more elegant. CSS allows us to style a document without affecting its markup, and the same stylesheets can be applied to multiple documents for consistency and efficiency. Good semantic design also improves maintainability and accessibility.

So far, so good. But what about web applications? HTML originated as a document markup language, but via forms-and-CGI based search interfaces, the web has evolved into a complete UI platform. It's simple enough to send one view at a time, abusing HTML to make it look like a UI, and using dynamic HTML and JavaScript quite a complex user experience can be crafted. Everything stored on the server, and anyone and everyone with a web browser can access it. This is what ASP.NET is targeting, as it is essentially an HTML UI framework.

But where does semantic HTML fit into this? A UI and a document are different things, and should be separated. I don't really care how semantically correct a UI is on principle, though it does have some advantages, especially accessibility. But the semantics of a UI and of a document are different. If only there were a 'document' tag that could be inserted into HTML to show which bits are documents or document fragments, and another set of tags for panels and menus and so on.

Usually the solution is to use CSS classes, with some kind of <div id="content"> containing the document. But what kind of CSS design system works well with this? I have considered a couple of approaches.

1. ASP.NET has a theming system for its own controls, and I'd like to have a "content" control with a designer that would allow you to style a piece of placeholder text and would generates stylesheet from that.
2. A general-purpose stylesheet designer that lets you view a document and see the breakdown of the rules cascade on any element, and edit them.

I think that both would be useful, actually. In both cases, however, I think it's important to keep the style design distinct from the document design, even if the "document" is a UI. I'm tempted to remove all the font size and style, italic, bold, indent etc. toolbar options from AspNetEdit and replace them with a CSS style selector and semantic element buttons like "em". Though I'm also considering ways of enforcing which types of elements different CSS classes can be applied to, maybe some kind of stylesheet schema, and a way to use schemas to enforce structured document design.

As an aside, I've often wondered why there isn't a "semantic word processor" that enforces document structure and styles, and removes the temptation to fiddle with the details.

Anyway, if anyone has any ideas about this, comments are welcome as always. I've already begun to implement some of the changes to the toolbox discussed last time; I decided to go with a simple treeview with a filtering box at the time. Unfortunately I'm very busy with academic work right now, but look for developments sometime next term!

Update:I recently came across microformats, which look cool. Nice semantically, meaningfully, defined structures. I'd love to have an HTML graphical editor driven by some sort of schema to restrict editing in certain regions of a page to particular formats like these.

Three months since I last posted on this site, and all of those early posts were just about setting the site up. Seems lie the site's a bit pointless, really. Not that I've been sitting idle; I've been snowed under with academic work. I'll get something interesting up here eventually, I promise.

For now, let it be known that I am procrastinating my exam revision by upgrading the site to Drupal 4.6.