Tutorials from WAC. Click or press ALT+T to return to the Tutorials main page.

Accessible Design: Best Practices

Return to Tutorial Contents


divider

 

Organizing and Naming Your Site

Site Structure || Organizing Files and Folders ||
Default and Index Pages
|| Naming Conventions

Site Structure

Web sites consist of a collection of files. These files may or may not be organized within a directory structure of folders. The location of files in the web site corresponds with the URL.

WAC Best Practice logo It is a good idea to organize your site files into folders, but you should avoid making too many "levels" in your site, as each level adds a slash (/) to the URL needed to access that file.

 

Consider this Sample site:

view of the site files in the sample site

Within the site, there are two files (web pages): tutorial1.htm and tutorial2.htm. Let's say that this web site is stored on a server located at http://www.sample.edu. In order to reach the tutorial1 page, we would have to go to:

http://www.sample.edu/resources/presentations/sectionone/tutorial1.htm.

Yet, if we wanted to visit the tutorial2.htm page, we would only need to go to:

http://www.sample.edu/tutorials/tutorial2.htm.

Each folder within a site is represented by the folder name and a slash (/) in the URL of the corresponding web address. And each folder within a folder represents a "level"
(e.g. www.sample.edu/level1/level2/level3/filename.htm)

The address to the tutorial1 page is also called a "deep link" because it directs the visitor several levels into the web site. Deep links can be useful for pages you don't intend visitor's to arrive at directly (when you want to control the order in which visitor's view pages). However, because they result in long URLs that are difficult to remember, they should be used sparingly for information that will be regularly accessed or for high-traffic pages. Shorter URLs are easier to advertise (better for you) and easier to remember (better for your users).

return to top

Organizing Files and Folders.

While it is not a good idea to have too many levels (embedded folders) within your site, it is also not a good idea, unless you have a very simple site, to have no folders.

Here is an example of a site with no organizing structure:

view of site files of web site with few pages and graphics

Because the site is small, it is not difficult to distinguish between the pages (.htm) and the images (.gif). But sites can grow quickly:

Larger site with all files in level one

The image on the left is only a partial view of a site that has all its files in a single folder. Can you see how difficult it might be to manage a site like this? Which page leads to which other pages? What documents are linked to what html files? What images belong on what pages?

Consider, instead, this organized site:

Web site with files organized into understandable sections.
Note that all the training-related pages are in the "training" folder and only five pages reside in the top-level of the site: default, links, mission, stafflist, and suggestions.

WAC Best Practices logoIn the organized site, images are located in one central folder, and all html pages are organized using a directory structure that is easy to understand.

return to top

Default and Index Pages

WAC Best Practices logo Each folder within your site should have a default or index page within it. If a folder contains a default or index page, when a user types the URL using the folder name, this page will be displayed. Without a default or index page, users must specify the exact file name they want to visit.

For example, let's consider again the sample site from "Site Structure" above. There is no default or index page in the "sectionone" folder. This URL will work:

http://www.sample.edu/resources/presentations/sectionone/tutorial1.htm.

This URL will not:

http://www.sample.edu/resources/presentations/sectionone

Depending on the server settings, the user who types the second URL will see a "File Not Found" message or a plain-text display of an alphabetical list of all the files, including image files, in that folder -- without indication of which page the user should look at first. However, if we copy and rename tutorial1.htm to default.htm or index.htm, both URLs will work.

Thus, it is good design practice to name one file in each folder within the site either default or index. Note: if you have a folder with both a default and an index page, which page gets displayed depends on your server settings. However, most servers choose the default display page by alphabetical order.

return to top

Naming Conventions

For best results across various servers and with different browsers, when naming files and folders within your web site:

  • Use only lower-case characters.
  • Do not use spaces: the underscore (_) or dash (-) can be used instead.
  • Do not use special characters such as punctuation marks, dollar signs, or other characters like: @, #, ^, *, [, (
  • Shorter names are better -- remember it will be included in the URL of the page (e.g., webtutorialone.htm v tutorial1.htm). However . . .
  • Avoid cryptic or non-descript names (e.g., t1s5c7.htm v tutorial1sec5chp7.htm)-- users will not be able to remember them and they can be confusing when managing the site.

return to top

 

Go to next tutorial page.
Next

divider

Organizing and Naming Your Site | Layout | Header Information | Navigation | Color | Style Sheets | Lists | Images and Multimedia | Image Maps | Tables | Forms | Frames | Scripts | Timed Response |

| Key to Guidelines | Validating Your Site |

| Start of Tutorial |

| View the entire tutorial in HTML format. |
| Download/print the tutorial in MS Word document format. |