How I organise my site files and folders

As a web developer I deal with a lot of files. These are all different and are relevant to different parts and stages of the process. From initial stages of the project when doing research, site architecture, designs, up to the completed site, and then the continual backups. If you are in the same position as me you’ll be able to relate with the amount of files one may have to deal with.

As I work primarily with the website files, here I am going outline how I organise my files and folders to deal with the vast amount of files I work with, I always use the pdf to word.As you may already have noticed, the image above is a folder structure of a past project. All sites are stored within my Sites folder, which is also the web root to my MAMP install. Within this folder I have all the sites past, present and some upcoming jobs, and also a boilerplate folder.

My sites folder looks something like this:

• Site A
• Site B
• Site C
• ZZ

Each site has it’s own folder, and the boilerplate folder is ZZ. I name it this as Z is the last letter in the alphabet. This ensure’s it appears last in the folder listing as I have my listings by name.

Within the boilerplate folder ZZ I have:

• cms
• css
• images
• index.html
• js
• PIE
• robots.txt
• ZZ
  • Backups
    • Live
    • Local
  • Documents
  • Fonts
  • Images
  • Misc
  • Quote
  • Research
    • Images
  • Site
  • Sitemap
    • Visuals

Breakdown of Structure

At the start of each project I duplicate the ZZ folder in the Site’s folder and rename it to the name of the site I am building.

The Root

This folder if accessed using localhost will contain a working copy of the clients site in flat HTML format. The entire site is built unless it’s content managed. I build all the required HTML templates needed.

cms: As nearly all sites we build are content managed, I run a local copy of the site in it’s cms from within this folder.

images, css, js, PIE: these are all relevant to the flat HTML files. The images folder contains the images for the templates. CSS contains the stylesheets for the website. JS contain the javascript files if any is used, and PIE contains the latest copy of CSS3PIE.

The ZZ Folder

I am passed a set of visuals from the designer which I stick within the Visuals folder.

If any web fonts have been used, I stick these within the Font’s folder. If the font’s are not from Google or another online service I generate a font-face kit and also put this within the Fonts folder.

Along with a set of visuals, I also get a copy of the agreed sitemap and put this in the Sitemap folder. I find it much easier to work with a sitemap and a set of visuals, rather than scrolling up and down through a set of visuals.

The Documents folder will contain only relevant content/ documents needed for the site build. Sometimes I get given the entire site laid out in visuals, and other times I get just the different templates with the site content in a document.

The Images folder is for images as you can tell, this folder can get pretty big with some sites as this folder contains all original images for the site. Any images the client passes over or any images we purchase for them is kept here.

Misc: this, as the title says, is for any Miscellaneous items that do not fit into any of the other folders.

Quote: Sometimes I get a copy of the quote for reference and this is put here. This folder is also used in the future to store quotes for any additional work that needs quoting for.

Research: If I have done the research document it will live here, and the images folder within will contain images related to the research, like screenshots