S. Somasegar is the corporate vice president of the Developer Division at Microsoft. Learn more about Somasegar.
As the web continues to play an increasingly central role in terms of enabling people to create and deliver experiences and applications for consumers around the world, it is important to have a tool that is up to date with modern web standards and relevant to the needs of web designers.
Earlier this year at MIX ’09, we released a preview of Expression Web SuperPreview for Internet Explorer. This is a tool that helps web designers diagnose page layout problems across multiple browsers. SuperPreview will be released as a feature of Expression Web 3, and SuperPreview for Internet Explorer will be available as a free download. We are putting the final touches on Expression Web 3 now, and it will be available this summer 2009.
Here is a quick look at some of the new features in Expression Web 3, including SuperPreview.
SuperPreview is a tool that shows how pages display in multiple browsers and helps diagnose the root cause of any display differences. We recognize that customers have a choice over their preferred browsers – and so do web designers. Unfortunately, all browsers do not render pages exactly the same, so it is important to test pages across multiple browsers to ensure compatibility and design fidelity.
SuperPreview shows what a web page looks like in multiple browsers, including IE6, IE7, IE8 and Firefox 3. You can view the web page side-by-side or as an overlay and use rulers, guides, and pan and zoom tools to precisely identify layout differences. You can even overlay the page on top of a Photoshop image to verify that a page is visually close to the original design. Below, you can see how minor rendering differences between Firefox 3 and IE6 can impact the look of your website.
Since announcing SuperPreview at MIX09, we have added many new features. Now you can view the HTML Document Object Model (DOM) of your page in each browser. As you click on any visual elements in the rendering, they’ll appear selected in the DOM.
When you select an HTML element, Expression Web also shows a small bubble with additional information, such as size, distance from the left, and distance from the top. When these values differ from what they should be, the differences are highlighted. Below, the differing Left, Top, and Height values are shown in red text.
Often, you will want to preview your web page at different resolutions to ensure that your customers are getting a great experience at every screen resolution. You can select a preset browser rendering resolution, or enter any resolution using the Browser Size option.
Finally, if you are developing an ASP.NET or PHP web application and you preview an ASPX or PHP file, SuperPreview will launch ASP.NET or PHP to render the page and display the page as it would appear in each browser.
SuperPreview is a useful feature if you want to use a comprehensive set of tools to validate that your web page appears as desired in multiple browsers. While designing a page though, you may want to take a quick look at how a page is progressing in other browsers.
Snapshot Preview shows a browser preview of local HTML, ASPX, or PHP pages and updates live as you edit your markup, saving you the time and effort of loading the page in a browser to verify markup changes.
The Snapshot Preview panel can be dragged and docked anywhere in Expression Web 3 – you can even let it float on a secondary monitor. On the top left of the panel, you can choose the browser for the page rendering in Snapshot Preview. Snapshot Preview renders the page with true fidelity based on the chosen browser. It uses SuperPreview technology so the rendering is fully accurate, using the browser’s actual rendering engine.
We recognize that the web is a diverse place, so web designers need a standards-compliant tool that supports as many publishing standards as possible. Expression Web 3 supports publishing sites using WebDAV, FTP, SFTP, or FTPS to multiple destinations with real-time status of publishing progress. Expression Web 3 also supports multiple publishing destinations per site and multi-channel file transfer for fast performance.
With Expression Web 3, we have significantly improved capabilities and workflow when working with Photoshop files. When you import a PSD file, you can choose just the layers you want to import in to your website. You can save the layers as JPG, PNG, or GIF and scale the image before saving the individual layers in Expression Web 3. If the source file has changed, Expression Web 3 prompts you to update it.
Expression Web 3 allows you to quickly encode and insert Silverlight video into your website with a wide range of encoding and transcoding features using Expression Encoder 3. You can even choose from a set of video player skins that best matches your site graphics. Expression Encoder 3 supports high quality VC-1 and H.264 Silverlight video for streaming.
Other improvements in Expression Web 3 include support for Team Foundation Server source code control and Deep Zoom Composer for building arbitrarily large zoomable images.
For more information, please visit the Expression Web Team Blog.