I’ve been working with Expression Web for about 6 months now and I’ve found that above all other things, what sets this program apart from the competition is it’s handling of CSS. More specifically how easy it is to not only write CSS from scratch but also to modify existing code for fantastic results. Case in point: The new look of this blog. If you’ve visited before you’ll notice that I recently upgraded it from the dull look of a standard WordPress blog to something altogether different. And what will (hopefully) surprise you is that once the design was conceived (which took some time) the actual coding only took a couple of hours! All this thanks to Expression Web and how it handles CSS code.

People often ask me how to make their WordPress blog look great. In the past I’ve always told them that it’s a lengthy process and you really need to know a lot of code to get to where you want to be. That’s just not the case any more. I am willing to go as far as saying that with some basic training and a rudimentary understanding of html, anyone can make significant and functional changes to their blog using Expression Web without ever knowing what CSS is and how it works (this technique will work on any blog or other website that uses CSS btw.)Rather than just blabbering on and on about how great this program is for designing and re-designing blogs (and no, I’m not on the Microsoft payroll even though I’d like to be - hint hint people!) I’m going to show you just how easy it is to make changes to your blog by tweaking the CSS code with Expression Web.

DISCLAIMER: Although altering CSS code in Expression Web is very easy, it doesn’t mean that the end result will be very attractive. For that you need an eye for design. So even though you follow my instructions to the letter, there is no guarantee that your blog will look any better. I’m just giving you the tools: It’s your job to bring the creativity. Not everyone is a designer. Harsh, but true.

Step 1: Set up a blog with editable CSS

There are two main ways to set up a blog: You can get one for free at WordPress.com, Blogger.com or any number of other places. Just make sure you are free to edit the CSS through the service. I know Blogger.com allows you to do this, I’m not sure about the others. Or you can host one yourself. As far as I know, the most popular blogging software out there is WordPress, but there are others that work just as well. The good thing about WordPress is that it’s 100% free, constantly improved and that there are thousands of great plug-ins and other goodies to make it more interesting. The advantage of hosting a blog yourself is that you have complete control over the content and that you have your own domain name rather than something like myblog.wordpress.org.

Step 2: Design your blog visually

This is by far the most important and time consuming step. The only way to make your blog stand out visually is to make it look good. And the only way to make it look good is by having a great design concept. I can’t tell you how to do this; it’s like painting a picture or writing a poem - creative work defies explanation. What I usually do is I write down some words that describe what I want to convey in terms of emotion, “feel” and so on. Once I have a general idea I play around with colour combinations in Kuler and find something that fits. Then I look for inspiration and start sketching things out on paper. Finally I consolidate all my ideas into an actual image of what the final product should look like in a program like Expression Design. For this blog I used Adobe Illustrator, Adobe Photoshop and Expression Design to create the final graphical representation of the blog. If you want anything more than just simple boxes and colours, this step is vital.

Step 3: Find a theme that fits your vision

Blogs work on two planes: PHP on one side and CSS on the other. The PHP portion for the most part decides what content is displayed and the CSS side decides how this content is displayed. But the PHP portion also has an impact on how the content is displayed because it decides where different elements appear like if the sidebar should be on the left or the right, whether the menu is vertical or horizontal etc. If you intend to build your new blog from scratch and you don’t know PHP well, this can be a grueling process. Fortunately much of the work has already been done for you by others. (I have to tread lightly here because what I’m about to say might sound like blatant plagiarism.)

Rather than building your theme from scratch, try to find one that has the basic components you are looking for already laid out. In most cases one of the standard themes have everything you need and if not you are almost certain to find one that does. So rather than reinventing the wheel, you should build on the experience of others and focus on making things better. Just be warned: This is touchy territory. If you blatantly rip off someone else’s theme without giving them credit, you are in for a world of hurt. The line between borrowing and stealing code is very thin and you can easily step over without even knowing it. So to be safe it’s always a good idea to credit the creator of whatever basic theme you decide to build on.

Step 4: Understand the inner workings of your theme

Every theme is different. And if you want to reshape a theme to your vision you need to understand how it works first. In the past this process was a total nightmare, but with Expression Web it is incredibly simple:

1. First off, if you haven’t already done so, set your blog up as a Site in Expression Web so you have access to all the files.
2. Open your blog in your favourite web browser and display the source code. In FireFox you click Ctrl+U and a new code window opens.
3. Copy the entire code and paste it in the code view of a new html file in Expression Web. Save the file in the root of your site as something. I like the name testBed.html but you can call it whatever you want.
4. Find the CSS call in the html code and redirect it to the local file you will be altering. I usually set up a new theme folder with all the old theme files in them so that I can always revert back to the original CSS file if I mess things up really bad. It’s good insurance.

Now you have complete access to your theme and it’s CSS and you are ready to understand exactly how it works. While in Design view you can now click on any element and see the complete list of divs and other elements that make this specific part of the blog look the way it does. You will also see all divs and other elements displayed as superimposed boxes showing how the content flows. That way you will immediately get a solid understanding not only of how the theme works but what you need to change to make it look the way you want.

Step 5: Start choppin’!

If you’ve decided to make a graphic-heavy blog, you need to “chop” your design into manageable pieces. To be more precise, you need to cut out all the elements you want to feature in your blog in such a way that they’ll fit inside the divs, tables or whatever other element you wish to display them on. Expression Design and it’s Crop Marks feature is excellent for this purpose. You can see how this is done in this video demo I posted last year. How exactly you chop your design is up to you - it all depends on the desired end result. I’ll post some examples in a separate article later.

Step 6: Re-styling the Style Sheet

This is the fun part: Once you have your testbed set up and connected to a local CSS file, you can start messing around. There are several ways of doing this depending on what you want to achieve. If for instance you want to alter the width of your main content area, all you have to do is click on any object within that area, then find the div that controls the area you want to change in your top bar and finally resize it by moving the sides using your mouse. It couldn’t be easier.

If you don’t like the brute force approach you can fine tune the code using the Modify Style feature: First off, click on the element you want to change. The style that controls this element will automatically be highlighted in the Manage Styles tab. Right click on the style, select “Modify Style” and a window will pop up with all the different options for modifying the style. Now you have complete access to the style and you can change it in any way you want for immediate results.

Step 7: Watch your changes in real time

A great thing about this method is that as you change the CSS code, you can see the changes in real-time right inside Expression Web using the Design view. Any change made will immediately be visible and as a result you see right away if something isn’t exactly working out the way you planned. It also means that if you do things that are not allowed in CSS, you’ll see that it doesn’t work and you can find out what went wrong. If you want to you can also make changes directly in the style sheet and see the changes in real-time. As a result, your style coding process becomes much easier and more effective.

Step 8: Save your changes

When you work with style sheets in Expression Web, you are actually working in two documents simultaneously: When you make that initial change in the stylesheet link (step 4) you are actually opening the .css file for editing. And when you save your testbed, the program will ask you if you want to save the changes to the embedded file as well (that would be the style sheet).

That way you avoid forgetting to save your latest CSS alterations and the process is that much simpler.

Step 8: Upload, test and publish

Now all you have to do is upload the new CSS file and any related graphics, make whatever changes you want to the php code and your blog will have a new look.

Observations, tips and pitfalls

There are a couple of things you need to know about styling blogs. First off, all blogging software is different so the php code will vary greatly. If you are planning on making massive structural changes in the blog, you might want to take a very close look at the documentation. Secondly, blogs often work with separate pages. In WordPress you have three sets of views: the “index” view, the “Pages” view and the “single post” view. To fully restyle your blog you need to make changes to all these views. The easiest way to do this is to open each view in your browser, copy the source code into your testbed document and make changes on a view-by-view basis. That way you have all bases covered. Third, make backups! It’s easy to mess things up really bad if you are just experimenting, so when you have something you like, make a backup. That way you can always go back and fix whatever you broke. Fourth, Ctrl+Z only works in the document you are currently in. So if you make a CSS change in your testbed document and then hit Ctrl+Z or click “Undo”, the undo will only affect the testbed document and not the CSS document. To undo your latest blunder in the CSS document you have to have that one open. It’s easy to forget and can lead to some real hassles later on. Fifth, WordPress templates are full of errors to begin with. These normally consist of unclosed or excessive divs and will normally show up in Expression Web as yellow highlights. Take the time to fix these in the PHP code or you could get some really bizarre results in browsers you didn’t test. Finally, test in as many browsers as possible. CSS is notoriously complicated because all browsers handle it differently. But if you do things properly your blog will look the same in all environments. Unfortunately the only way of making sure is to test it in all browsers, even ones you don’t really use.

So there you have it. That is the rough outline of how I restyled this blog to make it look the way it does now. The same technique was used to restyle the Vancouver blog Dabbler.ca and several other blogs I’m currently working on. It’s fast, effective and functional. I am guessing that the Expression Web team is going to touch on the same techniques in their presentation at MIX08 later this week (but I could be wrong - there are probably better ways of doing this) and I am definitely going to be there to pick up some more tips and tricks.

I’ll be posting some code examples to give you an idea of exactly how this blog works later on. For now, design, experiment and have fun.

In December Beal asked a question in response to my piece on the Natures Carpet site:

How did you make the current page appear selected? I used the include function (leftover from Frontpage) because I didn’t want to make a separate nav for each page. I’d like to have the current page selected in the nav, but I didn’t know how to do it with include.

Sorry for taking so insanely long to answer (I’ve been busy redesigning Dabbler.ca) but here it is:

#nav p a {
color: #A59B8B;
letter-spacing: 0.15em;
padding-right: 8px;
border-right: 10px;
border-right-style: solid;
border-right-color: #ffffff;
text-decoration: none;
}
 
#nav p a:hover {
color: #A59B8B;
text-decoration:none;
padding-right: 8px;
border-right: 10px;
border-right-color: #d1cac2;
border-right-style:solid;
}

I used two pieces of code to make the current page appear selected in the menu on the NaturesCarpet.com site. I have no idea what this technique is called but it’s pretty self explanatory:

The regular unselected menu items (main items - the child items are slightly different) look like this in the CSS code:To make the current page appear selected I had to make the non-active current page link look like the a:hover stage. To do that I first assigned a name to each page like this:

<body id=”howto”>

Then I gave each of the buttons an id:

<div id=”nav”>
<p>
<a href=”benefits.htm” id=”benefitsnav”>BENEFITS</a><br />
<a href=”products.htm” id=”productsnav”>PRODUCTS</a><br /                     <a href=”how.htm” id=”howtonav”>HOW WE MAKE IT</a><br />
<a href=”retailers.htm” id=”retailersnav”>RETAILERS</a><br />
<a href=”faq.htm” id=”faqnav”>FAQ</a><br />
<a href=”about.htm” id=”aboutnav”>ABOUT US</a><br />
<a href=”contact.htm” id=”contactnav”>CONTACT</a><br />
<a href=”links.htm” id=”linksnav”>LINKS</a></p>
</div>

and finally I set up a specific style in the CSS for the current page set:

body#howto a#howtonav {
color: #A59B8B;
text-decoration:none;
padding-right: 8px;
border-right: 10px;
border-right-color: #d1cac2;
border-right-style:solid;
}

What happens here is the buttons are styled based on the body id so that when you are in the howto page, the howtonav style kicks in and overrides the standard p style.

I’m sure there are other (and possibly better) ways of doing this but for my purposes it worked perfectly. It also gives you the ability to individually style each current page link if you so desire.

To see the code in action, visit NaturesCarpet.com

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.

NaturesCarpet.com

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.

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.

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? 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…

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.

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.