June 20, 2006
Web File Organization and Naming Conventions
At home, entropy reigns supreme. My friends will attest that a visit to Heidiland—replete with obstacles ranging from art supplies to Pisa-like stacks of books—is an adventure that would be considered overly-taxing by the neat freaks of the world. My computers, however, are another story. Given that my active Web development folder has over 14,000 files within, and that this is but one of many folders on one of three computers, I've had to take a more logical approach.
Organizing files in a methodical manner is even more important when it comes to the files that make up a Web site. On the Web server this structure must make sense not only to me, but also to end users and anyone who contributes content to the site. Below I'll walk you through the concepts I use to organize my files. You may find that another system works better for you and the needs of your site, but if you consider the following issues it may help you enhance your system as well.
Create a directory somewhere on your computer or network that will be the master directory for your site.
Try to keep all files related to the site in this directory. While Dreamweaver and other programs will let you create links to files almost anywhere on your computer or network, these stray files can cause problems when the time comes to upload the site to the Web server. I find it is also helpful to include working files such as Word and Photoshop documents here, so that I can refer back to them as necessary.
Match your file structure to your site map.
In my earlier entry, Organizing, acquiring, and creating content for your website, I wrote about creating a site map that would organize your content and navigational structure. The fictional Department of Cartooning's map showed us 6 main content areas that would be reflected in our menus. Thus when I began building this site, I started by creating folders for each of these content areas. I also created three additional folders; css, images and ssi, in which I store my cascading style sheets, photographs, and server-side includes files. Categories such as Academics and Resources that have multiple subcategories will similarly have multiple subfolders within. As I build my site I'll store my files in the appropriate folders—rather than loose in one main folder—for the following reasons.
- In the future it will be easier to find the page I must edit if I am looking in a folder containing only 10 files, than it will be if I have to sort through all 50, 100 or possibly even more files.
- I can use shorter url's that include only the filename for links between pages in the same directory.
- Filenames such as index.html can be re-used in different folders
- When editing an element common to all pages within a given category I can use Dreamweaver's find and replace tool to replace all instances of the change within the folder at once.
- The address of the page when posted to the server will reflect this structure thus offering a locational cue to users of the page.
- Directories and subdirectories allow me to use shorter filenames because some of the description is implied in the directory name.
File naming conventions: simpler is better
Descriptive filenames help you recognize what content the file contains and offer clues to users who stumble upon a page via a search. However, overly descriptive filenames create very long url's. To reduce url size without losing meaning I recommend:
- Name the main page, in any given directory, index.html. This file name is the default on most Web servers including Case's main server. Some servers use default.html; when in doubt ask your server administrator. When you use index.html as your default page, the server recognizes this to be the main page of the directory and thus does not require you to type the file name at the end of the address. Instead of linking to a page called http://www.case.edu/events/ford/lecturehome.html, I could therefore link to the shorter http://www.case.edu/events/ford/.
- Abbreviate file and directory names. This can be done without losing meaning. Instead of naming a subdirectory tools_of_the_trade just call it tools. Similarly http://www.case.edu/webdev/hactest/cartoon/resources/tools/print.html is long, yet far more manageable than http://www.case.edu/webdev/hactest/cartoon/resources/
tools_of_the_trade/techniquesofprinting.html. - Don't use blank spaces in your file names. While most browsers will substitute %20 for the space, some browsers may not recognize these. Blank spaces can also cause links sent in e-mail programs to break, thus confusing the recipient.
- Most Web servers are case sensitive, so it helps to be consistent in your usage. I tend to use all lowercase names, however it is acceptable to use uppercase when referring to an acronym such as http://www.case.edu/provost/UCITE/.
Your local directory structure should mirror the directory structure on the Web server—but not completely
When you create links between the pages on your site, the path to the links is predicated on the organization of your files and your directories. If you link to pages outside of your main directory, then these links won't work when you upload your site to the server. If you keep all of the files and directories for your site in one parent directory, you won't have this problem.
Although most of your directories and files will be the same on your local directory as they are on the server, there are some exceptions.
- The Web server has no use for that rough draft of text you stored in a word file or the .psd (Photoshop) file of your masthead image. Upload the .html pages you built, images such as .gif's or .jpg's and other files required by your pages, but leave the extra files behind. You can save space on the server by not uploading any unnecessary files.
- The Web server also relies on a few files or directories that you didn't create. Such directories may include bin, etc and usr. Leave these as they are on the server.
As you've now realized, all of these suggestions are fairly simple and easy to implement. But as your site grows from 4 to 40 or perhaps even 400 pages, you'll find that a little bit of planning in the beginning will make the site easier to use and maintain over time. If you have additional tips and suggestions regarding ways to organize files, please share them below.
Stumble It!
Posted by: Heidi Cool June 20, 2006 04:03 PM | Category: Heidi's Entries , How-to , Planning Your Website , Tips and Tricks
Trackbacks
Trackback URL for this entry is: http://blog.case.edu/webdev/mt-tb.cgi/8471Post a comment
Posted by: hac4 (Heidi Cool) June 20, 2006 04:03 PM | Comments (4) | Trackback
http://blog.case.edu/webdev/2006/06/20/web_file_organization_and_naming_conventions.html
Office of Marketing and Communications
http://www.case.edu/univrel/marcomm/
http://blog.case.edu/webdev/
216.368.4440
Comments
Been doing web development for years, and this is the same approach I've been using. It's a rather simple approach, but one certainly worth writing about. Great job.
The naming convention and web file organization is about the developer resposibility to take care of it. Anyhow this tutorial really have simple and knowledgeble for programmers and developers to have a good idea about file system. Good tutorial
nice tutorial about naming convention, as hostcento said, i agree but developer need to have the idea where project management team has to do. As we follow the same what in the article described but there will be some changes as companies are differ from each other.
Ms.Anitha Williams
Believe it or not these simple conventions in web development are often over looked from large corporations to SMBs. Thanks for the quick refresher, its great to have somewhere to go for trusted content.