Category: Expression Web

Zufall is Live! First project using only Microsoft Expression Suite is on line

Post author By Morten Rand-Hendriksen
Post date July 30, 2007
3 Comments on Zufall is Live! First project using only Microsoft Expression Suite is on line

When I promised Microsoft I was going to use their new Expression Suite exclusively when designing my next project I wasn’t really sure what I was getting myself into. A colleague put it quite bluntly: “Are you a masochist?” I don’t think so and after finishing the Zufall project I have to say my early fears were largely unfounded.

I will blog more extensively on the experience in using Expression Design and Expression Web to create this site (which by the way is for a neat little game called Zufall which is like a Magic 8-ball for your life) and create a couple of videos of the process so you can really see how these programs work and how I use them, but for now I’ll just leave you with some basic comments.

The entire site is based on a style sheet built from scratch using Expression Web. This is quite a milestone for me. In the past I’ve shied away from the CSS and often altered existing scripts rather than startig my own. But Expression Web’s ingenious live CSS functionalities make style sheet building a breeze and the result is rock solid (I hope). I had some issues with the classic Internet Explorer vs. the rest of the browsers when it came to margins, borders and such but I found a way of working around this using divs (something that is surprisingly easy in this program).

As I’ve mentioned before there are some issues with exporting from Expression Design. The bad edges and artifacting problem is persistent and as a result all the graphics on the page are huge lumbering PNG files rather than small nimble JPGs (thus the slow load speeds). I managed to work my way around the worst of it by putting some lines behind the logo (see image) but you can still see the rough edges if you look closely. It is worth noting that upon hearing of my exporting problems Microsoft contacted me and asked for my files to see if they could reproduce them. The are currently working on fixing the exporting problems and it will be interesting to see if they are able to solve them for the next build of Expression Design.

top line Another problem I’ve mentioned before is that Expression Design lets you export ridiculous sizes that don’t actually exist. Because Design is a vector based program it doesn’t conform to standard pixel widths and that means that if you’re not careful (i.e. if you do what I did) you end up designing a page with graphics that don’t really fit. This causes some annoying problems that will anger picky people like me best illustrated by the two grabs I’ve attached here. Notice how there is a small line between the curve graphic and the rest of the page? Button line Or the line between the button and the white area? These were both caused by Design exporting graphics that were for instance 124.39 pixels wide. Of course the .39 does not compute in any rational sense when it comes to the web so lines appear. To remedy this problem one has to be very careful when laying out the designs so everything works on a pixel-by-pixel basis (or design the whole thing for Silverlight).

Take a moment and visit the site (www.izufall.com) to see how it looks on your computer and drop me a comment if you find anything you like / wonder about / hate / think doesn’t work.

More to come…

Expression Web Microsoft Expression

Expression Web – CSS Heaven (sort of anyway)

Post author By Morten Rand-Hendriksen
Post date July 16, 2007

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 Web Microsoft Expression

Expression Web – What? A Bug Already?

Post author By Morten Rand-Hendriksen
Post date June 26, 2007
2 Comments on 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 AndNowYouKnow.net and Dabbler.ca 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 blog.pinkandyellow.com 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.