Microsoft’s Expression Web Designer vs Adobe Dreamweaver 8

For the best part of this year and most of last year, the new buzz word is Web 2.0. Web 2.0 has come to represent a new generation of web technologies to the developers and the social community alike. Web 2.0 while representing large fonts and bright colors and curvy corners, also ushers in a new age of standards such as CSS, XHTML, data transfer and sharing standards like XML and accessibility standards for the visually impaired(remember the Target fiasco). There exists this delicate balance between creativity and supporting standards and this is hard to achieve and for the longest time, one tool has dominated the web design and development world was Macromedia Dreamweaver. Adobe scooped up Macromedia and trying to drive the next generation web development through further upgrades of Dreamweaver. It seems that Microsoft got tired of relying on FrontPage and is actually going after professionals.Microsoft finally drank the Kool-Aid. Now, Microsoft has entered the arena with Expression Web Designer which walks the Web standards walk. But is it a worthy competitor or just a new technology out there? We at Askstudent looked at the latest beta release(CTP) of Expression web designer and perform a comparison of Microsoft’s product with Adobe Dreamweaver 8, the latest stable release of Dreamweaver.

Installation

You can download the latest Beta release of Microsoft Expression Web from Microsoft’s Expression Site. I installed this with my OS as Windows Vista RC2 and I was running the Office 2007 Beta 2 Technical Refresh. The only thing you need to take care of is if you did not upgrade to technical refresh of the Office 2007 version, you might want to do so. Also, you need to download and install .Net Framework 2.0, but , if you have Vista installed, Framework 2.0 is already installed. Downside: There is no OSX version which is negative as most of the web design community tends to use an Apple machine. However, with Bootcamp, this problem can be mitigated on an Apple machine. Again, Microsoft’s expression is Windows only and according to Microsoft, there is no planned release for OS X any time soon.

First Launch & Code View and Design View

Launching Expression displays the IDE with a default design view unlike Dreamweaver which when launched the first time allows you to customize your view. That being said, the IDE is very intuitive and it is easy to customize it accordingly. In the above picture, we see the IDE with a default valid XHTML Transitional document for a new HTML page, a good start towards being standards compliant. As in Dreamweaver, you can work in Code View, Design view or Split View. With Code View, all the options one would expect like line numbering, code completion and also intellisense of auto insert. A quirt with auto insert is that say you go into coding, type in say h3 then it fills out the closing tags for you. However, if you go in a delete the closing tags, it does not autofill for you unlike Dreamweaver 8 which detects the last open tag and fills in the closing tag automatically. If you are coming from a Visual Studio environment, you are going to love this feature ‘code snippets’. Yes, you can create your own “Code Snippets”, where you select a section of the code, right click and choose ‘Create Code Snippet’ from the context menu. If you give it a name, the shortcut Ctrl-Enter brings up your list of Code Snippets. If you switch to Design View from code view, formatting elements in Design view results in the addition of elements and a class created in an embedded stylesheet in the head of the document.

DOCTYPES and CSS layout

Like in Dreamweaver8, Expression allows you to choose and switch between the various DOCTYPES when creating a new document. To create a new document in Expression select File > New > Page, in the dialog that opens, click on ‘Page Editor Options’ and you can then choose from a range of DOCTYPES. One of the things I was very impressed with Expression is the way it handles complex layouts. Adding content and editing attached stylesheets was very easy and also you do not need to worry about drag or resize positioned elements. This is a huge plus for MS Expression. Take care that the program is set into Auto mode in Style application. You can set this mode from Format > CSS Styles > Style application

Dreamweaver Strengths and Weaknesses

The biggest strength of DreamWeaver is its market share and the fact that for many people including me, it was the only tool we used and learnt to love. Dreamweaver has a wonderful design surface upon which you can build excellent solutions. Also, Dreamweaver tightly integrates with graphic tools like Adobe Fireworks and photoshop. The main challenge with Dreamweaver is support for Server Side scripting models such as PHP, JSP and ASP.Net with the only exception being that of ColdFusion.

Microsoft Expression weaknesses and strengths

Weaknesses

a. Web Designer currently only supports ASP.NET. Microsoft built the ASP.NET platform; it isn’t a surprise that Expression Web Designer was designed to support that platform. This is obviously a drawback for those designers who work with PHP, JSP, and other non-ASP.NET platforms, making it difficult for Microsoft to expand its reach beyond the ASP.NET users.
b. The lack of an OS X version which is a shame as a lot of designers are Mac users. One reason why Dreamweaver has been so successful, over the years, is that it runs identically on a Mac and PC.
c. While developing in Expression, you get this feeling that you are using Microsoft Word. Maybe we will see a ribbon interface like in Office 2007 before the final release making it even easier for n00bs and professionals alike to develop webpages.

Positives

a. A highly CSS capable visual editor. In Design Interface, it truly displays content correctly on the screen. Dreamweaver is messed up in this area.
b. MS Expression is awesome for editing XHTML and CSS on the fly, because it validates as you type.
c. Web Expression points out each code error with the red squiggly line, like Microsoft Word does when it finds typos. Roll the mouse cursor over the problem code, and a description of the problem appears in a tooltip. In Dreamweaver, you must proactively run validation to find errors, although Dreamweaver occasionally highlights errors like a missing closing tag. The same applies for the spellchecker. Expression uses the familiar red squiggly lines whenever it thinks that there’s a misspelled word while Dreamweaver requires executing spellchecker.
d. Integration: Nice integration with its biggest competitor. Expression web designer allows you to integrate with a Dreamweaver site and even use and apply DWT files or Dynamic Web Templates as they are called in web designer. There is no change in source code and one can easily pop in and out of Dreamweaver and MS Expression as if nothing had happened. Also, MS Expression integrates well with VS 2005 and VS Web Developer Express.
e. Unlike Dreamweaver, Expression Web Designer was built from the ground up to support Web 2.0 and the standards for today. You will not find support for legacy standards, such as the FONT tag, BLINK tag, and B, for bold tag.

Conclusion

When Microsoft was talking about Expression, many people including yours truly feared that it might just be a glorified Front Page with a new skin. However, after the test drive, I feel that it is definitely up to date and in sync with how professional designers and developers are working. MS Expression is definitely a tool that designers can use to create eye catching web applications and still retain support for CSS and XHTML. This balance is hard to achieve, largely because the standards themselves can be difficult to understand and interpret correctly. Simple things such as adding ALT tag information to all images can be easily missed, but including them is essential for accessibility standards. At the same time, Adobe has re-done Dreamweaver design surface to support CSS and support for accessibility. The cost for the final product for MS Expression has not be established, but I think it will likely be in the $299-499 range, to compete with other professional Web Design products. Expression Web Designer, in its first CTP release, is already fulfilling a huge hole for designers. Modern ASP.NET 2.0 solutions can now be easily designed with a designer’s tool, not an engineer’s tool. Overall, I think MS Expression is a worthy competitor to Adobe Dreamweaver and competition would definitely help in pushing and developing the next generation of web technologies.