Jul 10
This is Expression Web 3
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.
Dec 23
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 15
NaturesCarpet.com – 2nd Expression project live to the world
Finally, after weeks of designs and redesigns my second Expression-only project went live to the world last week. The site – for Vancouver based carpet retailer Colin Campbell & Sons’ new line called Nature’s Carpet – was entirely designed and coded using Expression Design and Expression Web (apart from the tacky Flash intro which was done in Flash). I think this site is far superior to my first Expression project iZufall.com because this time I knew of some of the pitfalls and I learned some valuable lessons on the way.
You might remember that I had a problem when exporting my Design elements for use in a html environment. Expression Design is a vector based program that does not constrain to true pixels. Coming from a PhotoShop environment I made the stupid mistake of eyeballing my designs when creating iZufall and by the time I discovered my error I was too far in to change things around. As a result there were some whitespace issues with the site.
Not so with Natures Carpet. This time I took the time to set all the margins and sizes using guides before starting on the actual design work. This requires that you know roughly what the site is going to look like but then all my designs start on paper so that’s not too difficult. With all my margins set beforehand it was easy enough to make and export graphical elements that fit snugly in my divs without creating unnecessary white lines where they shouldn’t be.
Unlike the iZufall project I chose to start this one completely from scratch: A blank html doc and a blank css doc. Such an endeavour would have been unthinkable in my pre-Expression days but knowing how powerful the css functionality in the software is I felt comfortable starting from scratch. Setting up all the styles was a tad tedious to start off with but once things got going it was quite pleasant. More than ever before I am now a big fan of anything CSS.
One of the neatest things I built for this site (if I may say so myself) was the nav bar on the left side. As you’ll notice when clicking around the entire nav bar is a simple list with tons of styling. It took me a while to figure out how to make the different levels work properly and how to make the current page appear selected all the time but in the end it all worked really well.
Due to lack of PHP and .NET support on the server side the site remains straight html at the moment but I designed the css code to be compatible with future database implementation so that any transition will be pain free.
I’ll post some examples of how I made the nav bar and current page selections work later on when I am in front of my own computer. For now take a trip around the site and see what you think. I’d love some feedback.
Aug 25
Expression Media Encoder Woes
To put videos in a Silverlight application you have to use Microsoft Expression Media Encoder. This program has great potential but there is one annoying little problem that drives me crazy: It’s damn near impossible to get an export to the file size you want.
The problem originates from the 22mb size limit of video files uploaded to Silverlight Streaming. As you can see on this blog my video tutorials are intentionally large to give the viewer a good view of the screen and as a result so are my files. To solve this I tried to muck around with the different settings in the right hand panel. This turned out to be a massive headache:
First off VBR (Variable Bit Rate) crashes the application every time forcing the use of CBR (Continous Bit Rate?) which causes the files to become unnecessarily large. This is not due to my system (I edit videos using Premiere on a daily basis and export them to a variety of different formats) but might have to do with the input file so I’ll leave it pending further testing.
Secondly the estimated size panel is all over the place. In the 50 or so times I’ve exported something from the program this number has never been anywhere close to the actual final size. The last video I posted had an estimated file size of 68MB while the actual export was 21.9MB. Needless to say this is just a bit confusing. Unfortunately with this estimation being off there is no way of knowing what the actual output file size will be so you are left with random experimentation.
Here is a short list of things that don’t work if you are trying to reduce the size of your file:
- Changing the video bit rate alone has little to no effect
- Changing the audio bit rate has minor effects
- Changing the video size has an effect but only as long as you don’t change the video profile size – this will override the former
- Using CBR doesn’t work, at least not for me
- Changing key frame intervals seems to have little effect
The only thing I’ve done that does make a difference is reducing the size of the final output and drastically reducing the bit rate of both audio and video. My original file was 1024 x 768 and I originally wanted to export it at 800 x 600. No matter what changes I made (reduce bit rate, increase key frame interval, reduce quality, reduce smooting, 2 pass encoding, you name it) the file insisted on being either 25MB or 46MB with very little variance between them. The file only landed at 21.9MB when I reduced the video bit rate to 400, the audio bit rate to 48 and the video size (using the Video Profile area) to 600 x 448. This was an acceptable compromise and because Silverlight video is scaleable it was satisfactory.
So, to sum up: It seems (at least for now) that the only variable that has any significant impact on final file size is the video size. This should be changed in the Video Profile area because it allows for locked aspect ratios. Pending further experimentation I therefore advise you to screw around with the size of your video before you touch any of the other variables as they seem to have little impact on the outcome.
Aug 25
Video Tutorial: Editing and Uploading the Zufall Side Buttons
Click here for a full screen version of this video.
Here (finally) is my second video in the Zufall series. It was meant to be a walk-through of the implementation process but then I ran across a small problem and decided to make a video about how I fixed it instead. Zufall part II about Expression Web is still on it’s way but this should tide you over.
In this video I demonstrate how I created the side buttons using Expression Design and how to do some quick alterations to the site in Expression Web using the fantastic CSS features. It’s quick and dirty but should give you a small glimpse of how to do things.
The reason why it’s taken so long for me to post a new video? Expression Media Encoder is damn near impossible to use! I’ll be ragging on this in a separate post once my head cools but just to give you a small taste it took 17 tries to get the video above to export to below the magic 22mb that is required for Silverlight streaming. And it wasn’t for lack of trying. But like I said, more on that later. For now I hope you get something out of my most recent video and be sure to check back for more.
