Case Study: StyleWorks Premium Photoshop Styles

This past March, I decided it was time to put my skills as a Drupal developer to use and launch a new online business. I knew early on that I wanted this business to be product-based, and after several weeks of playing with different ideas, I settled on selling premium Photoshop layer styles. It was the perfect opportunity to combine my love of photography and Photoshop with my passion for web development and Drupal.

Several months of product development later, StyleWorks was born. The site runs on Drupal 6, and integrates with FastSpring for e-commerce capabilities.
Designing the site: To Zen or not to Zen?

After iterating through several hundred designs in Photoshop, I finally had the look I wanted to go with, and it was time to make it come alive in Drupal. But first, a key decision had to be made: Start from scratch, or go with Zen?

Traditionally, I've always built my designs from scratch. I'm somewhat of a optimization junkie, and I love writing really lean code (I used to be a little more extreme about this than I am today. Back when I wrote DrupalModules.com, I avoided using things like CCK, favoring instead to write my own custom modules). So when I first looked at the Zen theme several years ago, my initial impression was "ugh, look at all this extra code! Why are there so many style sheets?" *Uninstall*

Since then, Zen has grown wildly popular, becoming the #1 theme on Drupal.org. I had always attributed this popularity to Drupal's growing audience of non-developers, but after hearing some positive reviews at a recent Drupal developer meet-up, I decided to give Zen another try.

The verdict? Yes, it does have a huge number of style sheets. And yes there is a ton of code. But it actually works pretty well. The CSS is flexible and well designed, and it managed to stay cross-browser compatible even after extensive tweaking. What do I mean by flexible? Here's an example:

When I decided mid-project to change from a one-column layout to a two-column layout, I didn't need to rewrite any code, Zen took care of it. And later, when I decided to throw out my first design and give the site a completely different look, I was able to implement the changes with only a few edits to the underlying code.

Clearly, I had underestimated Zen.

Zen's flexibility, however, does come with a few tradeoffs.

If you're used to putting everything in one long CSS file, Zen's barrage of 30+ style sheets can be a little overwhelming at first. There are separate CSS files for almost everything (backgrounds, pages, tabs, forms, fields, etc). Fortunately, most of these files rarely need editing, so the actual number of style sheets you'll have open at any one time is closer to six than 30.

Zen's strict separation of CSS rules feels a little inefficient to me. I'm not sure there's a real benefit to having a DIV's background and border rules split across two different files. With so many style sheets, it can be tricky keeping track of which rules are in which file (I found Firebug to be very helpful in this regard).

The flexible column design also has some drawbacks. If you're thinking about resizing the layout, be prepared for a little grade school math. You'll have to add and subtract values in several places to keep the negative margins working. It's explained fairly well in the code comments, but it's annoying to have to keep redoing it while you're experimenting with column sizes.

Despite these quirks (some of which come down to personal preference), I'd have to say that Zen turned out to be a good choice overall, and I'd consider using it again for my next project.
Layout Decisions

Since layer styles are a highly visual product, I needed a layout that could accommodate a large number of images while still leaving room for a product description. So, I decided to go with a simple two-column layout: product images on the left, descriptive text on the right.

The only question was how to get the text and the images to display in separate columns. I looked at a number of different layout solutions, including Panels and Composite Layout, but none of them really felt appropriate.

Ideally, I just wanted to use Zen's column system. One way to do that was to use blocks, but I didn't want to create a new block for every page on the site!

That's when I found a module called Nodes in Block.

Nodes in Block lets you create special blocks that dynamically display content based on the current path. For example, you can configure the same block to show either a poll or an advertisement, depending on where the user is on the site. Controlling what shows up in the block is done through per-node visibility settings (it's very similar to setting up block visibility).

So I created a content type for product images, and another content type for product descriptions, and used Nodes in Block to get them both on the same page (images in the content main area, descriptions in the sidebar via a block). It worked, but having a product split into two different nodes was less than ideal.

Then I had the clever idea of displaying the same node in both areas. All I needed to do was check the $node->nodesinblock variable in the node template, and I could control which fields would be output to which parts of the page.

Making the node display twice was accomplished by setting the node's "Nodes in Block" visibility to its own path. source: http://drupal.org/node/882908 semoga Informasi ini bermanfaat
Tuhan Yesus memberkati