One of my roles at The Web Standards Project is on The Dreamweaver Task Force, and as such I have a great interest in authoring tools and particularly in how they can assist those who prefer to work visually to develop standards compliant websites. The beta release of Microsoft Expression Web Designer gave me a chance to have a look at how this new contender in the marketplace stacked up - is it just FrontPage with a new skin, or actually a real competitor to Dreamweaver 8?
You can download a ‘Community Technology Preview’ copy of Microsoft Expression from http://www.microsoft.com/products/expression/en/web_designer/wd_free_trial.aspx. You need to be running Windows XP with Service Pack 2 to install and there is no OS X version. Launching Expression displays the IDE with a default valid XHTML Transitional document - which is a good start.
As in Dreamweaver 8, Expression enables the developer to switch between different 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 will find that you can select from a range of DOCTYPES.
The IDE will be familiar to anyone who has used another visual development environment, however it also feels like a Microsoft Office Application - meaning that I approached the Formatting Toolbar with some trepidation unsure exactly what it would insert into my document. In fact, the Toolbar performs a similar function to the Properties Inspector in Dreamweaver when formatting an element, adding a class to the selected element and creating that class in an embedded stylesheet in the head of the document.
As in Dreamweaver you can work in Code View, Design View or Split View. As a code editor Expression seems capable with the sort of features that one would expect - line numbering, code completion and auto insert, all of which are configurable in the Preferences. You can create your own “Code Snippets”: select a section of code, right-click and choose Create Code Snippet from the context menu and the give the item a name and description. Hitting Ctrl-Enter while in Code View brings up your list of Code Snippets to insert.
As I have already mentioned, formatting elements while in Design View results in the addition of classes to the elements and a class being created in an embedded stylesheet in the head of the document. While this is likely to lead to an attack of ‘classitis’, I’m not sure what the alternative would be and this is an almost identical method to that which Dreamweaver uses.
I was pleased to see that despite its similarities to Dreamweaver, my long-time Dreamweaver irritation hasn’t made an appearance in Expression. In Dreamweaver, if you select some text and click ‘Indent Text’ in the Properties Inspector you get a blockquote - want to ‘indent’ some more? You end up with multiple, nested blockquotes! Expression goes a more preferable route by giving the element a class and adding a 40 pixel left margin.
You can add (X)HTML elements to the document by selecting Insert > HTML or by double-clicking the elements in the Toolbox Panel. The strangest discovery here is that Expression has included a Layer button that, as in Dreamweaver, inserts an absolutely positioned div with inline styles. Why Microsoft has chosen to include this feature is a mystery. Dreamweaver Layers are really a throwback to older versions of the software, the cause of much confusion and in recent versions have been somewhat buried in the interface.
I was disappointed to see that inserting an image using either method does not also include an alt attribute or any prompting to add one. You need to add this essential attribute yourself using the Tag Properties Panel or directly in the code.
Rendering of pages laid out with CSS is something which has improved with each version of Dreamweaver and I was interested to see how a relatively complex layout would display in Expression; from the tests that I did documents seemed to render as in Internet Explorer 6 but were editable in terms of adding content and in editing the attached stylesheets using the CSS Properties Panel. You do need to take care not to drag or resize positioned elements as Expression will then add inline styles.
Expression is certainly no FrontPage with a new skin, this product feels up to date and relevant to how professional designers and developers are working currently. Probably my main issue with the software is the strangely disconcerting feeling that I am developing a website in Microsoft Word. There being no OS X version and the software only being available to users of the most up to date versions of Windows will limit take-up of this product. That said, as a standards advocate and someone who has some understanding of the inherent difficulties in creating a CSS capable visual editor, I think this is a worthy competitor to Dreamweaver. I think competition in this market will be a good thing, especially when both competitors are using standards compliancy as a main selling point.
Like this article? Digg it!
One of my roles at The Web Standards Project is on The Dreamweaver Task Force, and as such I have a great interest in authoring tools and particularly in how they can assist those who prefer to work visually to develop standards compliant websites. The beta release of Microsoft Expression Web Designer gave me a chance to have a look at how this new contender in the marketplace stacked up - is it just FrontPage with a new skin, or actually a real competitor to Dreamweaver 8?
You can download a ‘Community Technology Preview’ copy of Microsoft Expression from http://www.microsoft.com/products/expression/en/web_designer/wd_free_trial.aspx. You need to be running Windows XP with Service Pack 2 to install and there is no OS X version. Launching Expression displays the IDE with a default valid XHTML Transitional document - which is a good start.
As in Dreamweaver 8, Expression enables the developer to switch between different 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 will find that you can select from a range of DOCTYPES.
The IDE will be familiar to anyone who has used another visual development environment, however it also feels like a Microsoft Office Application - meaning that I approached the Formatting Toolbar with some trepidation unsure exactly what it would insert into my document. In fact, the Toolbar performs a similar function to the Properties Inspector in Dreamweaver when formatting an element, adding a class to the selected element and creating that class in an embedded stylesheet in the head of the document.
As in Dreamweaver you can work in Code View, Design View or Split View. As a code editor Expression seems capable with the sort of features that one would expect - line numbering, code completion and auto insert, all of which are configurable in the Preferences. You can create your own “Code Snippets”: select a section of code, right-click and choose Create Code Snippet from the context menu and the give the item a name and description. Hitting Ctrl-Enter while in Code View brings up your list of Code Snippets to insert.
As I have already mentioned, formatting elements while in Design View results in the addition of classes to the elements and a class being created in an embedded stylesheet in the head of the document. While this is likely to lead to an attack of ‘classitis’, I’m not sure what the alternative would be and this is an almost identical method to that which Dreamweaver uses.
I was pleased to see that despite its similarities to Dreamweaver, my long-time Dreamweaver irritation hasn’t made an appearance in Expression. In Dreamweaver, if you select some text and click ‘Indent Text’ in the Properties Inspector you get a blockquote - want to ‘indent’ some more? You end up with multiple, nested blockquotes! Expression goes a more preferable route by giving the element a class and adding a 40 pixel left margin.
You can add (X)HTML elements to the document by selecting Insert > HTML or by double-clicking the elements in the Toolbox Panel. The strangest discovery here is that Expression has included a Layer button that, as in Dreamweaver, inserts an absolutely positioned div with inline styles. Why Microsoft has chosen to include this feature is a mystery. Dreamweaver Layers are really a throwback to older versions of the software, the cause of much confusion and in recent versions have been somewhat buried in the interface.
I was disappointed to see that inserting an image using either method does not also include an alt attribute or any prompting to add one. You need to add this essential attribute yourself using the Tag Properties Panel or directly in the code.
Rendering of pages laid out with CSS is something which has improved with each version of Dreamweaver and I was interested to see how a relatively complex layout would display in Expression; from the tests that I did documents seemed to render as in Internet Explorer 6 but were editable in terms of adding content and in editing the attached stylesheets using the CSS Properties Panel. You do need to take care not to drag or resize positioned elements as Expression will then add inline styles.
Expression is certainly no FrontPage with a new skin, this product feels up to date and relevant to how professional designers and developers are working currently. Probably my main issue with the software is the strangely disconcerting feeling that I am developing a website in Microsoft Word. There being no OS X version and the software only being available to users of the most up to date versions of Windows will limit take-up of this product. That said, as a standards advocate and someone who has some understanding of the inherent difficulties in creating a CSS capable visual editor, I think this is a worthy competitor to Dreamweaver. I think competition in this market will be a good thing, especially when both competitors are using standards compliancy as a main selling point.
Like this article? Digg it!
37 queries. 1.381 seconds
