Mink Machine

A first look at Expression Web Designer

I’ve had a look at the May 14th release version of Community Technology Preview (CTP) of Microsoft’s Expression Web Designer (codename Quartz), one third of the Expression series also including Interactive Designer (codename Sparkle) and Graphic Designer (codename Acrylic). Unlike Interactive Designer that targets WinFX Runtime Components Beta 2, the Web Designer is ready to go straight from the box.

Since the dawn of time, well almost, there has been a wide range of WYSIWYG tools for creating web pages. They usually offer some sort of interface where you drag components onto a canvas and the tool generates the code. Sounds great? Yep, but only without glasses. In fact, most WYSIWYG tools generate really bad HTML code that doesn’t follow web standards one bit, making the unexperienced web designer produce crappy stuff without even knowing it.

FrontPage is not a web editor, it’s an insult

The only thing that made me interested in the Expression Web Designer when I first heard of it (PDC autumn 2005) was Microsoft’s sudden decision to follow web standards. This was an unexpected move, but highly welcome since a lot of people tend to see Microsoft products as default, or maybe not even know of any alternatives. They may use FrontPage and IE6 all day long and suffer without even knowing it. FrontPage is not a web editor, it’s an insult. Expression Web Designer however, is something entirely different.

Like many web editors out there, Expression Web Designer enables window split between design and code. For instance, dragging a paragraph element onto the canvas results in this code with the result immediately available for preview:

Expression screenshot Generated markup.

But apart from all the usual stuff expected by all web editors, Expression Web Designer offers quite a lot of nice things. To be as clear as possible about what’s going on, the GUI is crammed with tooltips and help functions. The following is an example of such a tooltip while hovering above the Layer element in component view. For half a decade, the layer concept in popular tools such as DreamWeaver have confused web beginners since there is no literal counterpart in HTML. Read the tooltips and you don’t need to wonder. Simple but efficient.

Expression screenshot Tooltips at a glance.

Another nice thing is visually illustrating margins and paddings in the design view:

Expression screenshot Visualizing element hierarchy.

As you can see, the selected element in the preview pane is outlined with type information for quick identification.

So what about tables? Well, a simple “Insert table” with default parameters generates this code:

<style type=”text/css”> .style1 { border-style: solid; border-width: 1px; } </style> </head> <body> <table width=”100%” class=”style1″> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body>

The “width” attribute is questionable and the stylesheet is inline, but hey, it’s still a stylesheet and not too much tag soup.

What about standards and accessibility? Well, there is an Accessibility Checker which can found simple errors for WCAG and other concerns.

Expression screenshot Accessibility Checker.

There is also a Compatibility Checker for other needs such as CSS version compatibility:

Expression screenshot Compatibility Checker.

These tools are quite blunt and hopefully you won’t need them much. There is also a code completion feature which allows you to easily find correct attributes on elements, as well as realtime check of the code you just wrote for fast corrections:

Expression screenshot Advice on the fly.

The check also mentions eventual violations of accessibility.

Furthermore, I like that the editor doesn’t do things the classic Microsoft way, that is “I know better than you and have therefore changed your code to my liking”. In the following example, a deprecated attribute is deliberately placed on a <img> tag, causing the editor to prompt this friendly informative message:

Expression screenshot Advice for better standards compliance.

The CSS support is not too bad, but I would have hoped for a more aggressive approach, preventing the user from writing inline styles. The end result is not perfect, but it is a lot better than most other web editors out there.

As expected, this tool also seamlessly integrate other Microsoft products such as ASP.NET and Sharepoint:

Expression screenshot Tools of the trade.

Well, at least in theory. My own ASP.NET experiments made the editor jump out of the window, but I cannot really complain too much since it is a CTP version.

There is more to say about Expression Web Designer, but this will suffice for now until the ASP.NET stuff starts to work better. I’m quite sure this product won’t be enough for me to stop editing my markup and styles by hand, by if you insist on using editors such as FrontPage or Dreamweaver, I believe that Expression Web Designer will be a great replacement when it is released.

Comments

No comments yet.

Write a comment

Your email address will not be published. Required fields are marked *

Reine

About

Reine is a web developer who enjoys caffeine-fueled urban traveling. More...

RSS @reinel Instagram