Expression Web

Microsoft Abandons Expression Web and Front End Web Development

Today something major happened at Microsoft that will likely not be noted in the general tech media but will have a major impact on Microsoft’s influence over the web and web development. Microsoft is abandoning Expression Web – their only true front end web design and development application (IDE) – in favour of a Visual Studio / Blend hybrid. While this is no surprise, it is disheartening to see Microsoft write off front end developers in their misguided quest to make the web obsolete and replace it with Windows 8 apps. While the company is painting this as a move to consolidate and refine their web and app development toolkit, the message is loud and clear to anyone working as front end web developers: If you don’t make .NET and Windows 8 apps we have no interest in you.

Considering web publishers are moving aggressively towards more agile platforms, open standards, and content-centric solutions powered by Open Source languages, (1) this is a colossal step backwards and quite likely one Microsoft will never be able to recover from.

To put it in plain English: As of right now Microsoft no longer has a stake in the front end web development game.

Though Expression Web will live on as a “community supported” free application, no major updates will be released and it will die a sad and lonely death on the computers of fans like myself.

Expression Web and what could have been

If you’ve been following me for a while you may know that I have been using Expression Web to build websites and applications, and to build WordPress themes and plugins since the first beta of the application came out. I’ve also published four books, a video course, and countless tutorials on the use of Expression Web and its interaction with WordPress and other open source solutions.

What made Expression Web the best kept secret of the front end web development world was that the application put web standards front and center and was largely platform- and solution agnostic. Here was a true front end web design and development solution that handled PHP as well as it handled .NET, provided extensive coding support for everything from CSS3 to HTML5 to jQuery, and allowed you to do pretty much whatever you wanted regardless of whether what you wanted to do was based on a Microsoft coding language or not.

Expression Web has too many useful features to count, chief amongst them the seamless integration of advanced CSS tools that made it easy for novices and seasoned pros alike to build, dissect, troubleshoot, and publish standards based, future proof, and forward thinking CSS in a snap. I’ve made many a crowd gape in awe as I redesigned the CSS on the website on the fly at conferences, and I’ve found that Expression Web has been by far the best learning tool for design minded and oriented people who wanted to make sense of the complexities of HTML and CSS.

It’s personal

For me this is more than just the sad death of software that should have been at the top of the priority list for Microsoft. It is also the end of an era. As I said before, my involvement with Expression Web started in the very beginning while the application was still in Beta. In fact this blog, Design is Philosophy, was started to document my experiences using Expression Web. Because of my aggressive bug reporting and commenting I was contacted by the Expression Web development team soon thereafter and I became a beta tester for the application. Eventually I was given a Microsoft MVP (Most Valuable Professional) award for my efforts and to date I have received that award four years running. My involvement with the Expression Web development team landed me a book deal, speaking engagements, and got me to the MIX conference in Las Vegas on two occasions. It also opened a whole new world of opportunity for me, so much so that I can honestly say that I owe much of my success to Expression Web and it’s chief creator Steven Guttman.

Through the years I have been heavily involved in beta testing of the many versions of Expression Web and there are features in the current application that could have my name on them. I used my influence to push the open source agenda and made every effort to help Microsoft understand they were sitting on a goldmine they refused to explore and the open source community understand what a useful application this really is. Now it turns out all those efforts were for naught.

End of an era

However much I feel this is a personal loss, it is nothing compared to what the crack team of designers and developers that made Expression Web what it was only to have it discarded by the mothership for political reasons must be feeling right now. The decision to scrap Expression Web is clearly one made by management with their heads buried deep in the river bed. The application was a shining light of what Microsoft could be – an open application focussed on real life work regardless of platform or product affinity. Sadly that path has now been closed in favour of laser sharp focus on pushing internal product even though the community is not interested. I would laugh at the lack of insight these corporate pencil pushers have, but that would trivialise what is endemic of a corporate culture of detachment and ideological dogma.

The writing has been on the door, in blood, for a year now and when confronted with the question of what Microsoft was envisioning for the future of web development in early 2012 the answer was loud and clear: For Microsoft, the web is dying and the future lies in Windows 8 apps. When asked what we web developers should be doing the answer was the same: Make Windows 8 apps. Which is about as useful as telling a contractor to start erecting tents instead of houses because houses are no longer relevant. Anyone outside the reach of whatever reality distorting force field they have running at the Redmond campus can see how idiotic this is, but that hasn’t stopped the people in charge for pulling the plug on one of the few applications from the company that had something new to offer.

I could be subtle about this, but seriously, you all know me too well for that. This is idiocy. Pure and simple.

RIP Expression Web. Your master never understood your value.

Maybe the Mayans got it right after all.

(1) In the original version of the article I stated somewhat vaguely that “.NET is seeing a sharp decline”. Thanks to some commenters I realize this statement was unclear and somewhat confusing. The sentence has been edited to reflect the original intended message, that a large majority of sites and content published on the web is being published using open source languages and platforms leaving closed solutions like Microsoft Stack applications languishing in the dust. See here for stats on Content Management Systems as an example. I realize I used the term “.NET” too loosely, thus the correction.

Events Windows 8

Windows 8 Hackathons throughout Canada this summer

Windows 8 HackathonWindows 8 is scheduled to be released in October this year and with it comes a whole new infrastructure for creating and publishing custom applications for Windows powered devices. If you want in on the fun, look no further than the Windows 8 Hackathons scheduled across Canada this summer:

From the souce:

“We are announcing our Windows 8 Hackathons coming up in August! Come to our App Building with Windows 8 Hackathons with your laptop/device/desktop with Windows 8 and the developer tools already installed and you will:

  • Spend 8 hours with other developers and designers learning about creating apps based on mini-scenarios from Microsoft evangelists as well as learn about the Windows Store.
  • Have plenty of time to work on your own apps and have folks there to help answer questions you may have. We will keep presentations short so that you have more time to work on your app.
  • Find out how you can get free guidance by one of our Microsoft engineers for your app who can help make sure you have built the best quality app and enable a smoother transition into the Windows Store.

Space is limited but the event is FREE!”

For more info go to

Conversations with Mor10

Conversations with Mor10, Episode 3: Aaron Gustafson and the Web Standards Sherpa

Web standards matter, now more than ever. While at MIX11 I attended a session with web standards guru Aaron Gustafson on a new project called Web Standards Sherpa. It’s a great site where web standards and usability experts dissect sites and point out the good and the bad to help all of us build a better web.

After his talk (cut in below) I caught up with Aaron and we had a chat about the project and web standards in general. Listen and enjoy.

When you are done, check out Web Standards Sherpa on the web and on Twitter, stalk Aaron on Twitter and watch his MIX11 talk.

If you have any comments or questions regarding this podcast or you have suggestions on what or who I should talk to next drop me a line in the comments below.

The music featured in this podcast was created by my friend Jeremy Lim and is called Drop. If you’re interested in this type of music or just want to see all the cool stuff Jeremy is up to you should check out his current project fiftytwocreatives.

Design Projects – Metro and WordPress hand in hand

WordPress + Metro style + responsive design. That was the baseline when designing and building – the Microsoft Expression Blend Team Blog: Create a modern design that used the latest in web technologies (HTML5), played well with mobile devices and reflected the new and quite different look of Microsoft. Though the site launched in late December I haven’t had time to write about the process until now, so here is a quick rundown how came about and how we handled the challenges inherent in the project.

Metro + WordPress

One of the most important aspects of the new site was a strict adherence to the new Metro design language introduced by Microsoft. If you are not aware of Metro yet you will be. This new/old style is starting to make its way into everything Microsoft does, from cell phones to web apps and eventually on your desktop through Windows 8. I say “new / old” style because Metro harks back to the classic Swiss style clean typography trend that was introduced early in the 20th century in Europe that is still a staple of choice for typographers and designers to this day. When I think Metro I think, literally, European Metro stations: Clear sans-serif font on solid colours. You can read more about the Metro design language at WikiPedia and all over the web.

The design principles in the Metro design language are fairly simple: Solid colours, sans-serif fonts, lots of white space, edge-to-edge images with overlays. But as any designer knows, minimalism is not as easy as it seems. By adhering strictly to these rules you have nothing to hide behind. The typography and layout is centre stage and any misjudgement on your part becomes glaringly obvious.

Though there have been some forays into Metro style WordPress themes before I had yet to see one that really captured the essence of the style when I started the project. At the same time I did not particularly like the way Microsoft themselves were using the style on their own websites. They seemed to still be stuck in the old way of doing things and not quite willing to embrace the big fonts and white space as much as they needed to. As a result I was basically starting from scratch, which to be frank is a good thing even though it’s more of a challenge

Breaking the grid

The first decision I made in my drafts was to break the grid. With the introduction and convergence to mobile devices on the web, the traditional grid with massive sidebars and rigid section designs seems obsolete to me. What I wanted to do was bring some of the mobile experience to the desktop while still retaining a sidebar and typographical line width. The result was a full spanning header outside the grid with the post content and sidebar below. It’s a simple design trick, and I’m neither the first nor the only one to use it, but it makes for a striking fundamentally different look. Of course this full span header could only be used on single pages and posts, but seeing as most visitors these days land on single pages or posts first and only later venture to the index pages that is not a big concern.

Metro icons

One of the features of the Metro design language is heavy use of icons. When I started the design I was concerned about how I was going to find the correct icon sets, but after reading documentation and watching videos published by Microsoft I found a hidden gem of information: The Metro icons are actually just standard Windows font icons. That made things a lot easier and apart from the calendar icon which I had to make myself all the icons on the site are rendered from the Segoe UI or Wingdings fonts.

Metro style Facebook facepile

I am not afraid to voice my disdain for Facebook’s draconian design implementation, especially where their social widgets are concerned. Out of the box Facebook like boxes, facepiles and other widgets look like… Facebook, and that does not jive with Metro at all.

In early drafts I had to work around the hideous Facebook like box and it was driving me crazy. In previous projects I had been able to manhandle Facebook’s API and override their stylesheets, but it looked to be impossible due to deprecated code.

Then I  made a chance discovery that though deprecated, the Facebook Fan Box is still active, and unlike the horrid Like box, the Fan box allows some level of customization.

I’m not going to go into great detail about how exactly this is done (there are tutorials out there that have covered that extensively), but as you can see I was able to Metrofy the Facebook facepile into something resembling acceptable.

Responsive Design vs Pixel Perfect

As of 2012 Pink & Yellow Media has converted to a mobile-first design strategy, but we took a head start with One of the key requirements of the project was that the site play nice with cell phones and tablets as well as the traditional computer (as should all websites built today) so the site was designed with the smallest screen – a vertical mobile screen – in mind from the get go.

Rather than following the traditional path of a fully fluid layout, each component of the layout was handled on its own and media queries were inserted at incremental points to properly position each item for any screen size. My thinking is that if the site is to be responsive, it should format perfectly to all screen sizes, not just the predefined mobile-horizontal, mobile-vertical, tablet-horizontal and tablet-vertical sizes. At the same time I want to give the content as much space as possible to always showcase what’s important.

The result of this responsive-but-pixel-perfect approach (you may call it nitpicky if you like) is that as you resize your browser window you’ll see the content jump around and conform not just to the mobile sizes but also to any random desktop window size.

A responsive slider

The design spec called for a slider. I personally hate sliders, but they are all the rage and any website worth its salt must apparently have one. Now sliders are easy to build, as long as they have a fixed size. When you start talking about responsive sliders, things get tricky really fast.

Sliders are usually based on one of two principles: Either you have a long horizontal or vertical row of images and / or content where only the content in the slider window is visible and then you just shift the row left or right to display he new items. Or you have a window that toggles visibility on and off for different layers of content. In either case you use JavaScript and CSS to make everything work. But problems arise when you start messing with the size of the window:

First off you have to consider what happens to the images. Do they resize with the window? Or do they just get cropped. Secondly you have to consider what happens to any text superimposed on top of the images. Does the text shrink with the window, or does it reorganize? And what when it starts to cover the text entirely? Thirdly, are you going to let the box resize both vertically and horizontally or just one or the other?

All these questions are actually design decisions, and they were made in the draft stage. But when I had a clear idea of what was going to happen to the content as it was resized, I needed to find a responsive slider solution that worked. And I also wanted one that was semantically sound and standards based. Not an easy task. But after a lot of searching I came across Mat Marquis excellent Dynamic Carousel (Github link) which fit the bill almost perfectly.

WordPress and Microsoft? Yep, and it’s hosted on Windows!

The final requirement for the project, though an implicit one, was that this WordPress site had to be hosted on a Windows server. I know that sounds like heresy to a lot of WordPress users, but it is sound – at least as long as the server runs properly. We had to go through several hosts before we found one that had a properly installed and configured Windows Server implementation that would allow us to run WordPress without a hitch (GoDaddy’s Windows hosting for example was about as fast as skateboard with wheels made of Play Dough) but we did end up with a workable solution and the site now runs smoothly on Windows.

Check it out and let me know what you think

As with all my other projects is a bit of a work in progress so I’d love to hear what you have to say about it and what you’d like to see changed or updated. I would also like to hear if anything on the site warrants a tutorial. Drop a comment below and let’s start a conversation!

Expression Web My Book News

Breaking the silence: What I’ve been doing over the summer

If you follow this site and my Tweets you will surely have noticed my relative silence over the summer. Well, there is a reason… more precicely 3 reasons. I’ve been colossally busy dealing with three major projects that as of now are either nearing completion or at a point where I can start focusing on other stuff (like long neglected clients) again. So, to stave off the criticism for my falling off the face of the internet here’s a taste of what I’ve been working on:

Sams Teach Yourself Microsoft Expression 4 in 24 Hours

Earlier this summer Microsoft released version 4 of Expression Studio. The new version brough major upgrades to Expression Web and as a result my hugely popular book Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours had to be updated. That meant I had to go through every nook and cranny of the new version to find all the new goodies, come up with new examples to show them off and then rewrite whole chapters to reflect these changes. It may come as a surprise, but revising a book like this is almost as much work as writing it from scratch. Which means once v5 comes out I am likely to do a complete rewrite. But that’s a different story.

The new book, scheduled to be released end of October, features updated and extended examples, new features, removal of deprecated features. New content worth noting is an extended chapter on the new and improved Expression Web SuperPreview which now includes full support for IE6, 7, 8 (compatibility mode) and 8 as well as a new feature called Remote Browser Testing that allows for testing on external browsers like Safari for Mac and an entire chapter on the new Search Engine Optimization (SEO) Checker tool.

Expression Studio 4 and Expression Web 4 comes as a free upgrade if you already own version 3. That means if you have version 3 you should upgrade right away. And if you alredy have my version 3 book you should get the new version once it comes out. I’m not saying this because I want to sell more books but because there are some new features in there that are important to understand and get the full use out of.

Microsoft Expression Web 4 LiveLessons (Video Training)

In addition to the book I’ve also created a colossal 27 lesson video series clocking in at around 5 hourscalled Microsoft Expression Web 4 LiveLessons (Video Training) for those of you who either don’t want to read a book or who want more hands-on training using Expression Web. The LiveLessons series features an entirely new example project based on the 12×12 Vancouver Photo Marathon website and provides a best-practice model for how to create professional, rock solid and stylish websites using standards-based HTML and CSS. The LiveLessons series is complementary to the Sams book so there are things that are covered in the videos that are not covered in the book and vice versa. Thus even though you’ll get a lot out of each item alone you’ll get a much better and more in-depth understanding by getting them both. Again, this is not a sales pitch – I’m being honest here. The combo really is the better deal.

The video series will be available on DVD early October and I believe it will also be available for download or online viewing on InformIT’s website (tba).

12×12 Vancouver Photo Marathon 2010

Because I don’t already have way too much on my plate I decided to start a huge photography event/contest last year called the 12×12 Vancouver Photo Marathon. In a nutshell it’s a contest where 60 photographers show up on a set date, pick up a 12 exposure 35mm film and then at the top of every hour for 12 hours are given one theme to interpret in one photo. At the end of 12 hours the films are returned, developed, judged and finally put up in a huge exhibit. In the end we end up with 720 photos divided into 60 sequences of 12 consecutive themes. The 2009 event was a massive success with over 300 people showing up for the gallery exhibit and we expect this year’s event to get even bigger.

In the runup to the even (and to kill two birds with one stone) I developed a new site for the marathon and used this site as the demo project for the Expression Web 4 LiveLessons series. As a result the site features some pretty fancy elements like a transparent CSS-only drop-down menu with multiple in-button styles, CSS3 drop-shadows and rounded corners and tons of other fancy schmancy style elements.

The 2010 12×12 Vancouver Photo Marathon takes place on Sunday September 12 from 8am to 8pm in downtown Vancouver with a home base at Blenz Coffee in Yaletown. Tickets for participation (60 in all) are $24 per person and cover all expenses. Tickets go for sale Thursday, August 12 at 8pm and are expected to sell out fast. The following art exhibit will be held at Vancouver Photo Workshops on the 16th of October.

Expression Web News

Introducing Expression Studio 4 Web Professional

As I’m packing up for a rush trip to Norway to see my dad defending his doctor’s dissertation the Microsoft Expression team is hard at work in New York City presenting the new version of my favourite web development application Expression Web 4. Now packaged as Expression Studio 4 Web Professional and bundled with Expression Design and Expression Encoder version 4 is a programmatical improvement on the already hugely successful Expression Web 3 that introduces some new and nifty features that will make your web development process even simpler.

New in Expression Web 4

There is a long list of new features in Expression Web 4 but here I’m only going to mention three – because they are the most important ones.

In-app SEO reporting

Like the name suggests Expression Web 4 provides a full SEO report for selected pages or the entire site. Gone are the days of trying to remember all the SEO rules or using 3rd party apps to make sure your site gets listed on Google and Bing. With the click of a button Expression Web 4 will give you a list of everything you forgot to add to your site, like a title tag, proper description, keywords or broken links. But more interestingly it also gives you tips, in the form of warnings, that are not so obvious. During beta testing I ran the SEO reports on some of my existing sites and got feedback like “title is too general” and “description is too general”. This might seem like weird error reporting but it’s actually vitally important if you want your site to be noticed in the search environment: To be noticed your pages need proper titles that tell the visitor what’s on them. And the descriptions have to be specific enough to stand out. There are tons of other such warnings that, if heeded, will not only increase your SEO but will also teach you to write your code in an SEO friendly way the first time around. Which is exactly why I like Expression Web so much – it teaches you through its use to do things the right way.

More SuperPreview

I’ve raved about SuperPreview – the in-app or stand-alone cross-browser compatability tester that was introduced with Expression Web 3 – before. With Expression Web 4 SuperPreview has been enhanced and improved to include more browsers (IE 6, IE 7, IE 8 Compatibility Mode, IE 8 etc), more file inputs and most importantly an online component that lets you test your pages against the Mac version of Safari. It’s the same application with onion skinning, active areas, DOM view and all that great stuff, only improved for broader functionality.

I’ve said it before and I’ll say it again: SuperPreview by itself is reason enough to buy Expression Web.

Publish Current Page

For people like me who tend to work on multiple disjointed pages and do live updates to sites all the time the process of saving a page, going to the publishing panel and then uploading the pages to the external server is extremely cumbersome. The obvious solution to this problem would be to have a button or function that lets you publish the current or all open pages to the server right away. I requested this feature at some point in the pre-beta process of Expression Web 4 and I’m happy to say it’s now included in the app making publishing of your latest and greatest errors updates a one-click process. It may seem like a small and insignifficant upgrade but it really isn’t: After working with an early beta and going back to Expression Web 3 I kept swearing at my computer because I couldn’t just push my files straight to the server but had to go through the publishing panel. That quick one-click or shortcut process is a huge timesaver and a hugely important addition to an already excellent application.

If you have version 3, version 4 is a free upgrade

Yes, that’s right: If you already purchased Expression Web 3 or Expression Studio 3, Expression Studio 4 is a free upgrade. That means you get all the cool new stuff at no cost. Very cool.

More to come

I’m hard at work writing tutorials and other stuff (TBA) about Expression Web 4 so stay tuned to this blog for all the updates and other useful tips!

Further reading

I’ll try to compile a list of all the news on this exciting new app as they get in. If you have a link, dump it in the comments below and I’ll post it:

Microsoft Press Release
Official Microsoft Expression site
Paul Laberge’s post
Tim Heuer
Yahoo! News

Browsers News

YouTube joins the movement to phase out Internet Explorer 6

YouTube IE6 warning

One of the cool things about SuperPreview (the browser testing application that comes packaged with the new Microsoft Expression Web 3) is that it lets you check any site against older browsers. So when I have a couple of minutes to spare I test out well known sites to see if they comply with web standards and if they still support Internet Explorer 6.

Big was my surprise this morning when I ran YouTube in IE6 mode: At the top of the page they’ve now added a big blue box warning visitors using Internet Explorer 6:

We will be phasing out support for your browser soon. Please upgrade to one of these more modern browsers.

The warning is followed with direct links to download Firefox 3.5, Internet Explorer 8 and (of course) Google Chrome. (On a related note, as a designer you should have all these browsers installed as well as Opera and Safari.)

I’m glad to see that big American players are now getting on board with the movement to phase out Internet Explorer 6 which so far has had most of its success in Europe. And with the support of a player as big as YouTube I can see a time in the not-t00-distant future when we can stop caring about IE6 and get on with our lives.

Expression Web Microsoft Expression My Book News

This is Expression Web 3

Expression Web3

Expression Web 3 is now available for trial download directly from Microsoft. Click here to join in on the fun!

It’s no secret that I’ve been playing around with various pre-beta and beta versions of version three of Microsoft Expression Web for the last few months, all in preparation for the release of my new book Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours which is available for pre-order from right now (even though it’s not finished yet!) So for all this time I’ve had to keep my mouth shut about my new toy and what it can do. Well, no more. I just got the all clear from the development team to talk about the application publicly and share some screenshots of what you can expect when it goes public in the next couple of months.

So, without further ado, here is a quick rundown of the new features, the new appearance and my innitial thoughts on the new member of the Expression Web family.

New Flat-tastic User Interface

The first thing you’ll notice (apart from the new logo in the splash page of course) when opening Expression Web 3 is the new UI skin. The application looks very different from its two prior iterations in that the team has moved away from the classic fake 3D/embossed look to a 2D/3D inspired look with flat surfaces and drop-shadows. The interface is also a lot darker than the prior ones with a dark gray being the predominant colour. The new look makes me think of new media applications like TweetDeck and DestroyTwitter and there is little doubt in my mind that much of the inspiration was taken from what I want to refer to as the post-web2.0 look.

As you can see in the graphic at the top of this article the new look is very clean and sharp and makes icons, toolbars and panels pop out. This dark flat-tastic look has already been used in Expression Design and Expression Blend and I think it is a welcome change that not only links Expression Web to it’s application siblings. It also visually separates the new application from those of the past and signals a new beginning of sorts. Not to mention that to me at least it is much easier on the eye (I tend to do a lot of design work in the dark).

AutoHide Panels

AutoHide PanelsOne of the things that really irks me with design applications in general is all these toolbars and task panes that take up valuable screen space. To curb my frustrations I prefer to work on a dual-monitor setup where I can stash all the tools and task panes on one monitor and leave the application on the other. But this doesn’t work when I’m on my laptop (which is where I’m at most of the time these days). And in Expression Web 1 and 2 even with a widescreen monitor the task panes ate up a lot of real estate. As a result I kept turning the task panes on and off all the time – a process that was a real time waster. In response to complaints and suggestions to do something about the task panes, the dev team introduced a simple AutoHide feature that lets you collapse the panels (they’re not called “task panes” anymore) to the sides from where you can open them by hovering over their names. In practical terms that means you can leave all your favourite panels on the workspace without having them take up tons of room in the process.

The AutoHide feature is easily toggled on and off with a pin logo (seen in the upper right-hand corner of the grab to the right). When the pin is lying sideways as in the grab, the panel is pinned to the wall (AutoHide on). When it’s in the upright position, the panel is a permanent part of the workspace. It’s a simple feature but it makes a world of difference, especially because you can pin individual and rarely used panels to the sides for easy access if you were to need them.

New and improved publishing options

It’s no secret that the publishing options, and especially the FTP publishing option, in Expression Web 1 and 2 were less than stellar. It was so bad in fact that I urged the readers of my book to not use them. Well, without breaking any deals with my publisher I can tell you that my recommendation in the new book is quite different. Not only has the troll that was messing with the FTP been slaughtered but two all new publishing methods have been added to the list providing more secure transfers and options. The list of publishing options now features SFTP (Secure Shell File Transfer Protocol), FTPS/SSL (File Transfer Protocol over Secure Socket Layer) as well as the original FTP, FrontPage Server Extensions, WebDAV and File System.
publishingBut that’s not all. Expression Web 3’s publishing option has been rebuilt from scratch and features a whole new range of functions including the ability to define multiple publishing locations for one site so you can push your files to a backup storage as well as publish them online, or publish them to multiple servers, or set up a testing server and a main server within the same project. This again is a seeminly minor but actual major improvement that makes life a lot easier for people like myself who do a lot of server testing and cross-publishing.

In-application Browser Previews with Snapshot

Expression Web 3 Snapshot panelIn addition to alterations and improvements to the old versions of the application, Expression Web 3 introduces some new features that are going to make your life as a designer/developer a hell of a lot easier. They are connected at the hip but I’d rather deal with them independently. The first one is the Snapshot panel. Like the name suggests, Snapshot takes a real-time browser shot of your current page and displays it in a panel inside your workspace. This means you now have a quick and easy way to see what your recent changes will look like in different browsers, including Internet Explorer 6 and 7 and Firefox, without having to actually run the page in a real browser.

Snapshot’s output is just that – a snapshot – and does not provide functional links and the like. But it does generate JavaScript, CSS, HTML, PHP and whatever else you want to throw at it and gives you a true representation of what your page looks like in the different browsers.Like the other panels you can undock the Snapshot panel and place it somewhere else, for instance on your second monitor.

SuperPreview – Browser Testing Made SuperSimple

Expression Web SuperPreviewI’ve written about SuperPreview before both here on and in the official Microsoft Expression Newsletter but it can’t be repeated enough: Expression Web SuperPreview could one of the most important innovations in web development of the last several years. SuperPreview is the powerful big brother of Snapshot – a stand-alone application that lets you perform cross-browser testing that lets you compare true output from multiple different browsers with onion skinning and side-by-side preview. To identify incompatibilities, problems and even tiny shifts the application also features simultaneous box highlighting of individual elements and even provides full FireBug-like DOM trees to give you as much info as possible about what’s going on when things go wrong.

I’m not going to go into too much detail here – the application will be better served with a tutorial video that shows how it actually works in real-time – but I will say one thing: Even if I was still a DreamWeaver user, I would buy Expression Web 3 just to get the full version of SuperPreview. And that says a lot cuz’ I’m a cheap guy. With alligator arms.

For more info on Expression Web 3 microsoft just published Expression Web 3: An Overview on the official Microsoft Expression website.

For another take on the new version check out fellow Microsoft MVP Cheryl D. Wise’s blog.

Windows 7

10 reasons you’ll love Windows 7, part three: Aero Snap Gives You Window Control

Aero SnapThere are a lot of subtle functions and effects built into Windows 7 that may seem either rudimentary or pointless at first glance but end up being very useful when you realize what they can do. Of these the new window control tool called Aero Snap is a much needed and hugely effective addition.

Snap your windows to any location

We’ve all run into this problem: When working with multiple documents, multiple file folders or using a web browser to research content while writing a document, doing image editing or programming a web site we keep having to switch between different windows. And if there’s a lot of switching back and forth or you have a lot of windows open at the same time this can get quite tedious. To aleviate this issue many end up trying to resize the windows so that each fit half the screen. In extreme cases (like myself), they buy a second monitor so they can place one folder or application on each screen. But even so you are still left with the annoying task of resizing your windows and drag them around.

That’s now a thing of the past. Windows 7 has an intelligent “window snapping” feature built in that does the brunt of this work for you.There are five main positions for this snapping feature:

  • Grabbing the top bar of any window (even when it is maximized) you can drag it in “hovering window” size to any place on your desktop. This pretty much eliminates the need for the Restore Down button in the upper right-hand corner.
  • Grabbing the top bar and moving the window to the extreme left of the screen automatically snaps the window to the left so it covers exactly half of the screen widthwise.
  • Likewise moving the window to the right makes it snap to the right and cover the right half of the screen.
  • Dragging the top bar to the extreme top of the desktop automatically maximizes the window to full screen mode.
  • Grabbing the top bar of any window and shaking the mouse pointer back and forth a couple of times automatically minimizes all the other windows on the desktop leaving only the shaken one.

Control your windows with the arrow keys

The above snapping actions are all cool, but the mouse movements are just the beginning. A far more important innovation is that you can also control the same window snapping functions using the Windows key in combination with the arrow keys:

  • Windows key + Up maximizes the current window.
  • Windows key + Down sets the window to “float” or Restore Down mode. Hitting Windows key + Down while in a window that is already floating minimizes it to the taskbar.
  • Windows key + Left snaps the window to the left half of the screen
  • Windows key + Right snaps the window to the right half of the screen

Practical useage

I’m sure you, like me when I first heard about this, are thinking “Ok, so what’s the big deal? It’s not like I’m ever going to use this feature!” Trust me, you will. The power of this feature (and especially the key combinations) became obvious to me when I was doing the rewrite for my upcoming book Sams Teach Yourself Expression Web 3 in 24 Hours. A huge part of the rewrite consisted of opening two Word documents and cross-referencing them and opening two file folders and moving files back and forth between them. Since I do all my writing on my laptop I didn’t have the benefit of two monitors so I ended up having to fit two instances of Word or two opens folder on the same screen. This process now takes about 1 second and requires no fine motor skills or mouse work. Simply use the Alt+Tab combination to pick the appropriate window and hit Windows key + Left or Right depending on what location you want the window to be in. So when I was working with two Word documents side by side switching between single full-screen document view and dual document view became a matter of 3 or 4 keystrokes rather than Restore Down, resize with mouse, move around, switch back and forth etc etc.

It seems like a small thing but holy crap does it ever make my life (and yours) easier!

Bonus: Desktop Peek!

Desktop PeekOne of the things that really annoyed me about Windows Vista was all the Sidebar Gadgets. That is to say the gadgets themselves didn’t annoy me but the sidebar did. The whole point of having these gadgets available was, in my mind, to be able to access them and see them when I needed to without having to do a lot of moving around and closing windows etc. But the sidebar was a total pain and always got in the way so I ended up just turning the damned thing off completely. In Windows 7 the Gadgets are released from the sidebar and can be placed wherever you want them. But that still leaves the problem of how to see them quickly (not to mention all the other crap I store on your desktop). Well, there’s a really clever solution to this too: At the extreme right hand side of the taskbar there is a small rectangular box. If you hover your mouse over it all your open windows automatically become transparent and you can peek at your desktop. Clicking the rectangle minimizes all your windows so you have access to the desktop. Likewise clicking it again restores all the windows to where they were in the order they were stacked. Couldn’t be any easier.

You can read a very long and detailed explanation of how this all came about in the article Designing Aero Snap in the Engineering Windows 7 blog.

Windows 7

10 reasons you’ll love Windows 7, part two: The Taskbar

The Windows taskbar was introduced with Windows 95 and has functioned as a launching application as well as a place to store and access minimized or hidden windows. But through all it’s following iterations it never really changed. Meanwhile other OS developers were introducing fancy new features like application docking and taskbar customization and Windows users started looking to 3rd party applications like Rocketdock to get the features they wanted.

Windows 7 shows a complete reinventing of the Windows task bar. More than a launch platform it is now a full fledged object dock with tons of added functionality and it is fully customizable. I could write a whole article just on the new taskbar, but here I’m just going to give you some highlights:

Object dock

TaskbarThe most useful new feature of the taskbar is that you can now drag and drop any item, whether a shortcut, a folder or even a file, onto it for easy access. And whereas in the older versions the quicklaunch icons were separated from the actual running app icons, they are now one and the same. In practical terms this means when you launch an application already docked on the taskbar it gets highligted rather than duplicated. And if yo launch several windows (or in the case of most browsers several tabs) they stack one behind the other to give you access to all of them at the same time. The same goes for file folders and documents. Additionally you can move and reorganize any and all items on the taskbar in any way you want even when they are open.

Aero Peek

Aero PeekIf you have multiple windows or folders open at the same time it can be tricky to remember which one contains which item. To abolish this problem the taskbar has a new feature called Peek. Like the name suggests it gives you a peek of the opened content when you hover over the different active icons providing a preview and full access to all the options without actually having to open them.

Peek manifests itself like a bigger taskbar with preview images of each of the open windows, tabs, files or folders and when you hover your mouse over each of them, the full window gets switched to the object in question giving you a quick preview. When I’m writing I usually have multiple browser tabs, three or four folders and at least two or three Word documents open at the same time and this feature makes it infinitely easier for me to find what I’m looking for rather than having to Alt+Tab my way through all the opened elements.

Enhanced functionality

Enhanced functionalityIn addition to simply launching and previewing open applications, the taskbar gives you enhanced and program-specific functionality at the click of the right mouse button. This activates a pop-up menu which, depending on the icon in question, gives you a list of everything from bookmarked or pinned pages to recently viewed documents and frequently accessed folders. And for each of the pinned applications you can pin sub-elements directly to the taskbar for instant access. In practical terms it functions like a favourites list for all your applications allowing you to pin important or useful documents, graphics, web sites, folders, videos, projects, whatevers directly to the taskbar for instant access.

See only what you want to see

One of my pet peeves with the taskbar in XP and Vista was the section that is supposed to give you information about running background applications such as virus scanners, wireless status, audio, video etc. My big problem with this feature was that everything and it’s seccond cousin twice removed wanted to get top billing in the bar and as a result I had this insanely annoying accordion thing going on where I needed to hit a button to make all the icons appear and then quickly navigate to the right one to make my change.

Taskbar itemsNo more! The new Windows 7 task bar lets you decide exactly what icons to display and what icons to ignore. And you are provided with two levels of access: The icons on the taskbar itself and the icons in a pop-up menu that can be accessed from a button. With these two features you can hand pick what application icons you want to see and which ones you don’t care about. And as with the other applications you can reorganize the icons in any way you want giving you full control over your workspace.

Windows 7

10 reasons you’ll love Windows 7, part one: It just works!

I’ve been using Windows 7, first in Beta and now in Release Candidate, since early March or so. And I am thorroughly impressed. I was never a Vista hater – and I think most Vista haters either never actually tried Vista or refused to accept that Vista and XP were not the same thing – but there were still a lot of things I didn’t like about the operating system. With Windows 7 on the other hand, I really don’t have any complaints at all and I can honestly say that when the masses get their hands on this operating system they will fall in love with it. Not because it’s shiny and new, not because it doesn’t crash (although Vista really doesn’t crash either, but that’s not what I’m talking about here) but because it makes life easier for the user.

So in the coming week I will publish ten articles outlining ten Windows 7 features that will make you fall in love with the application (and quite possibly reconsider your “Mac is better” stance):

1. It Just Works – Right Out of the Box!

The first thing that astounded me with Windows 7 is that it works properly out of the box. That may sound weird but if you’ve even tried to reinstall a Microsoft operating system on a computer, be it a branded unit, a custom built machine or a laptop, you know that the OS install is just step one of several. In the old days, simply installing the operating system would give you a computer with terrible screen resolution, no networking and generally sub-par performance. To get things running properly you needed to search for and install numerous drivers including screen drivers, motherboard drivers, networking drivers, audio drivers etc etc. All of this took time, effort and a lot of patience – three things people normally don’t have.

To try to curb this problem many PC manufacturers ship their computers with custom OS installs that revert the system back to store shelf operation. The problem with this is that the manufacturers have started selling space on these reset systems and filling that space with bloatware and garbage you don’t want and don’t need. And when you revert your system to shelf operation it means reinstalling all the trash – an operation that ruins performance and clutters your PC. All in all it’s a crap chute.

No more: Windows 7, out of the box with zero custom drivers and no setup, works properly on most if not all modern computers. Case in point: I just installed Windows 7 RC on my wife’s aging Toshiba Satellite M100. It took 15 minutes in total and once the OS was installed, everything except the audio and the scrolling function on the mouse pad worked perfectly (and in the Windows 7 team’s defense, there is a known problem with the M100 audio because the drivers from the audio manufacturer don’t work properly). I had wireless networking, full functionality including custom Fn keys, optimal screen resolution and performance and even card reader functionality. When I installed Vista Ultimate on the same computer a week earlier I had to download and install 12 drivers to get the same functionality.

The same can be said for my Sony Vaio SR140D only this time no drivers were needed to get the computer up to fully working status.

Why does it work so well now? With the release of Windows Vista, Microsoft ran into an unexpected problem: The 3rd party component manufacturers were unbelievably slow in rolling out drivers for the new OS and as a result users were stuck with computers that didn’t work properly. And even though the driver problems sorted themselves out over the first 6 months of Vista’s life, the damage was done and people wrongfully blamed Vista (and Microsoft) for the problems. The Windows 7 team took the experiences from the Vista launch to heart and devised a novel yet ingenious solution: Invite all the hardware manufacturers to work with the development team on the Microsoft campus to create generic drivers for all their hardware, and place those generic drivers either in the install itself or in an open repository for easy access.

As a result when you install Windows 7 on a computer with hardware from a known manufacturer, the installation disk more than likely already has a fully functional generic driver for that hardware that works to spec making the search for specialized drivers pretty much pointless.

But does it crash?

Much has been made of the Windows platform’s uncanny ability to crash at the most inopportune of times. But truth be told this really isn’t as big an issue as it is made out to be. In my experience (and for the record, I currently have 7 computers running in my house) computers crash for two reasons: Either you make them do something they really shouldn’t be doing or something inside the computer goes bump in the night. System crashes caused by “crappy” operating systems are incredibly rare and just as likely to happen on a Mac or a Linux based computer as a PC.

That said I have managed to crash Windows 7 RC once while trying to run a corrput .avi file in Windows Media Centre, Windows Media Player and VLC at the same time. Not surprisingly when all three applications encountered the same bad part of the clip at the same time things went horribly wrong and the famous blue screen of death appeared.

My point is this: If your Windows 7 computer is functioning properly hardware wise and you’re not trying to bring it to its knees, it won’t crash. Period.

Expression Web My Book

In rewrite mode: New version of my book on the way!

Since was kind enough to list my book months before it’s done and I’ve been Tweeting about it for weeks there really is no reason to pretend it’s a secret any more: I am currently in the process of revising my book Sams Teach Yourself Microsoft Expression Web in 24 Hours 3 for the upcoming release of Expression Web 3 which is slated for some time later this summer.

Needless to say writing a book about software that not only is not out yet but is not even finished yet is a bit of a challenge. And like last year (when I wrote the first version of the book) I will probably spend the next couple of months in constant revision mode making new screen grabs, changing tutorials to fit a not-yet-completed user interface and so on. But hey, I’m not complaining: Writing these books means I have to learn and understand every minute detail about the software. And knowing your tools inside out makes for a faster and more productive work routine.

The new book is more than just an update to fit the new user interface: Over the past year I’ve received countless emails from readers with questions and comments about everything from how to save files in Expression Web to how I got a book deal and I’ve taken all these comments, suggestions and criticisms along with my own experiences and thoughts to rewrite many of the chapters and add new and exciting content. And yes, my sentences are just as long in the book!

New features in the book

The new version of the book will, amongst other things, include:

  • a completely new project that the reader will build from the ground up. The new project has a better design, more flexibility and new choices for the designer to make the site her own. The idea behind the new project is that once the site is completed by the end of Hour 24, the reader can simply replace the content from the book with her own content and launch the site.
  • New menu tutorials showcasing vertical and horizontal CSS based menus as well as a CSS based drop-down menu.
  • A CSS layout tutorial explaining how you can use CSS to create multiple different layouts within one site without having to make separate style sheets.
  • An entire chapter on cross-browser testing using SuperPreview and the other accessibility and reporting tools built into Expression Web 3.

I am currently rewriting Hour 18 and, having skipped some chapters, still have about 10 to go (plus a couple of apendixes and a bonus chapter) so if you have comments, questions, concerns or anything else you want to say before I wrap this baby up, please feel free to put it in the comments below or send me an email. The book is written to help you so if you need help, speak up!

That said, go to and buy the book now. That way you know you’ll have it the minute it comes out!