Author Archive

Having reviewed Microsoft Expression Web back in June 2006, giving it rating of 3 out of 5, I was glad of the opportunity to have a look over the final release version of the product, to see how well it supports designers in creating sites using CSS. Opening the boxed version I liked the enclosed guide to CSS selectors and the fact that the product actively markets itself on support for standards. Page 3 of the Quick Start Guide opens with the words,

“Standards-based websites

Expression Web solves a problem facing all web designers today: how to build websites that fully adhere to published standards, including support for XHTML.”

The product

Expression Web will only install on machines running Windows XP Service Pack 2 and newer versions of Windows. Once installed, the product looks slicker than the technology preview I reviewed in June, and it seems quite light on its feet. The rendering engine at the time of my last review was based on Internet Explorer 6, in this release the product claims to be using a non-browser based rendering engine and it certainly seems very accurate with the fairly complex designs that I tested in it.

The rendering engine picks up, from your DOCTYPE, whether you are aiming to render pages in ‘Quirks Mode’ – rendering as in Internet Explorer 5, or in ‘Standards Mode’. On removing the DOCTYPE from my XHTML page and then returning to Code View, the rendering engine switches from ‘Standard’ to ‘Quirks’ alerting me to the fact that my layout will now be rendered using an outdated rendering engine.

As a hand-coder I really like the real-time “as you type” validation of mark-up. Forgetting to close an element in XHTML for example will immediately cause the problem to be highlighted in the mark-up. Expression Web will also highlight non-standard elements according to the DOCTYPE you are using.

There are a whole host of CSS tools included with Expression Web and in this product designing using CSS is just how it is done, which is great to see. My personal favourite tool is the CSS Report. Running a CSS report on a page will locate all of the CSS rules you have used on that page – whether they are inline, in the head of the document or in an attached stylesheet – and list them in the Reports Window. Clicking on the Definition Location for that style jumps you to the actual location of the CSS. This is such a useful little tool – I wish I had something similar in the editors I use day to day, especially when working with other people’s CSS!

A puzzling issue

Things are going very well thus far, but in addition to looking at the product as an experienced developer I wanted to see how it might function to someone who has just purchased a copy because they want to build a website, without any prior experience. What better place to start than with the Quick Start Guide tutorial? The tutorial takes the user through setting up a site and then creating a new page using one of the CSS Layouts included, selecting a layout with Header, nav, 3 columns and a footer. This can be quite a tricky layout to achieve using CSS and so I was interested to see how it was implemented here.

In the next stage of the tutorial I used the Apply Styles Task Pane to add background colors to the sections of the layout, and to this point everything was going along swimmingly. Then I tried to add some content to the design, and things didn’t look so great with the sidebars laying over the footer. I had a pretty good idea what was going on before I looked at the CSS – the columns were absolutely positioned and so there was no way that this layout could work!

It is a strange enough fact that broken layouts were included with the product, what is even more puzzling is the fact that one of these broken layouts was selected for use in the Quick Start Guide. The screenshot in the guide even shows the sidebars overlaying the footer.

While these layouts being broken is not going to be an issue to the experienced developer who will already have their own favored methods of achieving them, it is a shame that what may be someone’s first introduction to using CSS layouts is going to be a problematic one.

Conclusion

Expression Web is an enjoyable product to use and for designers working on Windows XP it is certainly worth evaluating the trial download. For those working in a team with developers using Visual Studio the integration between the two products and the ease by which you can create and preview standards-based designs within Expression is going to be a real benefit.

For experienced developers who are happiest working in the code, Expression Web doesn’t get in the way. Unlike its predecessor Frontpage it doesn’t try to change your code to suit itself and the excellent rendering engine seems capable of rendering most layouts. As with any visual environment, working out how to create CSS visually takes a little effort, but if you are someone who enjoys working visually it would be worth the time spent as the rendering engine is very faithful to the view in a modern browser.

There are many features of this product that I do really like, and I think will be of real benefit to many designers. However it’s a shame that oversights such as the inclusion of non-working CSS layouts take the edge off the great work that has been done on this product.

• Software Name: Microsoft® Expression® Web
• Maker: Microsoft
• URL: http://www.microsoft.com/products/expression/
• Price: $299 USD (save $50 at Amazon)
• Rating out of 5: 3

Like this article? Digg it!

During the day I work on a Linux desktop, at home I use OS X. The main language that I develop in these days is PHP, however I also work in other languages as well as XHTML, CSS and JavaScript and I’m always keen to try out code editors, especially those which promise to support multiple platforms. So I was really happy to try out SlickEdit v11 which indicates on its website that it is a,

“… multi-platform, multi-language code editor that enables power programmers to create, navigate, modify, and debug code faster and more accurately.

Sounds good! As I’m at home I install SlickEdit on my G4 Mac Mini, on opening the CD I’m impressed to see the large number of supported platforms. That is definitely a plus in my opinion as it’s great to be able to use the same code editor no matter which box I’m sat in front of. On running the installer however I am disappointed to find that the software isn’t a native OS X application and will need to run under X11. This means that it can’t take advantage of inbuilt features of the OS and, to be honest, isn’t the most attractive application to use. Given that I didn’t want to judge the product on looks alone I also installed it onto Windows XP, where it looks far more at home.

As a coding editor SlickEdit has the usual features one would expect from any professional environment – code completion, syntax highlighting and so on. There are also some features that, once you got used to using them, could really speed up development. The Syntax Expansion – expanding block structures such as if, for and so on when you start to type – and ‘Surround With’ which will wrap a selection with a structure, works well, and you can define additional structures to those supported out of the box.

I particularly like the concept of ‘Backup History’, this isn’t a replacement for proper version control but instead, a feature which saves a backup of your file when it is saved and allows you to compare versions. This creates a backup of files that aren’t ready to be checked into your main version control – and you can compare versions – I can see this being a handy tool for many developers.

I think the best feature of SlickEdit is the ability to customise it, to shape the application to fit your own way of working. If you are a developer who is going to use this product as your primary development environment and is able to invest the time to learn it and to customise it to your needs, it looks to be a good choice, and certainly one worth looking at.

This customizability however, comes with the downside that the application is at first use quite difficult to get into and use. This was a difficult review to write as there is no way I can do justice to the product in a few words and after having spent a short while looking at it. However, the tool is designed for the professional developer, and so having some barrier to entry in the requirement to learn the environment shouldn’t be a problem given the features available once you are comfortable in using it. Also, there’s a dedicated community available to help with product questions.

If you are looking for a highly customizable development environment, or need solid support for a large number of languages in one editor then SlickEdit may well be worth a try. However if you just need a simple code editor, or are the sort of person who tends not to use many features in a development environment, then you might find that it is more complex than your needs dictate.

• Software Name: SlickEdit v11
• Maker: SlickEdit Inc.
• URL: http://www.slickedit.com
• Price: from $284 USD for a named user license
• Rating out of 5: 4 (for the professional developer willing to invest time into learning the environment, however lack of native OS X support – especially given the cost of the product – would lose this a point for Mac users)

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?

Installation

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.

Code editing

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.

Design View

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.

CSS Layout Rendering

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.

Conclusion

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.

• Software Name: Microsoft Expression Web Designer
• Maker: Microsoft
• URL: http://www.microsoft.com/products/expression/
• Price: Currently free to download Beta
• Rating out of 5: 3 – could well make a 4 by final release

Like this article? Digg it!