In my previous post, I highlighted how Windows Metro style apps can be developed utilizing the HTML, CSS, and JavaScript skills you already have. If your world is code, Visual Studio offers a great environment in which to write, edit, test, debug, and deploy these apps. Of course, great apps need great user interfaces. And when you need a visual, design-centric way to build your UIs, we have a brand new flavor of Expression Blend for you, built from the ground up for the visual authoring of Windows Metro style apps written with HTML5 and CSS. Unlike most other HTML editors, Blend for HTML is focused on app design, not on Web sites, with an unmatched ability to work on AJAX-style, JavaScript-centric UI.

Blend for HTML provides a rich toolset for authoring HTML and CSS-based user experiences, helping you to create, layout, and style visually on a high-fidelity design surface. In particular, Blend for HTML makes working with CSS a lot more enjoyable: you can focus on concepts rather than on syntax, and you get immediate visual feedback on anything you do. Building great user experiences is usually a multi-disciplinary effort, spanning development and design. Therefore, Blend for HTML is built on the same philosophy as our previous releases of Expression Blend for XAML: a rich, design-centric visual authoring environment paired with great developer-designer workflow. Where Blend for HTML takes a design-centric view, Visual Studio gives you the code-centric complement. Expression Blend and Visual Studio share the same project files, and they can be used simultaneously by a single person or across a team of people with specialized skills.

Here are a few highlights of the first preview of Blend for HTML:

  • A powerful visual CSS editing environment, with predictable and efficient CSS and HTML5 markup generation. CSS3 adds a range of new layout techniques that are much more appropriate for resizable, dynamic application scenarios. Blend for HTML provides a rich visual environment for the new CSS Grid and Flexbox layout modules.

  • Accurate rendering on the design surface, using the same rendering engine that is employed by the app at run time. Just as importantly, Blend can display and edit UI and content dynamically generated by JavaScript code. Because dynamically generated or modified content usually plays a central role in client-side HTML apps, traditional HTML authoring tools that only look at HTML and CSS markup cannot adequately render and edit such UI. Expression Blend, in contrast, runs the JavaScript code of your app right on the design surface, so that layout, controls, dynamic content, and other code-dependent parts of your app appear just as you intended. This gives visual authoring in Blend a lot more reach than in other visual tools. What you see really is what you get, even if it’s dynamically generated.

  • Styling of complex dynamic application states. Interactive apps invariably have complex states that modify the user interface of the app (a simple example would be a dynamically generated fly-out triggered by an event handler). Such states usually cannot be expressed in static markup, making them inaccessible to most visual authoring tools. Blend for HTML solves this problem with Interactive Mode, enabling users to interact with the app on the design surface, and freeze any state reached for subsequent editing. 

  • Visual editing for Windows 8-specific features such as controls and views. Most notably, Blend for HTML lets you preview and edit in full, portrait, fill, and snap views, making it easy to design user interfaces that shine regardless of how and where they’re presented.

Along with the Visual Studio 11 Express for Windows Developer Preview, we have also made available a developer preview of Blend for HTML (look for the Expression Blend 5 Developer Preview).   This is just the beginning, and the team and I are looking forward to hearing your feedback.

Namaste!