You are reading a MIX Online Opinion. In which we speak our minds. Joshua Allen Meet Joshua Arrow

Opinions

18Comment Retweet

Oxite: Putting Your Design Front and Center

Dec 16, 2008 In Web Culture By Joshua Allen

If you’re a professional front end web developer, you care deeply about web standards and professional best practices like semantic markup, unobtrusive JavaScript, and CSS. And you’re used to seeing Microsoft’s web products painted in a not very flattering light regarding these best practices. It’s practically cliche to see a litany of standards validation errors on a random Microsoft web site; especially ironic on web sites which are intended to sell the Microsoft web platform. And if you’ve been in this industry for any amount of time, you probably know people who have turned down contracts with clients who demand that the site be developed in ASP.NET or Sharepoint, because of a perception that "it’s impossible to use ASP.NET to produce clean, semantic markup".

While some of these past criticisms were warranted, things are changing rapidly. With the release of Oxite and the accompanying articles, you have everything you need to accept ASP.NET projects without abandoning professional web standards and practices. Oxite is the first and only ASP.NET based open-source CMS and blogging engine that encourages you to do "standards first, markup first" web site creation; a professional best practice on other platforms like Django, Ruby on Rails, and PHP. Nishant’s article takes you step-by-step through "standards first,markup first" web site creation and the process of leveraging Oxite. And Molly’s article can be used to convince skeptical business decision makers who might not yet be sold on standards-first web site creation.

It’s Our Job

In the past couple of years at Microsoft,we’ve redoubled our efforts to support web standards. Examples include IE8 passing Acid 2, Visual Studio supporting JQuery, Expression Web built from the ground up to support web standards, and our web services stack baking in REST and JSON support. Because of our unique market position, Microsoft has a unique obligation to interoperability. In fact, Steve Ballmer and Ray Ozzie recently made it official — it’s our commitment and responsibility.

So, if respect for web standards is Microsoft’s official policy, why is it still so common to see skepticism regarding Microsoft products and web standards? This may be due to some lingering historical bias, but this alone isn’t sufficient to explain the perception. The simple truth is that there are still plenty of sites and projects out there which don’t produce clean, semantic markup (let alone markup that validates). I think this can largely be explained by historically different perspectives.

For starters, many of the most vocal and influential .NET developers come from a background similar to the people in the Enterprise Java community (in fact, many are converts from EJB). For them, the markup and JavaScript are a side-effect of the backend code, and the most important priority is to factor the server-side object model, state management and code as elegantly as possible. The server code is the starting point and purpose, and the markup is essentially a "necessary evil" that is used to connect the code with an end user.

Conversely, people coming from a professional front-end web development focus tend to see the markup (and JavaScript and CSS) as the most important part of the application. Elegant semantic HTML plus unobtrusive JavaScript make your application future-proof, open the door to automation, accessibility, and numerous other benefits. To these professionals, the server side code is less important — a necessary evil that exists to connect their elegantly factored client markup and code with a database or other service.

This isn’t to say that one perspective or the other is "wrong", but it does help explain the historical dearth of focus on "standards first, markup first" samples on the Microsoft web platform. When the most vocal and prolific community members have historically seen professional web standards as being secondary to server-side code factoring, it’s not surprising to see their samples, recommended practices, and products reflect those priorities.

Enter Oxite

We created Oxite, first and foremost, to show how easy it can be to support professional web standards best practices on ASP.NET. Nishant’s article walks you through the process we used, and you’ll notice that it’s very similar to the best practices you would follow in Django, Ruby on Rails, or PHP. Don’t ever let anyone tell you that ASP.NET is a different beast — it *is* possible (and easy!) to start with clean semantic markup and have it emerge from the framework unscathed.

In addition, we created Oxite to be something that you can download and use in your own projects. We provide source and a liberal license, so you can use and modify the software how you like. We provide you with fully working code, so that you don’t need to become a backend coder yourself, but it’s exciting to see people from the community already creating tutorials and providing information about how to extend and improve Oxite.

Finally, you should know that there are other CMS and blogging platforms available for .NET, and Oxite isn’t intended to be a competitor or replacement. One of the most exciting things we’ve seen as a result of the Oxite launch, is renewed attention to "standards first, markup first" functionality across the board. While the other engines don’t claim to be focused on "standards first", you can fully expect that some will be tweaked soon to encourage and support professional front-end web engineering best practices. The positive feedback from those of you doing "standards first, markup first" development has been encouraging, and will undoubtedly influence all of us who build platforms.

We’d love to hear what you think. Is there room for a "markup first" CMS running on ASP.NET? What direction would you like to see Microsoft products move regarding web standards?

Follow the Conversation

18 comments so far. You should leave one, too.

Joe said on Dec 16, 2008

I think Oxite is a good sample; I have been looking at it and hacking on it a little already. That said, since MVC hasn''t even reached RTM yet, 99.9999% of ASP.NET sites are built on WebForms. WebForms controls still emit grotesque nested tables for virtually everything. We tried the CSS Friendly adapters project but it was missing too many controls and too many features. Microsoft needs to make a commitment to table-free layout for WebForms. One other suggestion: follow recommended guidelines for web publishing and don''t post entire articles in italics.

Cal Simms said on Dec 16, 2008

I am one of those developers from EJB background who thinks markup is a necessary evil. What would you recommend for people like myself to get up to speed on the best practices of "semantic markup". Is that like semantic web?

Joshua Allen said on Dec 16, 2008

Hi Joe,

Interesting feedback about sticking with WebForms. Are you thinking more about being able to convert legacy sites to table-free layout with minimal work, or that you would actually want to do new work in WebForms as well?

Joe said on Dec 16, 2008

Both. While MVC matures, there will be some things that are still easier to do in WebForms. It will be easier to hire developers that know WebForms. We also have a lot of legacy code that it would be nice to bring into the world of table-free layout. One of the biggest pain points for us is that we still can''t bridge the designer/developer divide very well. We have had a dedicated designer for years, but he has a hard time when we hand him these huge nested tables and tell him to adjust elements through CSS. That is another thing I would like to see Microsoft work on...how about some facility to enable Expression Web to render MVC pages into something static that can be used for styling? When these tools can work together seamlessly (I applaud the work apparently being done on TFS integration for Web/Blend), then Microsoft will have something extraordinary. As it is, I can''t get him to abandon Dreamweaver yet.

Joshua Allen said on Dec 16, 2008

Thanks Joe, this is good feedback. Astute observation about developer/designer workflow. The thing I found striking about this project was that we were able to accomplish a pretty clean dev/design split similar to what we try to do with XAML. And in fact, in one case where we were converting a page from WebForms to Oxite (for a different site), we did exactly what you suggest -- did a "save as" from the web browser to get the markup, loaded in XWeb, and turned it into a view. You could easily imagine doing this to convert WordPress themes to Oxite.

But the meta point you are raising is that these solutions are all aimed at people starting fresh. Definitely need to think about people who are migrating from WebForms.

Joshua Allen said on Dec 16, 2008

@Cal: Great question! "Semantic markup" is not the same as "semantic web". Traditionally, "Semantic web" implies technologies like RDF and dublin core, while "semantic web" (with small "s") implies microformats -- and "semantic HTML" is even more general. POSH, or "plain old semantic HTML" identifies a philosophy and set of best practices. Things like, "avoid DIVitis", don''t overuse "
", and so on.

If you are going to be at MIX09, you can check out the all-day workshop conducted by Nate Koechley (one of the founders of front-end web engineering discipline at Y!) and Molly Holzschlag (author of 30+ books on CSS). http://2009.visitmix.com/Agenda/Workshops.aspx#black-belt. Note that professional front-end engineering practices are entirely vendor and platform agnostic. Nate and Molly are the best people I can think of to lay out the whole philosophy comprehensively.

If you can''t make it to MIX09, you can search for and read as much as possible about topics like "semantic markup", "unobtrusive javascript". I''m not aware of any completely comprehensive reference, and you''ll need to look out for pages which provide bad guidelines, but here are some links:
http://www.kottke.org/03/08/standards-semantically-correct
http://brainstormsandraves.com/articles/semantics/structure/
http://www.bbc.co.uk/guidelines/newmedia/technical/semantic_markup.shtml

WebDesignTX said on Dec 17, 2008

You have no idea how welcome this is! Thank You! I use freelance developer contractors to build sites for my clients though I switched to Drupal and WordPress. The MicroSoft contractors were too difficult to work with by interfering with the design. The catch is Drupal contractors are hard to find. Now I can tell MicroSoft contractors to do things this way, like WordPress on MicroSoft!

Joshua C said on Dec 17, 2008

I work strictly as the design point in a MS only consulting/development firm. I can tell you that this is a wonderful thing to see. I''ve virtually given up on trying to explain to developers why doing things semantically is the way to go and I can say that it''s almost completely Microsoft''s fault and the code they render. Our developers basically say to me they see no need to modify the way they do things because Microsoft''s controls are already doing such-and-such a way, so obviously it''s the correct way.

I completely agree with Joe and that you need to be able to support 3 very important things from this point forward:

1) Integration with Expression and Team System needs to be solid. (more on Expression below)
2) Start supporting a standards based layout on current controls. CSS Friendly is OK but it''s missing a lot of the functionality that is built into the default control. VS08/3.5 did a better job, but it is still very table heavy.
3) Start educating your followers in why semantic based layouts are important and what MS is doing about it.

On a side note, I''m in a love/hate with Expression Web. I used Dreamweaver for ages but the separation between it and VS is usually too much of a pain. Web, while it got better with version 2 is OK, it still missing a lot. I would really like to see MS centralize some of the core aspects between the two applications. Things like color coding, formatting (and their options), tools, menu''s etc. There is too much of a difference in the core pieces that I tend to have a hard time switching back and forth with Visual Studio and Expression Web.

Nishant Kothary said on Dec 18, 2008

@Cal - Clearly, there''s no single definitive resource on semantic markup. There''s a lot of material on the web (Joshua has pointed out some awesome links). Another great place to start is Zeldman''s book, "Designing with Web Standards":http://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321385551/ref=sr_11_1/192-4216228-7555928?ie=UTF8&qid=1229586670&sr=11-1. You can get a taste for it "here":http://books.google.com/books?id=ZCPWYFoWaMIC&pg=PA56&lpg=PA56&dq=zeldman+semantic&source=bl&ots=VjB2nF_Lv8&sig=f9efV2eLq2-VeB1RrI1aDNCnGZ0&hl=en&sa=X&oi=book_result&resnum=4&ct=result#PPP1,M1.

@JoshuaC - You''re completely right about the 3 important things. I have a few comments:

1) Won''t do more than repeat what you already know, TFS integration is coming. It''ll make my life a lot better, too.
2) Better control-generated markup is definitely an area where we could improve... just know that resources are being pooled into this all the time. What''s your thought around going back to classic ASP-style scripting? Is that something that would be received well? In a sense, the MVC framework takes a step back in that direction, and clearly, the response there seems to be pretty positive.
3) The only way to impart the education in a scalable way is for all of Microsoft to get the value of standards and good markup; you probably know this all too well, Microsoft is like a bunch of little companies and we want all of them evangelizing the value of good markup. The good news is that large chunks of the company really get it and that''s pretty apparent from the related investments we''ve started making in our web platform (as Joshua mentions in his post above). Clearly, that doesn''t mean the job is done. I think you are raising a subtle but great point - we need to clearly connect the dots back to educating the followers.

The Expression Web feedback is great, too. The future versions of Expression Web will, in fact, be reusing the VS code editor, so you should expect to start seeing a lot more synergy between the two. When it comes to sharing menus and other app UX-related stuff, the decision isn''t very straightforward. Consistency is generally great, but when it comes to app UX - which is a fairly immature area of software development - continuous improvement is often the way to go. I''ll definitely forward your feedback to the Expression Web team... this should be a useful reference point for them as they evolve the app experience.

By the way, thanks for the excellent thoughts. Keep them coming.

Lucas said on Dec 22, 2008

Here''s my question. I just checked some ASP.NET web applications I built over the years. I admit my pages don''t validate.

So, I looked at those links you gave to @Cal and gonna use them in future projects. But you could make it a lot easier if you show us how to add validation to our unit tests. Lots of us make heavy use of unit tests and that''s why I am interested in MVC. Thing is, I don''t see any way to do validation of "semantic markup" in the unit tests. That makes it kind of hard to reach quality, don''t you think?

Why doesn''t MVC make it easy to do unit test of validation and "semantic markup", too?

Nishant Kothary said on Dec 23, 2008

@Lucas - The quick and dirty answer to "What is semantic markup?" is - use markup that represents the content. In other words, if you have a heading, use an <h1> tag, if you have a list item, use a list item element, and so on. Essentially, use markup that provides meaning to the content, thus rendering the content "semantically" correct. Roughly speaking, another way to think about it is to compare it to the concept of strong typing in programming. As far as primitive types go, everything is pretty much a string of characters until it''s stored in a variable. As the programmer, you decide whether a variable temp that stores the value ''a'' needs to be treated as a char or an int. For a much better answer, check out "this wikipedia entry":http://en.wikipedia.org/wiki/HTML#Semantic_HTML.

I think what you''re asking for is a program that can determine whether some markup is semantic or not and there''s just no true way to determine that using code. Code doesn''t know what it is; it''s a classic AI self-awareness issue. How do you write a test to figure out whether the string "Hello World!" in a page was intended to be a header, a paragraph, a line-item, a blockquote, a link, etc? Only the author knows that.

What you can do is validate the markup against the W3C spec (which is what all the validators do), but this gets you, in my opinion, only 20% there because it tells you very little about the semantic quality of the markup. You could very well use only div tags to mark up every element of content on the page, aka "divitis":http://csscreator.com/?q=divitis and the document would still validate perfectly well. But it''d be horrible semantically and subsequently alienate you from the strongest aspects of XHTML/CSS. Unfortunately (and fortunately), HTML is extremely forgiving, so it just comes with the territory.

There are different schools of thought on how we solve the problem such that everyone in the world starts writing good semantic markup. Software vendors like Adobe and Microsoft are pursuing a tools approach to the solution, i.e. let''s build tools like Dreamweaver and Expression Web to really help create better markup, but you could argue that the best solution available right now is education. Tools can help you create clean markup, but only the author/designer/developer has the ability to make sure it''s semantic.

Hope that makes sense.

Lucas said on Dec 23, 2008

Thanks Nishant. I see what semantic markup is. I already bookmarked the links for @Cal. Thanks for that.

I see what your saying about a test for good architectures. Unit tests can''t do that for sure. But I guess W3C validator is automatic so it could be called from a unit test. Someone can come up with unit test for that. Maybe I will do it.

Right you make sense. And I read the links. Validating doesn''t mean the markup is semantic. But validating is a good test since you have a bug if it doesn''t validate. So I will start doing that for my test pass.

Bob said on Jan 4, 2009

@Joshua Allen - I found your comment to Joe a little disconcerting. It almost implies why would anyone want to stick with WebForms. While I think it is great that MS is putting resources into MVC, I surely hope they continue to invest in and improve WebForms. They should definitely solve the bad markup that is emitted by the base controls. I have invested millions of dollars developing applications based on WebForms (as have tens of thousands of other developers) and don''t plan to throw it out to switch to MVC. If I wanted to do that I would switch to Java since it is much easier to find Java developers that understand MVC whereas the Microsoft developers only know WebForms. WebForms has proven to be a very capable platform and I hope MS continues to invest in its future.

Joshua Allen said on Jan 5, 2009

@Bob - That''s a good point. Agree 100% about getting cleaner markup from WebForms, and WebForms is not being abandoned or deprecated. We are talking here specifically about the scenario where the design and markup come first, and are then wired to backend functionality -- that scenario is very important to the typical standards-based web designer or agency, and WebForms isn''t really suited to this. In the past, we had to custom-build our own HttpHandlers and essentiallly build our own "MVC" layers to accomplish this. What we''re showing here is that it is now possible to accomplish this "markup first" scenario with our tools.

Note that there are MVC "enthusiasts" who don''t care about this scenario, either -- both in ASP.NET and Java communities. They are far more interested in MVC simply as an enabler of TDD, and don''t care much about markup purity. The purpose of our release was not to promote MVC as being better than WebForms -- to us, MVC is just a means to an end, and the end goal is "markup first" site development. ASP.NET MVC made accomplishing that goal a breeze, but it''s not the only way.

Duncan Mackenzie said on Jan 27, 2009

I love markup! (and i''m testing something)

mohammad said on Jul 18, 2011

thinks for this good work

gooma said on Aug 22, 2011

what the hell

Valentino Purses said on May 23, 2012

Curious to determine what all you intellectuals need to say about this?-?-.