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.

Related posts:

1. In rewrite mode: New version of my book on the way!
2. My book is featured in the Canadian User Experience Blog
3. This is Expression Web 3

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

Related posts:

1. This is Expression Web 3
2. Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips
3. Expression Web 3 Service Pack 1 now available

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:

<body>
<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 -->
</body>

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:

<body>
<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 &amp; 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 &amp; Yellow Media.</div> <!-- END .profileText -->
		<div class="profileStats">
			<img src="tracyPic.jpg" />
			<div class="profileName">
				Tracy Sullivan</div> <!-- END .profileName -->
			<div class="profileJob">
				Principal &amp; Creative Director <br />
				<a href="http://www.designschooledkids.com" title="Design Schooled Kids">
				Design Schooled Kids</a></div> <!-- END .profileJob -->
		</div> <!-- END .profileStats -->
	</div> <!-- END .profile -->
</div> <!-- END #container -->
</body>

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 Stles 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.

.profile

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.

.profileText

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.

.profileStats

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.

.profileName

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.

.profileJob

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

<body>
<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 &amp; 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 &amp; Yellow Media.</div> <!-- END .profileText -->
		<div class="profileStats">
			<img src="tracyPic.jpg" />
			<div class="profileName">
				Tracy Sullivan</div> <!-- END .profileName -->
			<div class="profileJob">
				Principal &amp; Creative Director <br />
				<a href="http://www.designschooledkids.com" title="Design Schooled Kids">
				Design Schooled Kids</a></div> <!-- END .profileJob -->
		</div> <!-- END .profileStats -->
	</div> <!-- END .profile -->
</div> <!-- END #container -->
</body>

Final CSS markup

<style type="text/css">
#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;
}
</style>

Related posts:

1. Build a fancy WordPress author box
2. Fancy Interactive Pure CSS List Boxes with Hover Effect
3. Create a Twitter box in your sidebar

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:

REGISTER
Invitation Code: 0781DA
Tuesday, April 6^th, 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!

Related posts:

1. Expression Web 2 Webcast June 5th – What do you want to know?
2. Speaking at Interactive Panel Discussion: The Right Presentation Layer for Your Solution
3. Get Microsoft Expression Products 50% off for the Holidays!

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.

Related posts:

1. 2008 Weblog Awards Finalist
2. MIX10 Session and Supporting Documents
3. Why a CSS Reset should be at the core of your stylesheet

New stuff

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

Extensibility

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.

Related posts:

1. HTML Basics: Hyperlink Syntax – Absolute, Relative and Root-relative
2. Expression Web 2 Beta Bug Report
3. Introducing Expression Studio 4 Web Professional

UPDATE: WINNERS ANNOUNCED!

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:

• A full working copy of Microsoft Expression Web 3
• A signed copy of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours
• A limited edition custom Design Is Philosophy t-shirt as pictured above (your choice of size and colour – black, blue, green and tan available)

2nd and 3rd prize:

• A signed copy of my new book Sams Teach Yourself Microsoft Expresison Web 3 in 24 Hours

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: http://bit.ly/VEG6R

If you’re not already on Twitter it is easy to join: Just go to Twitter.com, 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.

Related posts:

1. Read my article in the Microsoft Expression November Newsletter
2. My book is featured in the Canadian User Experience Blog
3. First photo of my new Expression Web 3 book

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 Amazon.com 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

One 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.
But 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

In 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

I’ve written about SuperPreview before both here on DesignIsPhilosophy.com 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.

Related posts:

1. Introducing Expression Studio 4 Web Professional
2. Previewing Silverlight Applications in Your Browser With Expression Development Server
3. Expression Web 3 Service Pack 1 now available

As per usual nothing of my session will be set in stone until a couple of minutes before the session starts (because I’m just that organized) so if you’re attending and you have a request or a suggestion or a question that you’d like me to talk about, drop a line in the comments of this post or send me an email and I’ll take it under consideration.

I was going to bring some of my new and insanely cool limited edition shirts to the event but sadly the printer decided they need two full weeks to do the job so they won’t be ready in time. Instead I might be bringing some other cool nicknacks to remember me by. And who knows, it might be something you actually want!

Related posts:

1. Speaking at Vancouver Microsoft Innovation Briefing
2. The Big Expression Web 3 Giveaway – Winners Announced
3. Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?

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 Amazon.com and buy the book now. That way you know you’ll have it the minute it comes out!

Related posts:

1. The Cat’s Out of the Bag: I’m Writing a Book!
2. My book is finally here!
3. My Book Is Finished (first draft at least)!