Recipe 2.4. Establishing a Naming Convention for Your Files

Problem

You need to name web page files so they convey meaningful information to your visitorsas well as you and others who work on the site.

Solution

Web server file naming should follow the same guidelines discussed in Recipe 2.3: you should avoid spaces and special characters, use other punctuation sparingly, and keep them all lowercase. Unlike a web site directorywhose primary, if not only, purpose is to organize and contain site filesthe files themselves are on the site for a variety of reasons. A one-size-fits-all naming scheme won't work. The right way to name a downloadable PDF file differs from the right way to name a GIF file of the site logo because the two files have different purposes.

Despite their differences, all the files on your site should have names that:

Have a valid file extension, such as .html, .gif, or .pdf
Convey something about the source, contents, or nature of the file
Follow a logical and consistent scheme across similar files

Discussion

The various files on your site come together on pages, the Web's most basic building block. As files themselves, your HTML pages have filenaming requirements depending on where they exist in the site structure. I'll cover some of those issues first, and then address some additional guidelines to consider when naming supporting files such as images and downloads.

Index pages

As its name suggests, the index page offers an overview of the contents of the directory and provides links to the other pages in it. If a directory of files requires a main page, call it index.html. Although it's possible to modify or override the server's configuration to use an alternate filename for the main page in a directory or entire site (see Recipe 1.5), you should employ this technique sparingly. Don't set up custom directory home pages that reiterate the directory namefor example /about/about.html or /products/products.html. Deviating too often from the index.html standard will end up confusing you and your visitors.

Subpages

Each directory of pages on your site might have its own naming scheme, depending on the nature of the files it contains. For example, you might use date-oriented notation to name files in your directory of archived newsletters according to their issue date (200504.html, 200505.html, and 200506.html), while pages in your case studies section might be named according to the client they highlight (gm.html, ford.html, and honda.html). Likewise, template files that generate pages from content in a database can be structured with coded logic (or URL rewriting as described in Recipe 2.8) to convey human-readable information about their contents: issue.php?date=200506 or casestudy.php?client=honda. The goal is to use a consistent scheme for all related pages. Also, use subdirectories to avoid redundancy in filenames. Consider a directory of web pages containing information about a company's staff, locations, and history:

 /about/stafflist.html /about/staffbios.html /about/northlocation.html /about/downtownlocation.html /about/aboutfounder.html /about/historyearly.html /about/historyrecent.html /about/future.html

As Big Bird would say, some of these things are not like the others. By subdividing the /about directory, each page can have a more succinct filename that conveys its subject:

 /about/staff/list.html /about/staff/bios.html /about/locations/north.html /about/locations/downtown.html /about/history/founder.html /about/history/early.html /about/history/recent.html /about/history/future.html

In this case, the main page for the /about directory (which should, of course, be named index.html) can adequately serve as the index page for all the subdirectories.

Images and movies

File extensions (the three or four characters after the "dot" in a filename) say a lot about a file. The web server uses them to determine a file's MIME type, which when combined with a user's browser settings, determine whether the file is downloaded, opened automatically in a helper application, or viewed in place on a page.

Useful filenames for site assets that get viewed inlinesuch as images and movies are more important to the web designer than the web surfer. Adding references to a file's source, quality, and/or dimensions can make finding the right file when laying out a page a lot easier. For example, you might take the logo.eps file you get from a graphic designer and optimize it as logo_120x65.gif. The width and height notation will help you keep track of the various versions of the logo you will create. Likewise, you can add shorthand details to movie files that indicate their playback quality, such as widget_hq.mpg for the high-quality, broadband version of a product demo movie, and widget_lq.mpg for the low-quality dial-up connection version.

Downloadables

Offering files that a visitor can take away from your site temporarily joins the file-naming scheme on your site with the one on their PC's hard drive. Everyone has experiencedeither personally or vicariouslythe bewilderment of a novice web surfer trying to locate a file downloaded from a web site. Assuming they can find the file, the name you've given it should be more for their benefit than yours. Rather than using generic names like orderform.pdf or application.pdfwhich end up in an amorphous clump with other like-named files in the downloads foldergive your downloads distinctive names that indicate the site they came from. For example, the ABC Nutriceuticals company might offer a downloadable order form named ABC_orderform.pdf.