The Perfect Workflow for Building a Site

A year and a half ago, I worked for a company called echo (formerly echo music). My job title? Site operations. I sliced and diced sites for artists and entertainers (yeah, it’s fun to name drop in conversations). I quickly learned the value of workflow, giving yourself a starting place. —not only does it remove the mundane, but if time is money, you’re saving yourself some!

If that’s not convincing enough, it makes a world of difference in a collaborative environment. It means any project I work on, whether I started it or not, I know where to look for the files. Everything is organized the same way. —Stink! Even if you’re working by yourself, it still makes a huge difference a year down the road. Everything is consistent and organized.

—All that’s to say, I thought I’d share what system has worked for me.

---

Folder Structure

I keep my template folder on Dropbox. — that way, whether I’m at the office or at home working on a freelance project, I have the most updated templates with me.

I have a folder named !!FOLDER_STRUCTURE The double exclamation points mean that the folder appears at the top of the list. Inside, I have 6 more folders. (I’ll list them in the order that I use them.)

RAW
This folder contains any media, images, or marketing pieces that a client gives me.

DOCS
I have two subfolders inside: FROMME and FROMCLIENT I keep any documentation, contracts, creative briefs, site copy, etc in here.

COMPS
This folder contains all the design comps.

I use the Google Blueprint CSS framework. So, in this folder, I keep a blank psd template that already has my guides for Blueprint set up.

My naming system is real creative (COMP_1.psd, COMP_2.psd, etc.) Any options or variations to a comp? I append an _O1 or _O2, option 1 or option 2 respectively. If I send a file to the client and they kick it back with revisions, I append an _R1 or _R2, revision 1 or revision 2.  By the end of a project, I could easily have a COMP_3_O2_R2_O1.psd. The nice thing? It’s easy to tell, at a glance, which file is the most recent.

BUILDS
Once I start the production work on a site, I keep any files that I use to build the site here. So, if I start slicing a psd, I’ll save the psd as a separate file inside this folder instead of overwriting the one in the COMP folder. Back in the day? Image maps and pngs lived here.

FLASH
This folder is getting used less and less (Thanks HTML5, CSS3, and jQuery!) This folder is similar to the builds folder, except it holds only Flash files.

PRODUCTION This folder contains the actual site code. Let me break down this folder a little more…

---

Production Folder = Site Template

CSS folder

As I mentioned earlier, I use Google Blueprint. I LOVE it. What changed the game for me was the first time I opened IE6 and didn’t have to hack any of my code to make it work. I said, “Done and done.”

My CSS folder has 4 files to start off, 3 of the 4 are from Google Blueprint

• ie.css Stylesheet for Internet Explorer
• print.css Printer style sheet
• screen.css Screen style sheet (includes a reset)
• SITE_NAME.css This is my style sheet. One of the first things I’ll do when i start a new site is rename this file to the name of the site.

  Inside the file, I already have basic formatting styles set up here. For example, all my sites have a class called .left which will float an item left. (surprised?) or a .thumb class which will add a 5 pixel margin to the right and bottom of any image. Don’t make yourself reinvent the wheel! Smarter not harder!

images folder

This folder has only one file, spacer.gif Some may argue its old school, but it’s my security blanket. I’ll pull it out every once in a while, for better or worse.

js folder

I keep all my javascript files here. By default there’s

• jQuery This seems like a given
• SITE_NAME.js like SITE_NAME.css, one of the first things I’ll do when I start a site is rename this file to match the site. This is great for storing jQuery functions that I know I’ll need to call on every page.
• swffit.js and swfobject.js I don’t load these automatically, but like to keep these files close. I’ll pull these out anytime I use Flash on a page. They definitely make your site degrade nicely.

SWF folder

Any .swfs I use on the site, I’ll keep in this folder. This folder is getting used less and less.

XML folder

Any .xml files live here. Again, this was used more when I was creating Flash navigations.  So long fair well?

crossdomain.xml

Another file that helped with Flash…

index.html

The code inside basically links everything together. When I start a site, I simply change the file name for SITE_NAME.js and SITE_NAME.css to match the name of the site.

---

---

What other tips do you suggest?