Comments - Oxite: Putting Your Design Front and Center - Opinions - MIX Online

Re: Oxite: Putting Your Design Front and Center

Joe — Tue, 16 Dec 2008 22:51:35 GMT

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.

Re: Oxite: Putting Your Design Front and Center

Cal Simms — Wed, 17 Dec 2008 00:13:16 GMT

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?

Re: Oxite: Putting Your Design Front and Center

Joshua Allen — Wed, 17 Dec 2008 00:43:16 GMT

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?

Re: Oxite: Putting Your Design Front and Center

Joe — Wed, 17 Dec 2008 01:09:17 GMT

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.

Re: Oxite: Putting Your Design Front and Center

Joshua Allen — Wed, 17 Dec 2008 03:26:31 GMT

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.

Re: Oxite: Putting Your Design Front and Center

Joshua Allen — Wed, 17 Dec 2008 03:55:35 GMT

@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

Re: Oxite: Putting Your Design Front and Center

WebDesignTX — Wed, 17 Dec 2008 15:22:09 GMT

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!

Re: Oxite: Putting Your Design Front and Center

Joshua C — Wed, 17 Dec 2008 18:25:37 GMT

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.

Re: Oxite: Putting Your Design Front and Center

Nishant Kothary — Thu, 18 Dec 2008 08:59:47 GMT

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

Re: Oxite: Putting Your Design Front and Center

Lucas — Tue, 23 Dec 2008 03:45:48 GMT

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?

Re: Oxite: Putting Your Design Front and Center

Nishant Kothary — Tue, 23 Dec 2008 05:22:36 GMT

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

Re: Oxite: Putting Your Design Front and Center

Lucas — Tue, 23 Dec 2008 05:53:57 GMT

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.

Re: Oxite: Putting Your Design Front and Center

Bob — Mon, 05 Jan 2009 02:17:35 GMT

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

Re: Oxite: Putting Your Design Front and Center

Joshua Allen — Mon, 05 Jan 2009 21:28:22 GMT

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

Re: Oxite: Putting Your Design Front and Center

Duncan Mackenzie — Wed, 28 Jan 2009 02:37:12 GMT

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