Expression Web 3—New Features for PHP Developers

On July 22nd, Microsoft® released the latest version of Expression® Studio, its collection of tools for graphics, UI and web designers. A key element in this suite is Expression Web 3, Microsoft's professional code editor for HTML and PHP developers. Various compelling new features in this release justified an update of my article on this topic from last fall. Also, since the Expression Web 3 user interface represents a mild makeover from Expression Web 2, all of the screenshots accompanying the original article have been updated. There follows a brief explanation of the most important new features for PHP developers.

Read the original article, "Expression Web 2 for PHP Developers—Simplifying Your PHP Applications", with updated graphics

Document Preview Capabilities
My earlier article noted that Expression Web 2 contained a very convenient feature which permits viewing documents in progress via a built in development web server utilizing integrated browser support. By selecting the appropriate menu entry, the current document is displayed by the built-in web server in the selected browser at the chosen resolution. This feature could even be configured to launch multiple browsers at once in order to quickly compare how the document under development would display in different web browsers and at different screen resolutions. (Of course, only web browsers currently installed on your system can be previewed using this feature.)

Figure 1. The flyout tab illustrates the choices of browsers and screen resolutions which can be selected from the Preview in Browser menu entry.

As it turns out Microsoft apparently concluded that this feature wasn't convenient enough so it added two further even more impressive preview capabilities to Expression Web 3. The first is called Snapshot which can best be understood as a built-in real time preview panel. With the increasing popularity of multiple monitors (or at least larger and larger monitors), Snapshot can be used to provide a live view of the document under development in the browser type of choice. Changes to the document are immediately displayed in the preview panel as soon as they are saved to disk.

Figure 2. Expression Web 3 side by side with an undocked Snapshot panel.

Although you can only display one Snapshot panel at a time, you can switch browsers and resolution sizes directly from the panel by choosing the desired entry in the drop down lists. So the Snapshot panel gives you all of the flexibility of the Preview in Browser feature (other than the ability to display content simultaneously in multiple browsers) but in a floatable or dockable window which can be automatically refreshed simply by saving the document under construction.

Figure 3. Browser and screen resolutions are easily changed directly from the Snapshot panel.

And if you really do want to see your page simultaneously in two different browsers, the second new preview feature of Expression Web 3, SuperPreview, can accommodate you nicely. Just select the browsers you prefer and the desired screen size.

Figure 4. SuperPreview showing a page displayed simultaneously in IE 8 and Firefox.

In addition to both vertical (side by side) and horizontal (over under) layout options, SuperPreview includes an overlay option which places one browser rendering directly on top of the other one. Since the upper layer is partially transparent, any differences in layout will become immediately evident.

Figure 5. When the same content in both browsers is superimposed, differences in layout can easily be detected.

The bottom of SuperPreview contains a panel which displays the HTML DOM in tree view form. Any selected element displays its location in the DOM as well as detailed data on both Size and Top and Bottom positions.

Figure 6. When a particular element is selected, SuperPreview displays DOM tree information to identify the element.

Taken together, these screenshots illustrate how SuperPreview can facilitate the process of reducing cross browser display discrepancies. Using the superimposed layout it is easy to identify those cases where differences in browser rendered layouts exist. Then the diagnostic information provided by the DOM tree view and the size and position data helps to identify what is causing these layout differences. From this, the developer can devise new layout options and work through an iterative process (with immediate feedback) to reduce or eliminate these layout differences. And, as can be seen from all of these preview screenshots, each of the preview features in Expression Web 3 works very nicely with .PHP files. Unfortunately, however, neither Snapshot nor SuperPreview is currently capable of displaying Adobe Flash or Microsoft Silverlight™ content. While both display a placeholder for content of this type, the Release Notes caution that this rendering may not be entirely accurate.