So, almost needless to say, we're getting really excited about the emerging drafts of the HTML5 and CSS3 specs. This may seem somewhat abstract to some of you, particularly if you don't do what we do, but it means your websites are 'about' to gain some great new functionality which will solve a number of the problems we bump into on a regular basis. Some things we're really looking forward to:

• CSS3 Fonts: The technology to embed fonts in a web page was first specified a long time ago (so long ago that there's a webmonkey tutorial!), but support from the browser makers never materialized and it died in the water (for a complete history, I refer you to our esteemed colleague, Joe Clark: Simon Daniels: ˜Web font embedding rides again!€™). This is a very complicated issue given that the web exists in virtually every language on the planet (does your favourite font include a full set of Kanji characters?), and that fonts have licenses (just like other software) and many of those licenses prohibit things like embedding them in web pages. CSS3 brings it back to life with the @font-face at-rule, which means that we will finally be able to use something other than Verdana, Trebuchet, Georgia, and Arial.
• CSS3 Multiple Columns: Clients who are used to working with print layouts are often surprised to discover that there's no way to automatically layout HTML content in multiple columns. Sure, we can count out the total number of elements in a list, divide by two, then output the first half, end the column manually, and finally output the second half, but that's about as tedious as it sounds. The Multi-Column Module in CSS3 makes it about as simple as specifying:

  column-count: 2

  and Bob's your multi-column uncle.
  
• HTML5 Client Side Storage: Of less import from a visual perspective, Client Side Storage gives web applications the ability to store data locally in the browser, which effectively makes the app accessible offline (e.g.: if you had a website which allowed people to store recipes and share them, client side storage would make those recipes available even when Tom's laptop wasn't connected to the Internet and he was in his kitchen making Duck à L'Orange). This is fundamentally similar to Google Gears, but would mean that your site's visitors wouldn't need to install anything in their browser to make use of the technology. Congrats to Dave Hyatt and the WebKit team, who have announced preliminary support in the latest nightly builds.
  

Keep in mind that we're a good five years away from actually being able to make use of these fun new features, since they'll have to get built into the next release of the major browsers, and then those will take some time to eventually replace the current versions in popular enough numbers to make the new stuff widely available. As always, we'll do our best to keep covering the new specifications for your ongoing edification, as well as to start producing some fun samples for you to play with once some browsers with HTML5 and CSS3 support become a little more stable and easy to download.

Today we take a look at Expression Studio,  billed as:

Better Designer Tools for Better End-User Experiences

The suite includes tools for visual and web designers (Design and Web respectively), a media cataloguing tool (Media), and a cross-discipline Windows application development environment (Blend - mentioned in yesterday's post). If you haven't heard of it yet, it's only because most of them are still in Beta. Expect the hype machine to kick into action when the full suite is ready for purchase - until then, you can buy Expression Media, buy or try Expression Web, play with the RC1 (Release Candidate 1) release of Expression Blend, or play with the Beta1 release of Expression Design.

Express Yourself

Expression Suite is really interesting in some regards and business as usual in others. The tools share some common DNA with Visual Studio in that they're all part of the .NET 3.0 framework (forgive the occasionally incorrect terminology as we're not a Microsoft development shop - it may be more correct to say that they are built on the .NET 3.0 framework). With the exception of Media, they all communicate using a new XML-based markup language invented by Microsoft, called eXtensible Application Markup Language (XAML) (prounced zammel). The team behind Expression comes from a varied background of well-known players, including Silicon Beach (among many other things, makers of the awesome Dark Castle series of games), Avid, Adobe, Aldus, and Macromedia.

Our Expression day started off with a great intro by Angela Baxley, Product Manager (Expression), who stepped in for Erich Zocher, General Manager Tools (Expression), who couldn't make the morning. Despite her warnings about being new to the material, Angela did a great job presenting an overview of the platform based on one of the better PowerPoint decks we saw. As mentioned back on Day 2, her presentation saw a return of the equation Platform + Tools + Craft = UX, although in this case she was talking about the Platform + Tools piece while Darren was addressing the craft bit. Between Web and Blend (think ASP.NET and .NET Framework respectively) where the actual development work happens, the new platform provides the tools to build everything that a modern dev shop needs to produce.

The Value of Open Standards: XHTML vs. XAML

Most readers of our blog don't need a lecture on why web standards are important (for more information, see Web Standards on Wikipedia), nor do you need to be told that Microsoft has not exactly been known to embrace Open Standards in the past. Given that, you would presumably find yourselves equally as curious as I was to find out what was really meant by:

Expression Web is a professional design tool to create modern, standards-based sites which deliver superior quality on the Web.

Which really makes XAML all that much odder. David and I got in a debate with Arturo about whether XAML was actually an 'open standard', during which he confirmed that it was created at Microsoft and is controlled by them. By my books, that makes XAML a published file format rather than a standard and certainly not an open one by any means. This isn't a particularly new effort, as this handy Comparison of user interface markup languages tells us, and some of the projects go back ten years. We're familiar with a different XML-based approach called XUL (eXtensible User interface Language - pronounced zool as in the ancient Sumerian deity called Zuul, who you know from Ghostbusters). The cynic in me says that having Web do proper XHTML/CSS is an admission of defeat in the sense that Microsoft has been trying for years to  embrace and extend the HTML/CSS standards and maybe they've finally given up. Or maybe they got tired of people bashing the horrible HTML that came out of FrontPage and decided to fix it. Either way, standards support is almost always a good thing so yay! But then why not open up XAML or choose to contribute and work on one of the existing efforts? This is an important issue because anyone who choses to use Expression to build their applcations will be held hostage by the XAML file format and may have to make substantial changes to future versions of their software depending on what Micrsoft chooses to do with the format. Truly Open Standards are controlled by independent third parties who have (or at least appear to have) no particular bias towards any one firm and can therefore (theoretically) make decisions which drive the whole industry forward (e.g.: the W3 'owns' a number of standards including HTML and CSS). Maybe some of the Microsoft folks want to weigh in on this in the comments.

Expression Web

Web replaces FrontPage and is an effort to bring Microsoft's web design technology up to current levels by building a new application and environment rather than trying to fix the old stuff. It's designed to do HTML and XHTML, CSS formatting and code management, and XML/XLSTs, as well as to integrate closely with ASP.NET libraries for things like AJAX (via the AJAX Extensions). The demo was given by Wayne Smith, Senior Product Manager (Expression), who started with a really quick rundown of why standards are important:

1. Speed
2. Search Engine Indexing
3. Efficiency
4. Future Proofing the Web
5. It's professional!

We've spent more time cursing at InternetExplorer's lack of support for standards than most people will ever even spend in front of a browser, so this is a very welcome change in tune from the maker of the most popular browser in the world (though, I suppose, it remains to be seen how much the one hand talks to the other). I agree with all of Wayne's points here - we've been building standard compliant sites since we started the company because they just make more sense. In addition to the standards support, Web has a bunch of other great features:

• CSS Box Model: In 'design mode', the interface goes to great lengths to expose the box model (see BrainJar's CSS Positioning, or a neat-o 3D rendering by Jon Hicks). Wayne showed us how Web uses shaded borders to make the padding and margins more obvious, which you can kinda see at about 17:50 of this training video. Grab the 'crop marks' on the edge of any element to change the margin, or hold down shift and drag to change the padding.
• Style Application Mode: Web's Page Editor options allow you to toggle between having styles applied in either Auto Mode or Manual Mode, with Manual giving choices between inline, as classes in the head of this page, or as classes in an included document. You can also configure the Manual setting on different types of elements to behave differently (e.g.: apply h1...h6 styles inline but divs get styled in the included CSS).
• Multiple Doctype Support: Web supports proper doctype declarations for XHTML1.0 Transitional and Strict, which will affect the doctype output at the top of the page as well as the options in the IntelliSense code completion menus. Web also supports a Secondary Schema, consisting of various versions of InternetExplorer, which will be used to check code compatibility when rendering Quirks Mode pages.
• Style Manager: If you've ever used Word's Styles properly, then you're familiar with the way the Style Manager works. WYSIWYG previews of styles make it easy to pick the right text formatting and apply with a simple click.

Overall, I was really impressed with the product. If they ever released a version for Mac OS there's a good chance we might start using it internally (although it looked good, it didn't look good enough to run Parallels and Vista just to use it). If you're a Windows-based web shop, especially one that does ASP.NET work, you should take a look.

Expression Design

Arturo Toledo took over to show us Expression Design, a vector-based graphic design tool. I actually have no notes from his demo other than "Adobe Illustrator", which will tell you pretty much all you need to know. Challenging Adobe in this space is like trying to take them on in the Photoshop arena, which is ill-advised unless you're even bigger than they are and have mountains of cash. Which Microsoft happens to be and have. They may, in fact, be the only company out there who could reasonably stand a chance of taking any substantial market share away from the 800-pound gorrila. Right now I think you'll have a tough time ahead of you if you need to get your designers to try and switch over, unless the tools, keyboard shortcuts, and menu items mimick Illustrator pretty closely and your designers don't have to give up years of training and muscle memory. The biggest (only?) reason you would do this is to take advantage of the fact that Design can output XAML files to pull straight into Blend. That said, Mike Swanson (a Technical Evangelist with Microsoft) has released an Adobe Illustrator to XAML Export plugin with reasonably good support for the Illustrator feature set and better support coming soon (some of the unsupported features aren't available in Design or XAML), so yeah. Draw your own conclusions (get it? draw? ha!).

Expression Blend

In the same way that you can think of Web replacing FrontPage, Blend basically replaces VisualBasic. The primary intent for the Blend is to build Windows applications on the Windows Presentation Foundation (WPF). Arturo showed us a few demos of the kinds of things which Blend is intended for (the now defunct Microsoft Max project and the Avalon Patient Monitor specifically), which made for really cool looking interfaces with debatable practical value (like the now famous Jeff Han video). I'm always slightly suspicious of totally avant garde interfaces for medical applications which include snazzy animations and effects - when life-threatening decisions need to be made, I sure hope my doctor has to wade through flipping menus and rotating panels! - but it works very well as a proof of concept to show off how flexible Blend's toolset is. I was also slightly put off by Arturo's repeated statements that Blend finally lets you escape the tyranny of the boring gray button (and the Microsoft UX Guidelines) and map full motion video to your spinning control surfaces, which brought to mind thousands of horrendous Flashtastrophes (and one of my favourite Penny Arcade cartoons ever). At any rate, if we built Windows apps (or if WPF/E does become a potential competitor to Flash and gets widespread adoption as a browser plugin), it looks like a great environment for building interfaces. I think we, as a group, were a little confused about who it's being aimed at (see yesterday's post if you haven't already), but once we had sorted out their definition of 'designer', it all made sense. I was particularly impressed when Arturo pulled in an application that only its developer could love, built in Visual Studio, and then reskinned it without affecting the functionality (I grabbed two photos of the finished login and welcome screens). Going on personal experience, I have a suspicion that a lot of shops will end up using Blend by having their Dev team build off a spec and then having their UX/Visual team polish things, so it's great to see that the app works that way too.

Expression Media

Media is actually iView Media Pro, formerly made by iView Multimedia out of London, and acquired by Microsoft on June 27th, 2006, and is the only product in the Expression Suite which is available for Mac OS X. Media is a Digital Asset Management (DAM) Tool (which is fun to say - Dam Tool!), which basically sucks in all of your media in a whole littany of formats and then provides tagging and sorting capabilities. There's an important distinction in the DAM world between browsers (which just read the info available in the media files themselves - like EXIF data in JPEGs) and catalogues (which store their own meta data about the files and can therefore provide much easier and more efficient sorting). If you've used anything like Apple's iPhoto or Aperture, Adobe's Lightroom, or even Google's Picasa, you're familiar with the basics. Media goes further in that you can build up all kinds of ways of looking at photos, including adding custom fields (e.g.: a pro photographer might add price to track how much to charge for her images), and build collections for quick access (e.g.: all potentially good backgrounds in one area). It looked like an excellent media catalogue and something that we might make use of to store assets from different clients for easy retrieval by all of our Professional Services team members. There was some discussion about how much support was included for sharing the library files (could they be checked into a version control system? read of a network mount?) which I think was left open, so if any of the Microsoft folk know the answer, please feel free to leave a comment.

Final Expressions

I really had to work at putting myself in the mindset of a potential purchaser/user of the software since our Mac bias basically rules us out. Someone did ask Erich Zocher if there were plans to do Mac versions and there clearly aren't, which I think is a real shame. We spend a lot of time in the trenches of this industry and we're seeing more and more glowing Apples while we're down there - particularly amongst the digerati whose influence reaches far and wide

That's it for Day 4 - tune in tomorrow for the big wrap up!