... or five reasons why you should use it alongside Visual Studio

by Ian Haynes

If you’re working on a web site or application in Visual Studio you may well be doing the design and front-end development there too. After all the web design surface is a version of Expression Web, isn’t it?

Well yes, it is closely related to Expression Web V1 but time and technology has moved on since then. Expression Web is now at version 4 and has recently had Service Pack 2, so the current incarnation is a long way from the old version you see in Visual Studio. Let’s look at some of the main features, including the additional goodness SP2 brings.

1. SuperPreview and Snapshot

You wish all your users have modern browsers, IE9 or Chrome but know some may be on IE8 or earlier. How do you test? Use Windows 7 XP Mode?

One almost indispensable tool in Expression Web, particularly once you’ve started using it, is SuperPreview.  This allows you to test your site in two browsers at a time, with the ability to hover over one of the views and see where the same elements are positioned in the other.

It has built in versions of IE6, IE7 and IE8 (assuming you’re using  IE9), will use a local version of FireFox 3.5 if you have it, and has cloud based Chrome (latest version), Firefox 3.6.16, 4 and 5 and Safari 4 and 5 for Mac.  You can view the two view side by side, horizontally or vertically or overlay them. It has guides, rulers and zoom features to identify layout differences.

Here’s a comparison between IE6 and Safari 5 Mac, with the positional difference for the ‘Archive’ heading tag shown in green outline, (IE6 on the left, Safari Mac on the right). We also see that Safari shows the drop shadow on the page container where IE6 doesn’t.

Although the views don’t allow you to use links or menus (ie you can’t navigate around a site), there is an interactive mode that allows you to log on to a password protected page and select a page to view thereafter.

A close relation to SuperPreview is the Snapshot panel. This is effectively a single SuperPreview  panel, supporting IE6 – 9, which can be opened and moved wherever you wish, perhaps to a second monitor.  You can have this open and preview pages in IE6 for instance.

2. CSS Tools and Intellisense

Expression Web has the ‘Design’, ‘Code’ (Source) and ‘Split’ views you’re used to in VS and the code it produces is fully standards compliant, with the intellisense in code view being tied to the authoring preferences you choose to work use, with HTML5 and CSS3 being included.

The CSS intellisense and management tools are first rate and a notch up those in VS. No more Ctrl-J to list the CSS options!  Notice the HTML5 parameters here.

jQuery intellisense is also slightly more advanced and pulls up the IDs used on the page.

3.Snippets Panel

This is new with SP2 and gives a really convenient way to create, manage and use snippets, whether your own or those downloaded from the Expression Gallery. There’s a good range of default snippets too, for JavaScript, jQuery, CSS3 etc. (Defaults highlighted in yellow, below left).

4. Extended HTML Toolbox (see above right)

The main toolbox is similar to Visual Studio, with the HTML and ASP.Net tags listed, but with a more extensive list for HTML, including media tags/controls for Deep Zoom, Flash, Silverlight, Silverlight Video and Windows Media Player.

The media tags insert the appropriate controls and in the case of Silverlight videos it provides a selection of templates, encoder settings etc. and then encodes the video, adds the code to the page and creates the Silverlight files.

5. Add-In Model

New to V4, the Add-In model allows the savvy user to extend the product functionality using a combination of HTML and JavaScript, plus an XML add-in manifest file. The model has it’s own JavaScript API and a JavaScript bridge to the existing managed code API.

Add-ins created by users and the MS Expression Team using this model include add-ins for:

  • Accessible Pop-Up windows
  • Bing Maps
  • Bing Search
  • Flickr Image Browser
  • Pasting clean HTML from MS Word
  • Twitter and RSS Feeds
  • YouTube videos

Plus there’s an Add-In Builder and an Extensibility tester to help build them plus a SDK User Guide.

So, five pretty good reasons to start using Expression Web alongside Visual Studio, or on it’s own for that matter. It’s available on MSDN if you have a subscription but if not, there’s a 60 day trial version available.

Ian Haynes is an Expression Web MVP and has been a professional web developer since 1999, when he started working with FP98 and IE3. His company, Data Insite Ltd, has customers across Europe and provides ASP and ASP.Net web applications which to date have included content management systems, document filing systems, email listservers,  discussion groups and e-commerce, as well as conventional sites. He's always happy to share his enthusiasm for Expression Web with others.