Microsoft has launched their Dreamweaver competition product in a free trial download. The new product is called Microsoft Expression Web Designer (MEWD).
The Microsoft page touts the following as their most highlighted features of the product:
- Standards-based Web sites
- Sophisticated CSS-based layouts
- Extensive CSS formatting and management
- Rich data presentation
- Powerful ASP.NET 2.0-based technology
Of course, the thing that many people are worried about getting as a Microsoft web development product is some new and prettier version of Frontpage. In fact, this review article from Vitamin talks in depth about a trial run that Rachel Andrew did on the MEWD.
There are some good screenshots and her impressions in that article, so let me just cover the basics. First off, you need to have Windows XP (with SP2), Server 2003, or Vista. Plus you need the .NET framework installed, and you must have Internet Explorer 6 (with SP1) as well. You also need at least 128 megs of ram. The software alone weighs in at a hefty 224mb, though that’s unsurprising for a Microsoft software product (or even Adobe/Macromedia for that matter).
Well, I went ahead and installed it, and I have to admit that it feels exactly as if I were using Word or Visual Basic. I suppose in a way that’s good, because they have a standard ‘look’ to their applications. However, since I’ve never liked how those apps are laid out (I think the usability is quite lousy) it’s not exactly a bonus for me. Moving on, I tried to start using the graphical drag-and-drop editor. That was a bit of a trial for me since I hand code.
I decided I’d try to make a regular three-column layout with a header and footer. Well, didn’t quite get that far. I grabbed the little div graphic, drug it to the design view, and expanded it for a header. That worked. Then I did the same for a left column. That worked also. However, after I’d done that left column I apparently lost the ability to put a div anywhere but inside that left column. So much for dragging over a content div. No matter how many times I tried to do it, it didn’t work, the div kept ending up inside the left content. I tried doing a shift select to grab the main blank section as the active area, but it didn’t work. That, is something they really need to add. Anyway, I decided to play with the layer control instead. Now -that- worked much better for positioning and it actually let me add a new div to the content area using the layer control. Of course, that layer control is for layering, but if they removed the z-index and layering aspects of that control and put that functionality in the regular div area instead, it would work. I’ll show you what code this managed to create for those divs:
<div style="height: 111px">
</div>
<div style="width: 144px; height: 367px">
<div style="position:absolute; width: 539px; height: 361px; z-index:1; left: 163px; top: 131px;" id="layer1">
</div>
</div>
Well, at least the web code automatically starts with a XHTML 1.0 Transitional doctype and a utf-8 character set. Of course, I’m staring at all this inline styling and start looking for some nice little tool that will automatically strip that out and put it into the head. I don’t find that. I -do- find something else useful though.
In Tools -> Page Editor Options -> CSS tab, you’ll find that some things are set automatically to generate inline styles instead of classes. I see that both the page properties on the <body> tag and the properties for sizing, positioning, and floating are all set to generate inline styles instead of classes. I don’t have the faintest idea why someone thought making inline styles for those was a good idea, but I went ahead and switched them out for classes and rules instead of inline. Okay, now I went ahead and drew a div for the footer in my page. Much better!
It not only generated the following HTML:
<div class="style1">
</div>
It also created the following CSS and automatically inserted the appropriate start and end of the embedded style tags in the head.
<style type="text/css">
.style1 {
height: 60px;
}
</style>
What is mildly nifty about that is that in the HTML the word “style1” is a hyperlink in the code. When you click on it shoots you over to the embedded CSS for that class brings up the CSS properties in one of the side windows. So I suppose that is mildly better.
One nice feature is the keyword insert of things like the doctype. I wanted to change the doctype to XHTML 1.0 Strict, and was looking to see if there was some sort of quick property. I couldn’t find a menu link (doesn’t mean it’s not there, just that I didn’t see it) but I did discover a keyboard shortcut by doing CTRL+ENTER.
For previewing in multiple-browsers, I was impressed that they even offered the option, and you can actually add browsers to the list and the software will auto-open them for you.
Overall, there is some good and some bad here. I know that my view is a bit jaded because I’m really not used to using graphical web development software. I always feel like I’m spending more time fixing the code they generate than I would if I just coded it by hand. So, if anyone else has another (possibly less jaded) opinion on this software, please chime in.
~Nicole
Good review, I really need to try it out and see what I think of the Word-feeling you speak of. Thanks!