How you manage your folders and files

I am wondering what effective folder and file organisation schemes other designers and developers are using, would be interested in how you organise your client project files on your computers, so I might make some improvements to my own files structure. Currently I just have a folder called Clients where I put all the project files, each client having his own folder named after his business name. Then inside each folder I usually have another 3 folders, one is Design Comps for all psd files and images used, another is Proposals where I put all official quotes and proposals sent, and another called Content where I put all the content the client has sent to me. Sometimes I have another one called Notes into which I put all my own notes and materials I need during the dev of the project. The actual website files are stored on my local server and after the site is launched these are deleted. I then keep backups of the live site in a separate folder, so I have all the backups neatly stored in one place.

What techniques do you use?

thank you all for sharing! some good insight here.

I keep customer documentation, such as quotes, invoices, etc, in a completely separate area apart from the web stuff.

In the main root of each site I have:

  • non-web = files supplied by the customer that aren’t used directly (docs, spreadsheets, etc) and graphic files files created by me (png layout, psd, etc).

  • not used = files that I have removed from the site because they are “no longer needed” (I throw nothing away!)

  • backup = where I keep files from the server that I am about to change. These are kept in subdirectories by backup date (e.g., 20100520)

  • actual site directories:
    action = form action scripts
    form = forms
    include = headers, footers, other included scripts
    js = javascript files
    images = image files (may include additional subdirectories)
    pages = any hard-coded or dynamic page content
    m = mobile version (my mobile versions are boiled down versions of the site, with lesser functionality, but I include a link to the main site for people with smarter phones and/or bigger screens)
    styles = stylesheets

Other directories for any third-party tools I may use such as a shopping cart or “wysiwyg” editor.

If there is an admin or member directory for the site, it has a substructure that echoes the above.

In the root of the main web site I keep a directory called “archive.” When a site is finished or has gone inactive, I move the entire site structure to this archive directory. This keeps it out of the way and cleans up my directory structure for active sites. If I need to work on an old site, I pull it back into the root.

I have found that this structure works really well for me and makes it easy for me to find things and make dynamic paths and such.

Hi,

To manage files and folder it depends upon windows you have. By managing your files more effectively digital files are no different than paper files. Whether you save your files on your computer’s hard drive or a shared network location. Try to take regular back up.

Thanks

I just have folders, A, B, C etc, then sub folders for each site

/sites_a
–/a1.com
–/a2.com
/sites_b
–/b1.com
–/b2.com

The basis is the same as you use: one folder (I called it Projects, you called it Clients) and within that folder make subfolders for clients, and within those folders subfolders like PSD, etc.

However, I don’t put the proposal(s) in the clients folder, but I keep them all in one place. That way it’s easier when I make a new proposal to go through other proposals without having to look in each and every client folder.

I have a folder called Websites, inside this folder are different folders for each Website I’ve designed / developed. Inside each of these Website folders are more sub-folders, these sub-folders are usually: images, js, css, and sometimes Project Details. I keep all file names and folder names within the Websites folder in lower case except for Project Details because they are what I’ll actually upload when it’s completed. I’ll give an example below :slight_smile:

// Websites //

[INDENT]# business-one.co.uk

[INDENT]+ images

[INDENT]- business-one-logo.png

  • sponsor-one.png
  • product-1.png
  • product-2.png[/INDENT]
    + css

[INDENT]- stylesheet.css

  • ie7.css
  • accessibility.css
  • print.css[/INDENT]
    + js

[INDENT]- global.js

  • news-slider.js
  • image-gallery.js[/INDENT]
    + products

[INDENT]- product-one.html / product-one.php

  • product-two.html / product-two.php[/INDENT]
  • index.html / index.php[/INDENT][/INDENT]

I keep all invoices, contracts, policies / terms of conditions documents, client details, and so on in a different folder. For items like project proposals, design briefs, documentation and so on they’ll most likely be in the same folder as the documents or reside in the Project Details folder inside the Website folder.

I find this folder and file organisation structure to be effective to the way I work, but if anyone else has any other methods and structures that are more effective and efficient then let me know! I guess perhaps that when you’ve done a lot of Web work you could separate each Website down into more sub-folders for example: SME Business Websites, eCommerce Websites, Charitable Websites, Blogs, or whatever you want, that way you can track them down easier rather than having a huge folder of hundreds of more folders with URLs as names. :smiley: I hope that helps you out though drtanz.

Andrew Cooper

I have one main folder called “websites” where I keep information for all of my projects. Beyond that I try to keep it as simple as possible with four folders for each client:

  • paperwork - This folder contains any contracts, invoices, questionnaires, and any other, well, paperwork
  • design - This folder contains any PSD files and PDFs we sent to the client
  • source - This folder has all the source files from the client including their content outline, their pictures, and anything else they gave us to include on the site
  • website - This folder contains all the folders and files for the website itself. These files and folders are eventually uploaded to the server for production

Inside the website folder I have the typical folders you would see for a site: js, images, includes, and css along with any folders for pages.

I am very interested to hear how others manage their files. If anyone has any recommendations on how to improve mine please let me know.

Thanks.

Jonathan

I organize folders like this,

> Websites
—> Client/Company/website Name
------> www (website files)
------> docs (outlines, specs and source material)
----------> specs
----------> content
----------> (other self descriptive folder names)
------> work (time sheet, work summary documents, screen shots)
------> backups

I organize everything folders according to the client/company/website name. Under these folders, I tend to use www (where the website files are stored and organized), Docs (a folder containing work outlines, specs and client source material is stored) and work (a folder that contains documents I create regarding the work progress and time tracking).

The Docs folder is good place for me to save files a client sends me or important information regarding the specs. The work folder is a good place for me to store information quickly regarding the progress or time I’ve put into a project.

The work folder is a good place for me to save notes regarding what I’ve done and time spent. I then go back and reference these notes later on when it comes to billing and coming up with a summary of work done. I make it a point to start a new doc file for every day that I’m actively working on a project. These are notes that I make to myself and I could care less if they make sense to the client or not. I’ll get around to writing it all out in layman terms later for billing or reporting purposes later on.

I’ve recently started using Microsoft OneNote and use the client/company folder directory to store OneNote Notebook files which are specific to the client. At times I insert links on onenote pages to files stored in the docs or work folder. So my system is currently taking on some new changes at the moment.

In some cases I have a folder called backups where I store backup copies of the website files.

One more thing I do, is to make backups of all my work folders on an external hard drive.

I’ll back it up on old project files after awhile onto CD/DVD and then delete them off from my hard drive. After 4-5 years these CD’s become great Christmas Ornaments or part of microwave nuking experiments.

–>library
---->stylesheets
------>xslt
------>css
---->javascript
------>3rdParty
-------->jQuery
-------->swfobject
---->data
------>xml
---->images
------>sitefurniture
---->templates

I’d keep all aspx files or php files in root, includes or masterpages in ‘templates’.

This is the most common and accepted folder structure for most of the digital agencies in london, for some of the largest sites in the world.

keep it organised! :wink:

I do things differently so I’ll give my version in case you think it’s more to your tastes!

I would go with a subdomain called “clients” (so clients.yourname.com), this could have a login / control panel or simply redirect back the main website (if no path is specified), IMO it helps break it apart from the public section of your website. As for the structure beyond the subdomain, I would go with the website URL as the path (like clients.yourname.com/mysite.org/) and then within that have the index file for the website design (for it to direct to by default) - with all the business documents sitting in the same base directory - for ease of memory. As for the website, I would have the subfolder structure of style / scripts / images / media / feeds. :slight_smile:

This is my system for small projects:

  • Projects/
    [LIST]
  • ClientSite.com
    [LIST]
  • docs (specs, presentations etc.) - never public
  • psd
  • index.php, about.php etc.
  • _assets
    [LIST]
  • styles
    [LIST]
  • img (decorative images, called from css)
    [/LIST]
  • scripts
  • images (content images)
    [/LIST]

    [/LIST]

    [/LIST]

Quotes, other communications, backups and sometimes “before” screenshots are stored in another place :slight_smile:

I recommend reading these:
http://www.warmforestflash.com/blog/2009/10/folder-structure-and-project-organization-best-practices/
http://stackoverflow.com/questions/591328/what-are-your-tips-for-best-practice-for-web-application-structure

I separate it into two sections. One for web and one for clients. Pardon the regular expressions, it’s the best way I can think of describing it.

/([1-3]{1})([0-9]{2})([0-9]{3}) - (.+)/
$1 = Actual client==1, Potential Client/proposal==2, Personal Project == 3
$2 = Year (last two digits)
$3 = 3 digit client number. 001, 002 etc.
$1$2$3 = Start of invoice number.
$4 = Human representation of company name.

So with that out of the way, an example is:
/109034 - Vienna/
/109034 - Vienna/Invoices/
/109034 - Vienna/Statements/ (if applicable; I only do statements on request of if a client isn’t paying up)
/109034 - Vienna/ (if applicable)
/109034 - Vienna/Projects/ (if applicable)
/109034 - Vienna/Projects/091 - Project/ ([year][project_number])
/109034 - Vienna/Projects/091 - Project/Print
/109034 - Vienna/Projects/091 - Project/Print/Assets
/109034 - Vienna/Projects/091 - Project/Print/Client Content
/109034 - Vienna/Projects/091 - Project/Print/[depends] (brochure|Identity) [0-9]{2} (version number)
/109034 - Vienna/Projects/091 - Project/Web
/109034 - Vienna/Projects/091 - Project/Web/Assets
/109034 - Vienna/Projects/091 - Project/Web/Client Content
/109034 - Vienna/Projects/091 - Project/Web/org.vienna (sym link to web dir)
/109034 - Vienna/Projects/091 - Project/Shared/Assets
/109034 - Vienna/Projects/091 - Project/Shared/Client Content
/109034 - Vienna/org.vienna/ (Symbolic link to web directory /org/vienna/)

My web directory is a bit more straight forward.

/tld/domain/subdomain

So:
/org/vienna/www
/com/google/www
/ca/canada/beta

I use PHP the most, so my structure is like this:

docs/ (psd, txt, descriptions)
class/ (php class files)
template/ (html template files)

www/ (for all public php files)
www/css
www/js
www/img

And all links to the site i use mod_rewrite for apache, so my links can for example be like this:

example.com/news-article-with-some-stuff.html

Which would be directed to /article.php etc.

I use the following structure for storing client files. The names are very general and different projects will deviate from this depending on their needs.

/clients
–/client_name_(company_name)
----/website.com OR /prject_name
------/backups
--------/live-server
--------/dev-server
------/documents
--------/documentation
--------/planning
--------/testing
------/files
--------/code
--------/design
--------/software
------/versions
--------/1.0.0

I keep regular backups of both my development server and the clients live site. When working on the project I will define a set of goals. Each goal will be a minor version, so on completion of that goal I will compress and copy the site from my dev-server to the versions folder for my client.

This work well for smaller projects, however depending on the project I may deviate from this.

Best Regards, George

I primarily make sites for my employer. I try to minimize sub-folders so I don’t have to click around much.

I have a folder for each site that begins with the same word, then the project name
SITE - domainname
so they all end up in the same place on my section of the server.

Most of these sites are WordPress sites. I have learned by trial-and-error (read, disordered project folders) to mimic the WP folder structure. I have a full copy of WP in each SITE folder, and file the actual site images, files, theme files, etc. in their correct folders there. This helps me with uploading correctly.

Most sites have documents in pdf form, so I have a PDF folder, sub-divided into press releases and email updates.

Along with some of the above (css, etc.) I also have folders for draft file elements (royalty free original photos, trial graphics, etc) and one for “site notes”. Because this is a company, I am trying to leave comprehensive notes behind so someone else can step into this role and get up to speed easily. I don’t keep up with this as much as I could.

I also have sub-folders in each SITE folder for Backups (backups filed in more sub-folders by date) and for SEO and statistics, and one for Site Content, as I don’t write it and I often get updates.

What I haven’t conquered yet are duplicate elements used in several sites… when one gets changed, things get confusing. And sometimes the push to get something done by deadline means I shortcircuit some or all of the above and I regret it later…

I keep my clients web files and business files separate.

My client business files are arranged like this:

-Contacts
–Customers
—CustomerName
----Projects
-----Website
------Phase1
-------(Creative brief, notes)
------Phase2
-------(Site map, wireframes)
------Phase3
-------(PSD’s, design files)
-----Email Newsletters
-----SEO
-----Etc…
----Proposals
----Agreements
–Partners
–Prospects

My clients web files are separate because I have a local server.

-Websites
–customer’s domain name
—about
—services
—contact
—images
—scripts
—css
—etc.

Hope this helps.

hi Everyone,

I mange my folder with proper flow of work means project wise with date.
Project Name –> DATE –>> task.
I manage like this…

Thanks
Eddie wilson

I don’t know how many times this subject has come up, I’ve lost count. Listen to me now.

Real-estate is about location, location, location.

Organizing a nice folder structure is about numbers, numbers, numbers. Put a number on everything, and when you can’t get any further then you put a date on it—everything, all the time. Numbers make an easily sortable structure.

Root (Clients)
1001 MyFirstOne (Client)
---- 01 myfirstonessite.com (Project)
------ 01 Documents
-------- 01 Estimations
----------20090429-something.pdf
------ 02 Graphics
------ 03 Whatever comes along

You simply cannot standardize how you handle project and that’s why I don’t have a folder structure to copy/paste for every client or project. If the first folder I need is for documents, it will be “01 Documents”. If something else comes first, I create “01 Something else”.

The result is an organized folder structure that is easy to sort and browse through, and adapted for every project individually. No unnecessary folders. It takes a split second to see if another folder is needed for maintaining structure, and another couple of seconds to create it.

I don’t have to think—I do. Remember—numbers, numbers, numbers.

Cool thread :tup:

I spend 99% of my time developing websites designed by others so I don’t manage a lot of my own Illustrator or PSD’s in my working files; only the final signed off layered PSD’s and a few mockup JPG’s but I keep them all. I have three repositories.

  • A local directory structure of working files that contains a folder for each client which then either contains a group of directories representing a project PSD’s, Copy, Notes, etc… or if it’s an ongoing client I have yearly folders which contain monthly folders that I can reference later.
  • On our in-house dev web server I have directories for each project that represents a website. Inside are includes, images, css, etc…
  • On a shared server I have a similar setup to what Alex has. Subdomain.myhostingname.com with separate control panels for each project. It makes it really clean for managing a number of projects concurrently.