Posted 07.13.2010

Posted 07.13.2010

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.)

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

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

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.

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.

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?


Another file that helped with Flash…


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.


Feel free to download my folder structure and use it as your wish.

What other tips do you suggest?


  • Drew Huddleston

    LOVE IT! Also glad to see that people other than just me learned a few things at echo which they are proud to pass on to others. Love the “RAW” folder as well. I always called mine “Originals” but let it become a weird dumping ground. Same concept though. What I had NOT considered before is using Drop Box to house my working projet folder. That is great. I usually carry around an external Firewire drive for mine, but this would be much better.

  • Amy

    @Drew!! So good to hear from you! Thanks for the comment.—Hope things are going well in your neck of the world. grin

  • Jeffrey Mosetic

    A Shout out to Amy for this really well thought out blog. Their are many I have read but never too excited to follow, however yours Amy I will keep coming back to. Thanks for your tips on folder management, very different approach to my own but I must say I have been influenced to rethink how I store my client work from now on. Very analytical, I like!
    From Cape Town, South Africa

  • Amy

    @Jeffrey – Thanks for your comment and encouragement!

    Just out of random curiosity, have you meet some of the guys that I work with? They’re in Africa for 10 days shooting video and have been in Cape Town specifically the last few.