Expression Web 3: A Developer's Overview

By Curtis Dicken

Introduction to Expression Web 3

Recently, I took a look at one of the premier web design software packages available today, Dreamweaver CS4. In this article I’ll begin to explore another popular web design suite, Expression Web 3 from Microsoft. I’ll cover some of the best features of Expression Web 3 as well as point out a few shortfalls.

What’s Included

When you purchase or download the trial version of Expression Web 3 you will actually get 3 products, Expression Web, Expression Design and Expression Encoder. Each are very specific in their purpose but are designed to complement one another. Here is a breakdown of each piece:

Expression Web – This is the workhorse of the suite. It handles all of your standard design needs for coding and designing. It’s the base web design piece that Expression Design and Expression Encoder are designed to complement.

Expression Design – Here you will take care of your graphic design needs. This piece has nothing to do with the layout and design of your web pages; it’s strictly a graphic generation tool. It’s basically Microsoft Paint on steroids. If you have ever used Adobe’s Photoshop or Illustrator products then you will feel quite at home with the look and feel of Expression Blend. The tools and functionality are fairly similar.

Expression Encoder – If you are heavily into video and/or you use Microsoft’s Silverlight in your website design work then this product will be just what you are looking for. It has support for video capture, video streaming (with IIS), and tight integration with Silverlight.

Feature Overview

While each of the three pieces mentioned above are useful to a web designer, we are focusing on products that provide actual web design and coding functionality, i.e. Expression Web. If you are interested in learning more about Expression Design or Expression Encoder you can read about them and even download a trial version for the Microsoft website.

There are several features of note in Expression Web. I will discuss some of the more basic features below. In the next edition of this series I will take a look at some of the more advanced features. For now, here are the basics:

Technology Support – Microsoft touts their support for different technologies which include PHP, HTML/XHTML, XML/XSLT, CSS, JavaScript, ASP.NET and ASP.NET AJAX, Silverlight, Flash, Photoshop files, and video/audio. As you can see all of the basics are covered as well as everything that Microsoft has to offer … imagine that. Then there is the oddball PHP support which is fair at best. The PHP support is obviously an attempt to broaden the market base for Expression Web, however it is clearly not a priority. Don’t get me wrong, the PHP support isn’t terrible, just adequate. Obviously, the broad technology support falls short of other products like Dreamweaver. If you deal exclusively in Microsoft technologies, though, Expression Web beats Dreamweaver hands down.

Standards Compliance – It’s apparent that Microsoft is proud of it standard compliance support for HTML, XHTML, Strict/Transitional/Frameset and CSS 1.0, 2.0, or 2.1. Don’t get too excited, though. Just because the functional support is good doesn’t mean the implementation is easy. For example, adding a new cascading style sheet (CSS) to your website provides you with only a blank page, no pop-up asking what schema to use or how to start defining styles. To the beginner this blank page can be quite intimidating. However, once you start typing Expression Web does a pretty good job of giving you hints and suggestions. What’s not intuitive is the placement and naming of tools. If you want to change your CSS schema the button for that is in the bottom right and the style tools are found in the top menu under format.

Views – Like just about every other website design package you have the choice of looking at your work in design view, code view or split view. Personally, I always choose split view because I just hate clicking back and forth. Split view is one of my favorite features in any design package.

SuperView – This view option is designed to help you troubleshoot issues between browsers. I really like the way this feature works. If you want to see how your design renders in IE6 versus the newest version of Firefox then all you have to do is click the SuperView button and then select your browser options. You will get a split screen view of each browsers actual rendering of your page complete with rulers that make alignment and spacing issues much easier to spot. You can also add more browsers to either pane. For example, you may want to compare Firefox to both IE6 and IE8. You can click the add button for your IE6 pane and add IE8 as an option then just clock the IE6 and IE8 icons to switch back and forth. Although quickly finding code that needs to be tweaked is much better in Dreamweaver’s Live View, comparing browser rendering is far superior in Expression Web. I wish I could blend SuperView and Live View together for Super Live View and get the perfect solution.

Photoshop Support – Support for Photoshop is a must for any good web design package these days. While Microsoft makes a good stab at photo editing with Expression Design, Adobe’s Photoshop has been around too long and is too ingrained into the web design industry to discount it. With this feature Expression Web will let you import your Photoshop files directly into your website and it will take care of converting them into either PNG, GIF or JPEG formats, your choice. It will maintain layer and transparency when possible and can automatically update your web images when you make changes to your Photoshop files.

Conclusion

Expression Web is a far cry from its predecessor FrontPage. The layout is fairly intuitive, the look is sharp, and the features are good (albeit seriously slanted toward Microsoft products). In the next article in this series I’ll take a look at the more advanced features and give an overall assessment of Expression Web.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •