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.

Expression Web Tutorials

Why I Use Expression Web (And Why You Should Too)

As you can see from the sidebar of this blog, my main areas of expertise lie in WordPress and Expression Web. The truth of the matter is for me the two are intrinsically linked: I use Expression Web to make WordPress do my bidding. To that people often ask me “Why?”. “Why do you use Expression Web and not one of the more established web development platforms (i.e. Dreamweaver)?”

To answer this question I wrote an article for the QUE blog entitled Why I Use Expression Web (And Why You Should Too). To go with the article I also created a short video demonstrating the lightning fast CSS abilities of Expression Web. I find that it’s easier to show this technique than try to explain it.

Once you’ve finished watching the video I urge you to jump over to the QUE blog and read my article. I really do think you should start using Expression Web too (and no, I’m not being paid to say that).

Expression Web Video Tutorials

Microsoft Expression Web 4 LiveLessons 50% off!

Limited time only, so be quick about it! My LiveLessons video series on Expression Web 4 is being sold straight from QUE at 50% off – so a ridiculous $20 for 5+ hours of training – right now. Just follow this link.

The sale also includes a bunch of other great titles including Office 2007 and Windows 7. Full details below:

“LiveLessons are video courses organized into bite-sized, self-contained sessions so you can learn key skills in as little as 15 minutes. Each session begins with well-defined learning objectives and ends with comprehensive summaries, which help you track your progress. LiveLessons video training video formats include standalone DVD-ROMs, value-priced DVD/Book Bundles, Safari Books Online subscription services and purchases, and immediately-downloadable (streaming) lesson sets or individual lessons.

For a limited time, SAVE 50% on these featured LiveLesson DVDs and full course downloads. Discount is automatically applied to the shopping cart.”

Click here for all the details and a complete listing of courses available.

Expression Web Video Tutorials

Microsoft Expression Web 4 LiveLessons now available

This year I’ve been working on no less than three major publishing projects: An update of my book Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours, a video series called WordPress 3.0 Essential Training for and last but not least a Microsoft Expression Web 4 LiveLessons video series for Pearson and Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours was released Tuesday last week, WordPress 3.0 Essential Training went live Wednesday this week and today Microsoft Expression Web 4 LiveLessons went live on (click the link to watch the samples). The DVD sets for the LiveLessons series are being printed as I write this and will be available in a couple of weeks. They can be pre-ordered from

Combined these three educational products form a solid base for anyone who wants to learn how to build standards-based web sites and publish their content on the web using Expression Web and WordPress. All three were written and developed to teach you not only how these applications work but also how you can use them effectively to produce solid web content fast. They are all based on my own work process and adopting the techniques in the book and video series’ will make you a better and faster developer no matter what level you are currently at.

Click here to preview a sample chapter: HTML – An Introduction.

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

Expression Web Tutorials

Build a fancy author or profile box with Expression Web

A profile box is a great way of quikcly giving your visitors information about a person featured on your site. These boxes normally feature a quote or short biography followed by the person’s name, affiliation and maybe a photo and usually are just straight up blockquotes or something similar. In other words they are a bit boring. But there really is no reason why they should be: Text and images on the web can pretty much be displayed in any layout you want. All you need is the creativity to come up with a better way of displaying it and either the knowledge of CSS and HTML to get it done or a tool to help you along the way.

In this tutorial I’ll show you how to build the fancy profile box pictured above and featured on the testimonial page on the Pink & Yellow Media website using Expression Web. If you don’t use Expression Web you can still follow along and use the code so don’t worry. Click here to see a working demo (opens in new tab or window).

Start with a design

The image above is actually the real Photoshop mockup I did for the project (if you look closely you’ll see that Tracy’s photo is blurry because I kept scaling it up and down to get the size right). I mock up all my projects, even if they are just small ones like this, in either Photoshop or Expression Design to have a quick way of altering the layout and design until I find something I like.

The completed design also serves another equally important purpose: With the layout done it’s easier to map out how the HTML and CSS needs to be organized to get the dynamic web content to match the static image. In it’s most basic form HTML works by wrapping content in boxes and CSS styles those boxes. Therefore mapping out what boxes are needed right on the design like below makes it a lot easier to figure out the next several steps.

Building the HTML markup

The boxed out image above gives us a clear indication of how the markup needs to be organized:

  • There’s a box that contains everything that has a grey border
  • The quote itself has to be contained within it’s own box
  • The profile info (name, affiliation, image) needs to be wrapped in its own box
  • The name is separate from the affiliation and needs its own box
  • The image needs to float on top of other content, namely the blue background banner

From this we can start building the markup. I usually start working with actual content right away but I’ve been told most people get confused by this method so I’m going to recommend building the HTML framework first and then inputting the content. The next steps take place in Code view.

As step zero create a container to simulate the width of your website. This is just to make sure that the box expands and contracts properly when it’s done. To do this go into Code view and create a new line directly under the <body> tag. Type <div id=”container”> and Expression Web creates the end </div> tag for you. Hit Return several times to create space between the beginning and end tag.

A smart tip: To keep track of what tag closes what div insert a comment after each of the closing divs expalining what that is, for example </div> <!– END #container –>

Create a new line under the div you just created and create a new div, this time with the class profile like this <div class=”profile”>. This div is the outer wrap for the actual box. Again hit Return several times to make space between the beginning and end tag and identify the end tag with the comment <!– END .profile –>.

Create a box for the profile text by creating a new div inside the profile div with the class profileText.

Underneath the profileText div (not inside it) create a new box to contain the name, image and affiliation. Give this div the class profileStats.

Inside the profileStats div create two new separate divs with the classes profileName and profileJob respectively.

The framework is now complete and should look like the code example below. Notice how I use tab indents to visually show how elements are nested within eachother:

<div id="container">
	<div class="profile">
		<div class="profileText">
		</div> <!-- END .profileText -->
		<div class="profileStats">
			<div class="profileName">
			</div> <!-- END .profileName -->
			<div class="profileJob">
			</div> <!-- END .profileJob -->
		</div> <!-- END .profileStats -->
	</div> <!-- END .profile -->
</div> <!-- END #container -->

Insert the content

With the framework all mapped out it’s time to insert some content. In Expression Web go to Split view. You’ll notice that in the Design view portion there are now three boxes with dotted outlines. Clicking on each of these will show you what box you have selected. At the same time you’ll see where you are in the framework structure in the Code view portion so you always know you are typing out content in the right place. Now you can insert your content in the different boxes. The bio, profile, quote or testimonial goes in the profileText box, the name of the person goes in the profileName box and the affiliation stats (position, company, website etc) goes in the profileJob box.

The image in this tutorial is 88px by 88px. To personalize this tutorial you should make your own image to use.

When it comes to the image it doesn’t really matter exactly where you insert it (you’ll see why later). But for structural purposes it should be within the profileStats box. To insert it place your cursor directly after the opening tag of the profileStats div and hit Return to create a new line. Click Insert on the main menu, select Picture and From File to open the Picture dialog. From here select the image you want to display and click Open. This will insert the image into your code. The image to the right shows the markup in Code view and what the cntent currently looks like in Design view (click for full size version). Below is the markup at this point:

<div id="container">
	<div class="profile">
		<div class="profileText">		
			If there was a need for a Word Press Superhero [and there is] Morten 
			would be your guy.<br />
			Pink & Yellow Media took on the Design Schooled Kids website 
			project because it would push Word Press to its very limits in both 
			look and functionality. We presented them with a design and it they 
			made it a reality — BIG TIME!<br />
			Without hesitation I would highly recommend Pink & Yellow Media.</div> <!-- END .profileText -->
		<div class="profileStats">
			<img src="tracyPic.jpg" />
			<div class="profileName">
				Tracy Sullivan</div> <!-- END .profileName -->
			<div class="profileJob">
				Principal & Creative Director <br />
				<a href="" title="Design Schooled Kids">
				Design Schooled Kids</a></div> <!-- END .profileJob -->
		</div> <!-- END .profileStats -->
	</div> <!-- END .profile -->
</div> <!-- END #container -->

Styling the content

You now have the complete markup for the page. The next step is to create the styles that will make the box look the way you want it to.

Again step zero is to simulate the width of an actual site: On the right hand side of Expression Web you should have a series of panels, probably Toolbox, Apply Styles and Manage Styles. Close Toolbox and Apply Styles (you can always open them again from Panels on the main menu). I do 99% of my work from the Manage Styles panel. In the Manage Styles panel click New Style to open the New Style dialog. For the Selector type #container (the # sign means ID while a punctuation mark means Class). Go to Position and set the width to whatever width you are going to work with. In my case it is 506px. Click OK to apply the style. You should now see that the box is narrower than it was before.


The .profile class is the outer box that wraps the content. From the image at the top of the article we see it is supposed to have a grey border. If you want to, Expression Web will help you assign selector names to your styles. Click on any of the content in Design view and use the Tag Selector up at the top to highlight the <div.profile> tag. Now click on New Style in the Manage Styles panel and Expression Web will automatically set the Selector name to .profile. All you have to do here is go to Border and set all four sides to solid, 1px and #CCCCCC. Click OK to apply the style and you’ll see the content now has a grey border around it.


You may have noticed you didn’t add padding to the .profile box to give the text some breathing space. This is because that padding would have affected the blue bar at the bottom of the box. You’ll see later. To create some breathing space for the profile text and set the font family create a new style with the selector .profileText. Under Box set Padding for all four sides to 10px. Under Font set the font-family to Arial, Helvetica, sans-serif and font-size to o.8em. Click OK and the text will indent and change font family.


The name and position in the design is a serif font and aligned to the right. This can be done in the respective styles for the individual elements or as we do it here in the overall style: Create a new style with the selector .profileStats, set the font-family to Georgia, Times New Roman, Times, serif and font-style to italic. To change the text alignment go to Block and set text-align to right.

.profileStats img

Right now the image appears above the rest of the profile stats. The design calls for it to appear in the bottom right corner. To do this we’re going to use absolute positioning. Create a new style with the selector .profileStats img. This style will only target the image. Go to Position and set Position to absolute, right to 0px and bottom to 0px. The absolute positioning ‘lifts’ the affected content out of the regular stream and positions it based on XY coordinates within the page, in this case 0px from the right and 0px from the bottom so the bottom right corner. But when you click on OK you’ll see that the image places itself in the bottom right coner of the page, not the box. This is because an absolutely positioned element will relate itself to the first containing element that has a position value set to something other than static which is the default value. Since there are no such elements it relates itself to the window itself. To fix this we need to change the Position value of the .profile box. To do this go to the Manage Styles panel, right click the .profile style and select Modify Style from the pop up menu. In the Modify Style dialog go to Position and set position to relative. Click OK and the image now appears in the bottom right hand corner of the box. But now it overpals the name and affiliation text. So that’s what we’ll fix next.


To shift the profile name out from under the image create a new style with the selctor name .profileName, go to Box and set padding-right to 98px (88px for the image widht plus 10px for some breathing space). At the same time set padding-bottom to 5px. Under Font set font-size to 1.2em, font-weight to bold and color to #2e4672. Click OK to apply the new style.


This is where that blue stripe in the design comes in. The blue is actually a tiny .gif image tiled to the right and used as a background. Create a new style with the selector .profileJob. Let’s fix the text first: Set font-size to 0.8em, color to #FFFFFF and under Box set padding-right to 98px and padding-top to 5px. To add the blue background go to Background, set background-image to testimonialBlue.gif (image file) and set background-repeat to repeat-x. Finally because the design calls for the blue banner to be 50px tall go to Position and set height to 45px. It’s set to 45 rather than 50 because the padding is added on to the height and you already added 5px earlier. Setting height to 50px would mean the box is actually 55px tall.

.profileJob a

Finally to style the link create a new style with the selector name .profileJob a. Set font-weight to bold, color to #FFFFFF and check none under text-decoration.

Final thoughts

This box is fairly easy to implement in both static and dynamic sites. I have it running under WordPress on our company website though I had to create a special style for the paragraph tag to get that to work properly. The box is stested against all major browsers and works properly. The only divergence is a 1px shift of the image in Internet Exprlorer 6 which I think is acceptable.

Final HTML Markup

<div id="container">
	<div class="profile">
		<div class="profileText">		
			If there was a need for a Word Press Superhero [and there is] Morten 
			would be your guy.<br />
			Pink & Yellow Media took on the Design Schooled Kids website 
			project because it would push Word Press to its very limits in both 
			look and functionality. We presented them with a design and it they 
			made it a reality — BIG TIME!<br />
			Without hesitation I would highly recommend Pink & Yellow Media.</div> <!-- END .profileText -->
		<div class="profileStats">
			<img src="tracyPic.jpg" />
			<div class="profileName">
				Tracy Sullivan</div> <!-- END .profileName -->
			<div class="profileJob">
				Principal & Creative Director <br />
				<a href="" title="Design Schooled Kids">
				Design Schooled Kids</a></div> <!-- END .profileJob -->
		</div> <!-- END .profileStats -->
	</div> <!-- END .profile -->
</div> <!-- END #container -->

Final CSS markup


#container {
	width: 506px;
.profile {
	border: 1px solid #CCCCCC;
	position: relative;
.profileText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 10px;
.profileStats {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	text-align: right;
.profileStats img {
	position: absolute;
	right: 0px;
	bottom: 0px;
.profileName {
	padding-bottom: 5px;
	padding-right: 98px;
	font-size: 1.2em;
	font-weight: bold;
	color: #2e4672;
.profileJob {
	font-size: 0.8em;
	padding-right: 98px;
	padding-top: 5px;
	background-image: url('testimonialBlue.gif');
	background-repeat: repeat-x;
	height: 45px;
	color: #FFFFFF;
.profileJob a {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;

Expression Web Speaking Engagements WordPress as CMS

Webcast: An Intimate and Enlightening View into Microsoft Expression Web 3

I’m doing a 1 hour live webcast with Microsoft Canada demonstrating advanced WordPress customization with Expression Web 3 on April 6th, and you are welcome to join. It will be an extended version of my MIX10 session with more demos and more time for questions. All you have to do to participate is register. Full writeup below:

Invitation Code: 0781DA
Tuesday, April 6th, 2010
Start Time: 11:00AM PST (02:00 PM EST)

Webcast Duration: 60 min
Questions about these events?
Call us at 1-888-789-7770

A follow up to Paul Laberge’s “101” webcast, Expression Web MVP and WordPress hacker Morten Rand-Hendriksen takes you through an intimate and enlightening look into his day-to-day work process. He specializes in building solid standards-based websites on the WordPress platform using Microsoft web technologies and Expression Web. The session takes you through real-life examples of customer projects and pulls back the curtain on a work process that employs what Morten jokingly refers to as the “Unholy Quatern” – Microsoft’s Expression Web 3, Web Platform Installer and Mesh combined with the open-source publishing platform WordPress. Combining these four technologies Morten has developed a process in which rapid site debugging, prototyping and implementation becomes a reality.

Learn the inner workings of WordPress and how to use its theme engine to build pretty much any website you can think of using Expression Web 3 and see how using simple web technologies like WPI and Mesh can make your life as a CMS dev/igner much easier.

Register Today!

Events Expression Web Speaking Engagements WordPress Themes

MIX10 Proposal: I Reject Your Stylesheet and Substitute My Own

I reject your stylesheet and substitute my own t-shirt

Ever since I was invited to attend Microsoft’s web design and development conference MIX in 2008 I’ve been itching to submit my own session proposal and get on the podium to share with other developers and designers my experiences working with Expression Web and WordPress. The plan was to submit a proposal for MIX09 but life and work intervened and made it impossible for me to even attend (truth be told I was going to a wedding in Hawaii the same week so I really shouldn’t complain). But this year March is wide open and I’ve jumped in head first and submitted a talk with the modest title “I Reject Your Stylesheet And Substitute My Own – Rapid site design and prototyping with Expression Web 3 and WordPress” to the OpenCall portion of MIX10. And now I need your help to get my proposal accepted so I can get in and do my thing.

OpenCall is literally a popularity contest: The ten most voted on proposals get a slot at the conference and the rest are left by the wayside. As far as I can tell my proposal is the only one focusing on Expression Web (at least it’s the only one that shows up on a search) and also the only one talking about WordPress so my hope is that both those interested in the web authoring application and those interested in WordPress specifically or open-source or CMS design in general will find it compelling and want to vote for it. Only time will tell.

To vote for I Reject Your Stylesheet and Substitute My Own visit the OpenCall ballot page found here and click the Add session to ballot button. You can vote for a total of 5 sessions with one ballot. The rest of the sessions can be found here. Once you’re done voting, spread the word and get all your friends to vote for me as well. Voting ends on the 15th of January so there’s little time but I am certain with your help my name will appear on the roster alongside the many other fantastic speakers at MIX10.

Oh, and if you’re interested the extremely limited edition I Reject Your Stylesheet and Substitute My Own T-shirts are available in green, blue, tan and black sizes S, M and L (Fruit of the Loom, heavy cotton) for $20. Contact me with your name and mailing address and I’ll wrap one up and send it to you.

Expression Web

Expression Web 3 Service Pack 1 now available

Good news for everyone who has been looking for root-relative links in Expression Web 3: The new Service Pack 1 (SP1) now has this feature along with a host of other requested upgrades such as the return of optional Windows colours rather than the cool and stylish but dark user interface.

New stuff

Cut straight from the Knowledge Base article, here’s a full rundown of the new features:


Supports add-ins that use the Expression Web object model.

Root-relative links

Supports root-relative hyperlinks.

PHP files that do not use the *.php file name extension

Adds support for Drupal and CakePHP template files. Expression Web 3 SP1 now recognizes .module, .install, .inc, and .ctp as valid PHP extensions.

Application color scheme

Provides an improved black and gray color scheme that better reflects the appearance of the Microsoft Expression Studio 3 family of products. Expression Web 3 SP1 also provides a new Application Options setting that lets you select the Windows color scheme instead of the default color scheme.

Microsoft Internet Explorer 8 META tag and Web Slice support

Contains new code examples to support features that are specific to Internet Explorer 8. The new code examples include META tags specific to Internet Explorer 8, plus a new Web Slice code example. You can access the code examples by pressing Ctrl+Enter in Code view.

Old fixes

The Service Pack also addresses a bunch of standing issues with the original release. Again cut straight from the Knowledge Base article:

  • Fixes a problem in which multiple tasks are undone when you use the Undo feature.
  • Resolves a problem in which an invalid link is generated when you drag an image from the Folder List panel into the Code view of a page.
  • Enables you to select text in the Design view of a page more easily and more accurately.
  • Resolves a crashing issue caused by nonstandard or corrupted fonts that are installed on your computer.
  • Fixes a problem in which tags that begin with <?php are renamed after you rename a file.
  • Resolves a problem in which Japanese characters are altered.
  • Resolves a problem in which the source file is deleted after you copy a file from one instance of Expression Web 3 and then paste the file into another instance of Expression Web 3.
  • Restores the ability to drag files into a selected folder in the Folder List panel.
  • Enables connections to each destination without restarting the application when multiple publishing destinations are specified on the same FTP server and when only the user credentials are different for those destinations.
  • Fixes several problems in the workflow between Expression Web and Team Foundation Server.
  • Shows the correct file status in Publishing view after you publish a site.
  • Updates the file status and publishing log when you use the Publish Selected Files command to publish one or more files. Additionally, Expression Web 3 SP1 displays the publishing progress in the Publishing Status panel.
  • Provides several fixes that make sure that pages accurately display in SuperPreview.

Users ask, the Expression team delivers

The release of Expression Web 3 SP1 comes on the heels of an extensive process where the Expression Web team went out and asked users and MVPs what features they wanted to see added or improved in Expression Web 3. As a result much of what you see in this upgrade is actually based on what we, the users, have requested. Which I have to say is very cool. Two such examples are the root-relative links (which I requested back in the early days of EW2) and the application colour scheme which was removed from EW3 and many MVPs wanted back. More than anything this shows that the team are working hard to listen to the end users and creating the application the end user wants. Which is more than I can say for a lot of other software developers.

Go get it right now (it’s free)!

If you’re running Expression Web 3, go to the website and the the Service Pack right now. It’s a one-click install you can download directly by clicking here. It’s also available in mutliple languages other than English.

Expression Web News

The Big Expression Web 3 Giveaway – Winners Announced

Expression Web 3 Giveaway


The draw for the Expression Web 3 giveaway were performed this evening by @AnnyChih and @dabblerDOTca. Congratulations to @paladyn as the grand prize winner. The two runners up are @tommyflynn and @mxj1009. A big thanks to the 80-some Tweeters who participated in the contest.

To celebrate the release of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours Design Is Philosophy is holding a contest with some excellent prizes:

1st prize:

2nd and 3rd prize:

The winners will be selected by random draw of the twitter accounts that have tweeted the above comment and will take place on Wednesday October 7th at which point I will contact the winners. You’ll have 2 days to get your contact info back to me so check back here and keep an eye on your inbox on Wednesday to ensure that you get the prize if you win.

How to enter

Putting your name in to win the big prize is incredibly simple:

  1. Follow me on Twitter
  2. Tweet the following message:

Win an Expression Web 3 package incl software, Teach Yourself xWeb 3 book + Tshirt from @mor10. Details here:

If you’re not already on Twitter it is easy to join: Just go to, enter your credentials and start tweeting. Twitter is an excellent social networking tool where you can find and connect with people from all walks of life including other Expression Web users and experts. Chances are if you have a problem, suggestion, question or concern you’ll find someone on Twitter who has an answer or a tip to get you on your way. While you’re there make sure to follow these other Expression Web tweeters: @MSExpression, @expressionweb, @tinaclarke, @patgeary, @XStudio, @cdwise.

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.