A clean and consistent directory structure can greatly improve the usability of a web site. It allows for simple, more easily remembered and displayed URL's. In addition, the clear organization can speed up development and training times.
However, making such a drastic change to an already existing web site is a daunting and dangerous task. Even the most careful and well planned moving of files can lead to broken links, and user dead-ends. But there are a few simple ways to make the task easier and more transparent to the end user.
- A solid 404 page. 404 is the error code for Page Not Found. Dead-ends happen, there is really no avoiding them, but by having a well written and helpful error page, we can help users easily get back on track. A helpful 404 page would include links back to the home page and other "Index" type pages such as a site map or contents page, a site search, and finally a contact form to report the error. Also, a brief explanation and apology can often circumvent a users frustration. Odds are it was our fault anyway, and even if it wasn't, lets accept the blame and move on, helping the user get back on track.
- Move as you go. We are continuously adding and updating department web pages. As we do so, we can move them into the new directory structure and update existing links. Once this is done, we can then remove the old files and folders. If outside links or user bookmarks exist, users will encounter our helpful 404 page mentioned above. The alternative is to perform a clean sweep moving all files and folders in the background then in one swoop replace the old with the new. The problem with this method is it breaks too many things (many outside of our control) all at once. By moving as you go, you only break small, much more manageable pieces, that can be discovered and fixed more quickly and easily.
Each directory on the "top" level is really a virtual directory pointing to a folder of the same name that lives in public_html. This eliminates the need for multiple ftp roots and complicated permissions because all will be inherited from the common root (/internet).
- images (all global images)
- scripts (global scripts)
- styles (global styles)
- about (information about the college)
- admissions (prospective students and registration information)
- business (center for business and industry, and other business related resources)
- continuing-education (community ed and other non-credit continuing education resources)
- prepare (pre-college and other preparatory resources)
- programs (areas of study)
- resources (for students)
- aspcc (student-government? student-gov?)
- bookstore (alias: /bookstore and/or bookstore.pcc.edu)
- library (alias: /library and/or library.pcc.edu)
- tutoring (tutoring services, including student success center)
- women (women's resource centers)
- _source (archived resource files)
- images (folder specific images)
- documents (.pdf, .doc)
- style.css (folder specific style sheet, only if necessary)
- index.html (.html)
One of the main goal of the website is to have the displayed information accessible to all of our staff, students and instructors. Linking to documents that require proprietary software is discouraged. This includes Microsoft Word, Powerpoint and Excel documents. The problem is that we can not expect, or require that our visitors are going to own the software required to access these documents. Important information should be displayed using properly formatted HTML, however a few exception cases include:
- Information that is not easily displayed using HTML.
- Consider using a document type that widely accessible and free to view such as PDF (for forms) or Flash (for multimedia).
File and Folder Naming Guidelines
- Use all lowercase letters. It's easier to remember url's when case is not an issue.
- Do NOT use spaces in file or folder names. If you need to separate two words use a hyphen '-', not an underscore, underscores disappear in underlined text.
- Avoid the use of strange (non-alphanumeric) characters. Hyphen only when necessary. Underscore preceding _source folder is an exception.
- Use descriptive folder and file names. The ideal name will be long enough to be clear in it's meaning but short enough to be flexible. Avoid the over-use of abbreviations and remember that what might make perfect sense to you, an insider, may be complete gibberish to an end-user.
index.htmlfor directory index pages, not index.htm or default.htm.
- The following file extensions should be used with respect to file type.
- HTML Document -
- Style Sheet -
- Cold Fusion -
- HTML Document -
Images, Documents and Resource Files
- Images should be placed in an images folder at the deepest common level. For example… if
/about/history/presidents.htmlboth contain profile.jpg then profile.jpg should reside in
/about/images/. In the case of a department site, all images specific to that site should be placed in an images folder at the department root.
- Documents such as PDF's and word doc's should be placed in the deepest common folder (see images above). In the case of many documents where extra organization is needed a documents folder may be created to add a level of separation between the HTML pages.
- There may be a need to archive the resource files used to create a document (such as the PSD's used to create a set of images). These files should be stored in a folder called _source located at the most appropriate common level. Note: resource files are often very large compared to the types of files that users typically download from the web. These files should not be linked to, they are only meant to act as resource archive for future development.