Category Archives: Expression Web

Mar 18
Expression Web, News 8

Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips

Microsoft Expression Web SuperPreview BetaAbout a year ago I got an email from my friend Anna Ullrich from the Microsoft Expression team. She wanted to know if I’d be interested in providing some feedback on a new, exciting and super secret application they were developing for the next release of Expression Web. Being obsessively curious I couldn’t turn that offer down and a few weeks later Anna and Boris Feldman drove up from Redmond to meet me at the Microsoft office in downtown Vancouver.

What they presented to me – after the signing of numerous Non-Disclosure Agreements – was a pile of sketches of a future browser preview application with the working title “SuperPreview”. The premise was simple: During the authoring of a website the developer or designer can test the current output and get feedback in the form of warnings, graphic overlays and onion skinning showing how the page will appear and change depending on what browser is being used.

Now browser previews is not a new idea by any means – there are tons of free and paid online services that do the job and most if not all web design applications offer multi-browser previews – but all the existing services operate on a browser-by-browser basis. What was novel about SuperPreview was the idea of viewing all the browser outputs simultaneously and on top of each other so you can really see what the difference is.

As a designer/developer cross browser testing is a daily routine that often leads to my computer getting some multi-lingual verbal abuse. Because even with perfect, standards based and properly validating code there is no guarantee the site you design will look the same across all browsers and all platforms. What makes cross-browser testing truly tedious is that for every page you have to open multiple browsers and look a them individually. And if you want to find minute positional shifts or other differences you often have to flip back and forth between browsers or use screen grabs or worse (I sometimes use whiteboard marker on my screen!). Any application that simplifies this process would be a huge help.

So for two hours Anna and Boris listened to my rambling feedback and lofty suggestions and at the end we parted ways, they with a pile of notes, me with a deep and profound desire to build a time machine so I wouldn’t have to wait for the damn thing to be developed.

And today, finally, the wait is over. In conjunction with the MIX09 conference in Las Vegas Microsoft Expression Web SuperPreview is now available for download in public beta. Get the whole story »

Feb 25
Events, Expression Web 0

Speaking at Interactive Panel Discussion: The Right Presentation Layer for Your Solution

I’ve been invited to participate in an interactive panel discussion about Microsoft’s many web development and presentation tools called “The Right Presentation Layer for Your Solution”. The discussion takes place online tomorrow (Thursday Feb. 26, 2009) at 11am to noon Pacific time (2pm to 3pm EST). To see, hear and participate in the discussion you have to register by following this link. Below is the press release in its entirety.

Interactive Panel Discussion: The Right Presentation Layer for Your Solution

By the end of this webcast, you will be able to:

  • Use some of the presentation layer tips and tricks provided by the panel
  • Gain some knowledge of what presentation layer technologies Microsoft provides that you can use in your solutions
  • And most importantly, have your questions answered!

The Presentation Layer of an application can be pivotal to the adoption of your solution by users. The right technology for the presentation layer should be the one that makes an emotional connection with the user and helps make the user more productive.

Join us for an interactive panel discussion from some of the foremost experts in user experience, effective presentation layer design and development. This is intended to be a discussion between you and the panel of experts, so come prepared to ask your questions about picking the presentation layer for solution!
This event is focused on Custom Developers, ISVs and Interactive Designers.

This webcast is appropriate for both technical and business decision makers.

W E B C A S T

Thursday February 26, 2009

Time: 2:00PM to 3:00PM EST

Event ID: 1032385445

Register Now

Dec 23
Expression Web, Microsoft Expression, News 1

Get Microsoft Expression Products 50% off for the Holidays!

Just before the Holidays this dropped into my inbox. It’s a great deal made even better by the fact that the Microsoft Expression line is already competitively priced. Add to that the great review Expression Web 2 got form PCMag.com and you have the perfect last-minute or belated gift for yourself or the web designer / developer in your life:

For a limited time (exact timeframe is TBD), there is a 50% off discount on Microsoft Expression Studio, Expression Blend and Expression Web through the new Microsoft Online Store. *This is US Only*

http://store.microsoft.com/microsoft/design-developer/category/6
http://store.microsoft.com/microsoft/design/category/601

Nov 21
CSS, Expression Web, News 32

Pure CSS Drop-Down Menu tutorial – a slight omission

I just got a comment from a reader of my recent Expression Newsletter article The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web. He was having trouble getting the grey boxes to “fill out” properly which left the menu looking weird.

A quick review of his CSS told me the problem was he didn’t have the display property set to block. A slight omission for sure but I was more focused on where it originated. A quick read of the paragraph in the article showed me that somewhere in the editing (probably during my rigorous clean-up) this small but important piece of code was ommitted. Which means if people follow the tutorial step by step they’ll run into the same problem.

I’ve already informed the newsletter team of the issue and hopefully they’ll fix it presently. In the meantime, if you’ve run into this problem and you found your way to this blog, here is the full paragraph and the resulting code:

5th paragraph under the heading “Style the links”:

To set the height of the link go to the Block category and set the line-height attribute to 30px to match the height of the ul li style you defined earlier. The reason you are using the line-height attribute instead of the height attribute is that line-height automatically places the text at vertical center. If you were to use height you would have to set the vertical placement manually using padding. To set the width, go to the Position category and set width to 150px to match. Finally, to “fill out” the area with the background colour, go to the Layout category and set display to block.

The resulting code should look like this:

ul li a {
	background-color: #808080;
	color: #FFFFFF;
	width: 142px;
	display: block;
	text-decoration: none;
	line-height: 30px;
	padding-left: 8px;
}

You can find a full working version of the menu here and it’s CSS here for reference.

Nov 18
CSS, Expression Web, News, Tutorials 11

Read my article in the Microsoft Expression November Newsletter

A month or so ago Microsoft contacted me and asked if I would write an article on Expression Web for their Expression Newsletter. How could I say no to such an opportunity? After some back and forth about the topic I landed on an article on how to create a Pure CSS Drop-Down menu. Over time I’ve encountered numerous solutions, most of which were clunky and didn’t work properly. So the tutorial demonstrates how to create a fully functional CSS-only drop-down menu utilizing the excellent CSS features in Expression Web.

That’s not to say you have to use Expression Web to get something out of the article though. You can follow the tutorial and get the same results even if you’re using Notepad to build your sites. It’s just that Expression Web makes it a hell of a lot easier to manage.

This article comes hot on the heels of my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours which contains an expanded tutorial on the same topic that also covers a layers-based drop-down menu. If you are an Expression Web 2 user of if you are considering buying or switching over to this excellent web authoring and publishing platform I humbly suggest you pick up a copy for yourself. It’s a quick read and it gives you hour-by-hour instructions on how to create a web site from scratch with the application. And once you’re done, you’ll have a fully working and standards based web site at your disposal. I wrote it as the book I wish someone had written when I started out and from the response I’ve gotten so far people are learning a lot from it. Which is what I set out to do.

If you’re interested in a preview of the kind of content you’ll find in the book or you just want to know how to make a Pure CSS Drop-Down menu, you can read the full article, The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web, here or subscribe to the Expression Web Newsletter.