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.
One reply on “NaturesCarpet.com – 2nd Expression project live to the world”
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.