Expression Web Microsoft Expression

Expression Web – CSS Heaven (sort of anyway)

I’m using a style sheet (CSS) at the bottom of the Zufall site to make it easy for the owners to update once it’s done. I’ve used CSS in the past with varying degrees of luck / frustration due to the somewhat tricky cross referencing you have to do: When you have a separate CSS document you have to constantly open the document, change the code, save and then go back and reload the HTML document to see if what you did was what you wanted. For someone with limited understanding of CSS code this is quite frankly a nightmare.

Not so with Expression Web. The guys at Microsoft have struck gikd with the CSS linking between style sheet and actual document. Instead of editing the style sheet separately you can edit it directly from your HTML document through the styles panels for instant results. If you make changes they also appear in the CSS document and the program will even remind you to save changes in both documents if you close or preview what you’ve just done. This interconnectivity between document and style sheet makes the work of the designer much less tiring.

Another neat feature is the manual div positioning. Rather than having to code in where the divs appear you can set the div positioning to manual, drag your divs to wherever you want on the page and the style sheet will automatically make the changes.

As if that wasn’t enough the preview panel for the CSS code is a stroke of genious. When you are modifying your CSS code you get a preview of what you are doing in real time. There is also a small preview panel in the bottom right corner (by default) that will show you what the style does before you apply it.

My knowledge of CSS has been limited – especially because designing the code in the past was unnecessarily time consuming and quite frankly annoying. And I can honestly say that I have learned more about CSS code in the two weeks I’ve been using Expression Web than the rest of my time as a web designer (just to make this clear: I’m a designer, not a coder). If I were to pick on anything it would be that the program often seems sluggish when altering the style code (no doubt due to the cross referencing that goes on) and that if you use undo a lot you have to remember that the program keeps track of your actions per document and not per actual action unlike for instance Macromedia Flash. So if you make one change in the CSS file and one in the HTML file and then click Ctrl+Z twice you will undo whichever two steps you did in the open document and not your two last steps.

Coding in CSS as a whole still is a can of rotten worms because of the weird differences between Internet Explorer and the rest of the browsers. I’ll post some screen shots and examples of this tomorrow.

Expression Design Microsoft Expression

Color Picker Issues – Possible Explanations

After my post on the color picker issue last night I got an email from Dan at Microsoft with a possible explanation:

I have a couple of questions that might help narrow down the issue:
– Are you using the “Color eyedropper” on the color picker? This one picks the screen color. There is another “Color dropper” on the tool bar that picks the object color and is likely to give you better color fidelity in color correct environments.
– Are you using a system color profile? On Vista, under Control Panels, there is a control panel called Color Management. Could you check if you are using a custom profile other than sRGB?
The drawing surface of Expression Design uses the system color profile by default. Programs like Adobe Photoshop or Illustrator ignore the system color profile unless you specifically turn on proofing.
There is also another known bug with the Color eyedropper where it records colors by one digit (so 255, 0, 0 would be recorded as 254, 0, 0). This however, does not seem to be what you are seeing.

I was using the Color eyedropper when the error described in my earlier post occurred. But even if this dropper picks the screen colour it is still very inaccurate because the colour picked doesn’t match the screen colour either.

I am using a system color profile generated by Pantone’s Huey device.

I am not at my regular computer at the moment but I will check all of the above later on today to get to the bottom of this. Stay tuned …

Expression Design Microsoft Expression

Color Picker Issues

The color picker in Expression Design is so inaccurate it’s pretty much useless!

Now that I got your attention let me explain: I was working on the Zufall project when I discovered that the colours of several of my elements didn’t match. I found this to be very odd as I had made a sort of colour pallet to start off with and used the colour picker to match all the colours to one another. Upon closer inspection I was mortified to discover that the colour picker wasn’t matching colours at all. It was generating seemingly random shades (or in some cases hues) of the colour I was picking. I tested it with several different colours and found that there are only two colours that stay the same when “picked”: black and white. All other colours are violated in some way or other.

Testing the Problem
To figure out what was going on I created a project with a table like set of boxes: Original colours on the left, picked colours on the right. I chose all the original colours from the standard colour swatch in Expression Design, copied the box and put the copy to it’s right and picked the colour from the original box. As you can see from the graphic below (exported as a PNG to avoid the artifacting problem I’ve discussed earlier in the blog) There is a distinct difference between the original colours and the picked ones. The reds and yellows seem to get “weaker” while the blues change all together. You’ll notice that the picked version of the dark/indigo blue looks more like the original purple than it’s parent. And no, I didn’t accidentally pick the wrong colour here. This is the result you get every time.

My Theory
It seems to me that the colour picker has a tendency of leaning to the left in the colour spectrum so that reds become oranges, oranges become yellow, yellows become green, greens become blue, blues become indigos, indigos become violets, and violets become red. Why this is happening is beyond me but regardless it is a problem that must be addressed. With a dysfunctional colour picker the whole program is in big big trouble.

The Proof

Bad Colour Picker

Expression Design Microsoft Expression

Expression Design follow up – Answering questions from Microsoft

So I wake up this morning to discover that Microsoft has taken an interest in my blog (undoubtedly because I posted this blog on one of their forums). Anyway, they responded with some pointers, questions and disagreements. I realized that some of what I had said required some backing up in the form of actual screen grabs and examples so I’ve spent some time making illustrations to prove my point.

The biggest and most annoying issue I found when working with Expression Design was the poor quality of the exports. This was questioned by people from Microsoft so I’ve compiled some exports for your viewing pleasure. These images were all exported with whatever settings are listed underneath, then opened in Adobe Photoshop (where the strokes and text were added) and exported again from Photoshop using quality 12 and Standard compression. The graphic in question is the logo I’m currently working with for a web project. The logo (vector graphic) was imported as an EPS into Expression and resized to fit the frame. The bad rasterization is prevalent no matter what size the graphic is.

A series of exports side by side with no compression or re-sizing:

Export examples side-by-side

At normal resolution you can clearly see the stepped or frayed edges on all the Expression Design exports, especially pronounced along the horizontal elements in the ‘Z’ and the bottom left hand curve of the ‘u’. You’ll also notice that the green in the three top images seems slightly muddied and the white has a yellow tint to it. This is caused by the artifacts. The Adobe Photoshop exports are much better even at lower qualities.

To really show what the problem consists of I’ve blown up each of the above:

Expression Design JPG quality 8
Expression Design JPG quality 10
Expression Design JPG quality 12
Expression Design PNG
Adobe Photoshop JPG compression 10
Adobe Photoshop JPG compression 12

It’s quite obvious even to an untrained eye that the JPG compression from Expression – even at full resolution – is quite bad. Notice in particular the artifacts in the green and white areas of the quality 12 image. Likewise the edge-stepping is very pronounced making it hard to use the graphics. The difference in quality between Expression Design JPG at quality 12 and Adobe Photoshop JPG at quality 10 is also staggering, especially when it comes to artifacts around the edges and in the white. The artifact problem becomes even more pronounced when using gradients rendering the exported JPGs virtually useless.

I guess one could argue that the JPG compression is better using Photoshop because Adobe has been in the business longer and has had more time to perfect the science of compression. But that is beside the point. Microsoft intends to take over at least some of the market currently dominated by Adobe so it is vital that they get “simple” issues like this right right away.

Expression Design Microsoft Expression

Expression Design – Great vectors, annoying layers, terrible exports and more

I don’t know if my way is the right way but when I design sites I always start with the design itself. In the past I’ve used a combination of Adobe Photoshop and Macromedia (now Adobe) Fireworks to do this but Expression Design seemed to be a good combination of both so I decided to go all out Expression on this one. Here are my experiences:

Expression Design is a vector based program and is both intuitive and easy to use in this respect. For those who have fought with vectors in Illustrator (or even worse Photoshop) Expression Design’s way of handling those spline lines is vastly supperior. You have complete control over all elements of the vectors, all the regular tools and it’s easy to change colours, storkes, and gradients. One of the features I found most useful was the gradient transform panel that lets you change just about everything: Center point, gradient size, colour, angle etc etc. It also imports vectors from eps files with ease but not AI or pdf so yo uneed to convert all your stuff to make it work. I guess that makes sense.

Once the vectors have been built and you are satisfied you can apply a range of effects to them. Drop shadow, shines, blurs, fills – the standard Photoshop stuff. The effects library is not as extensive as one would hope but it has most of the stuff you need. When the effects are applied they are non-destructive and can be toggled on and off at will or piled on top of each other. Once the effects are applied the vector graphic turns into a raster graphic – but only for as long as the effect is on. you can toggle it off, change the vector and then toggle it back on again and see the effect change accordingly.

One thing I found very annoying about the effects was that they can only be applied to pre-programmed vectors. They work with standard shapes (ovals, squares, rectangles with and without rounded corners etc) but if you make a custom shape or even alter one of the standard shape vectors to say a spiral the effects panel simply disappears and you can no longer apply anything to the layer. The only way to work around this is to rasterize the vector and then apply the effect which defeats the purpose of the vector in the first place. This lack of functionality will undoubtedly cause a few headaches, especially because the set of “standard” vectors is very limited.

I was wrong on this one. My bad. Check this post for a full explanation.

I think layers have become standard in almost if not all major graphics programs so it’s no big surprise that Expression Design also incorporates layers. The layers in Design are much like those in Illustrator: Each layer is a parent to several objects or items that you can order within the layer or group into one object. But here the ends the similarities. While you can move objects around within the layer or move them to a different layer you can’t toggle their properties within the layer. For instance; the hide/show layer option is only available for the entire layer with all it’s underlying objects but not each individual object so you can’t just turn off one. You also can’t chose one object from the layers pallet – you can only chose the layer itself. To pick one object you must first chose the layer and then click the object within the actual design itself. There is also no lock/unlock all button which means there is no easy way of making all the elements editable or not – you have to click the pad lock on each layer individually.

The fact that you can’t select objects in the layer pallet also causes a lot of mistakes for people used to using Adobe products: I often delete individual objects under my layers from the pallet, but if you try to do this in Expression Design you end up deleting the entire layer with all it’s objects. The only way to delete individual objects is to select them on the stage and delete them from there.

All in all the layers need a lot more work before they reach their potential.

Once you finish your design it’s time to export. In Expression Design you can chose between a variety of different options but those people will use the most are undoubtedly XAML (the proprietory Expression language that interconnects seamlessly with Expression Blend), PNG, GIF and JPG. Seeing as I was designing a website I wanted JPG and gif files. Expression Design gives you a variety of options when exporting of which the crop marks feature really stood out. When exporting you can set crop marks and the program will only export what is within them. This makes it incredibly easy to export things like buttons because all you have to do is hide the layers you don’t want, set the crop marks and export to get just the button state you want and nothing else without messing up your design.

The problem is that even at it’s highest quality setting the JPGs look like crap. Considering they start off as smooth vector graphics the end result is downright appalling. When I exported my first JPG with a quality setting of 8 (which is what I use when exporting from Photoshop) I was stunned by the rastering on rounded corners and artifacts in the drop shadows. Even solid colours were littered with artifacts making the final export useless. I assumed this was because the 8 setting was lower quality than I was used to so I swithced to the highest resolution possible (12+) and tried again only to get a marginally better result. After many more experiments I realized that no matter what you do your exported JPGs will look terrible. The same can be said for GIF files. In the end all my exports ended up being PNG files which are acceptable although they still have ugly rounded corners. At least the PNG’s retain the original colour without adding ghastly artifacts in the process.

Exports to XAML are not surprisingly perfect but the compression of “normal” formats like JPG and GIF is so bad I can’t use the end result. It’s so bad I wonder if there is an actual programming error somewhere that’s causing it because a JPG from Photoshop exported at 3 is still better than one from Expression Design exported at 12.

You encounter idiosyncrasies and weird issues right off the bat when opening Expression Design. One example is that the standard resolution of the artboard is 96pixels/inch. Anyone working with web or television knows that the resolution of all screens is 72pixels/inch so if you build something in 96 you will end up with one of two things: Either the end result is squished down making it smaller on the screen than what was intended or the browser will perform some on-the-spot compression ruining the graphic completely. I’m assuming this is done because Blend uses 96p/i as a standard (just wild guesswork on my end – I haven’t actually checked this) but it makes absolutely no sense from a design perspective.

Even more bizarre: I often use the PrintScreen /paste trick when starting out on a new design to get the right margin proportions in my layouts. For those who don’t know what I’m talking about try for yourself: Push the PrintScrn button on your keyboard, open your favourite graphics program, open a new document and press Ctrl+v (paste). You now have a picture of your screen you can edit. If you do this in Expression Design something unexplainable happens: The pasted image is somehow crushed – smaller than the original. I don’t even understand how this is done because when you zoom in to about 133% the resolution is intact but if you scale the pasted image up by the same degree it is lost. I haven’t yet tried to paste in other graphic elements but I am assuming the same thing would happen. This glitch (it has to be a glitch, there is no way this is intentional from Microsoft unless they’ve gone batshit insane) has to be fixed immediately because it causes endless problems and quite frankly makes me not want to use their program.

I’ll upload samples and illustrations in the near future so check back often.

Expression Web Microsoft Expression

Expression Web – What? A Bug Already?

Before starting with the Zufall project I decided I’d revamp the Pink & Yellow Media Blog and move it from Blogger to our own server. Having had great success with WordPress on both and I decided to relaunch this blog using the same system. Should be easy enough seeing as I already have two other blogs running on the same server and I know how to set it up properly.

Staying true to the promise I made to switch to Microsoft Expression for all my work for a month I created a new site in Expression Web and started editing and uploading the files. For those of you familliar with WordPress installing the blogging software is very easy: All you have to do is unpack the zipped folder you get from their web site, make the necessary changes (username, data base name, password and such) to the wp-congig.php file and upload the whole package to your desired location on the web. Once uploaded a simple 3-step process is all that’s needed to take your blog live and away we go. Or at least that’s how it’s supposed to work.

Whitespace? What whitespace?

After uploading all the files to my recently created subdomain I went to my browser and entered the address for the setup files. To my surprise I was met with a generated error message on the top stating:

Warning: Cannot modify header information - headers already sent by (output started at ../wordpress/wp-config.php:1) etc etc

Now all you WordPress experts will undoubtedly scuff and say that it’s simply a white space problem and point me to the Troubleshooting FAQ. If only it were that simple. As you can tell from the error message the problem should be in line 1 which only contains the <?php tag and nothing else. If the Troubleshooting FAQ was to be believed there was some extra white space in line 1 that needed to be deleted. Not so. In fact, there was no white space in the entire file no matter what program I used to inspect it (including Expression Web, Dreamweaver and even NotePad++). I theorized that there might have been something else wrong with the files so I deleted the entire site from the server, downloaded a fresh copy of WordPress, replaced all the files in my local folder, reset the wp-config.php file and uploaded the whole package to my server again. Same result.

At this point I started suspecting that there might be something wrong with the way Expression Web was uploading the files. To test this I deleted the files from the server using the site features on the server itself and uploaded the unaltered files to the server using DreamWeaver instead. To my surprise and confusion the error message was no longer there. To make sure this wasn’t a fluke I uploaded the whole site to a sub folder using Expression Web and the error message reemerged.

The conclusion

It seems like Microsoft Expression Web does something to php files on upload. What I don’t know but in all likelyhood it has something to do with whitespace. The program has a function for eliminating white space in html files that I didn’t test but seeing as the files were clean to begin with this shuldn’t have any effect (and the function was turned off anyway). Unless there is something I’m missing there must be some form of bug sneaking around inside the program that causes this issue. The question is if it’s a one-time occurence or if this is something that happens to all php files – in which case there is something seriously wrong with the program.

Microsoft Expression

Taking Microsoft Expression Suite to Task – And Blogging About It

Last Thursday Pink & Yellow Media were lucky enough to be invited to an event in downtown Vancouver presenting the new web and design tools from Microsoft: The Microsoft Expression Suite (you can read about the event in our our technology blog Seeing as much of Pink & Yellow Media’s business comes from web design this suite is right up our aley. The question is if it’s good enough to replace the current tool set we are using, namely Macromedia Studio MX2004 and Adobe CS2. To help us decide the people at Microsoft were kind enough to hand out copies of the entire suite to the attendees to try out. And that’s exactly what we intend to do.

In the days, weeks and months to come we will take the entire suite to task to see just how powerful it is and whether it makes things easier or if it’s just a different way of doing the same things.

We recently took on a web design project for a small upstart called Zufall and we intend to design the entire site using only Microsoft Expression (maybe with the exception of some photo editing in PhotoShop) to really give it a good run and see what it can do.

Stay tuned as we start grinding…