Future of Web Apps Miami - Conference 22-24 February 2010

News Flash

Great little extension for cool email signatures: http://www.wisestamp.com (via @keirwhitaker)

Blog:

22 January 2007

Microsoft Expression Web Final Release

By Rachel Andrew

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.

Rendering in Standards Mode

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!

Creating a CSS Report for a page

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.

Selecting a CSS layout

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!

A failed 3 column layout

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.

digg.com logo Like this article? Digg it!

42
FOWA Miami banner ad

42 Comments

Have your say:

Subscribe to our Newsletter

Sign up to the Think Vitamin Newsletter to get updates on web design, web development and web entrepreneurship as well as special offers and discounts from Carsonified. Rest assured we never share your email address.

Subscribe to the Think Vitamin articles RSS feed

Future of Web Apps Miami - Conference 22-24 February 2010

News

Twitter

Follow us on Twitter

Subscribe

Article Subscribers

Feedburner blog subscriber indicator

News Subscribers

Feedburner blog subscriber indicator

Subscribe by Email

You can receive Think Vitamin updates via email. Just pop your email address in the box below and click the arrows.

Subscribe by RSS

You can also receive new Think Vitamin posts via your RSS feed reader

Subscribe RSS Think Vitamin is a proud member of the Smashing Network

Ads Via The Deck