AbleDesign - Web Design that Can!

Web Design Tutorials - Beginning Design Considerations

File Organization

Before you begin your project, a few minutes of planning can save you hours or digging around and reorganizing down the road. You can choose your own conventions as you begin to see the relevant considerations. Here are a few common methods that will serve you well.

Directory Structure

Once you begin setting up a web site, it is only natural that you will want to upload it to a server where it can be viewed on the web by other people. As your site grows, it can become very messy if you place all your pages and images in a single directory. (Some free web hosts will not allow you to easily create subdirectories, in which case you should probably move on.) A good method to vastly cut down on the home directory clutter is to create a subdirectory especially for images. Thus, you would have the following folders, as seen from the web browser:

http://www.domainname.com/
http://www.domainname.com/images/

If you have a large number of related images, such as an image gallery, you might want to clean things up further by adding another subdirectory:

http://www.domainname.com/images/gallery/

If you have distinct areas of the site, you can make those separate subdirectories. For example, AbleDesign has subdirectories for Services, Portfolio, Pricing, Contact, About, and Tutorials. These take the following format:

http://AbleDesign.com/services/
http://AbleDesign.com/portfolio/
http://AbleDesign.com/pricing/
http://AbleDesign.com/contact/
http://AbleDesign.com/about/
http://AbleDesign.com/tutorials/

An added benefit to this approach, as you may have noticed throughout the site, is that each subdirectory can contain its own index page. This means that by going to one of the URLs above, you are actually viewing the index page for that subdirectory. It gives a much cleaner appearance and is easier for visitors to remember.

Someone will undoubtedly ask how this approach effects links throughout the site, including calling images. Many people make use of relative URLs (which I don't advise), with the following format:

/file.html	Look for file.html at root level, regardless of what directory it is being called from ¹
./file.html	Look for file.html in the current directory
../file.html	Look for file.html one level above the current directory
../../file.html	Look for file.html two levels above the current directory
/subdirectory/file.html	Look for file.html in folder "subdirectory," one level down from root level

¹ Root level refers to the directory that is viewed when someone goes to your home page (http://www.domain.com/ for example).

You should be able to see the pattern developing. When you are using relative URLs across multiple subdirectories, it becomes easy to use the wrong relative path. This is one good reason to always use absolute URLs. An absolute URL would look like:

http://www.domain.com/sudirectory/file.html

no matter where it is being called from. No need to worry about moving things around and goofing the relative path. Other compelling reasons to use absolute URLs include:

Some browsers do not correctly interpret relative URLs in certain situations.
If you use relative URLs and someone enters your domain with and without the "www," the browser will consider it two separate sites. As such, images will not be cached. Image caching refers to the browser recognizing that it already has the image in memory, thus you do not have to wait as long for it to download again. Image caching can save a large amount of time.

If you instead use absolute URLs, you can choose to refer to your site either with "www" or without out it (make sure to be consistent, one or the other), and after the first page view the visitor will be forced onto that system and not have to wait for "new" images to load repeatedly.
If you have a dynamically generated site, a single site menu may be included at different directory levels. With relative URLs, you will end up with lots of broken links (because the menu does not know where it is being called from relative to the requested file), resulting in the dreaded 404 File Not Found error.

Backups!

A loosely related topic is that of backing up your web site files. Many people fall into the trap of relying on their web site's server to not crash or their files to not become corrupted. How does this happen? A couple of common ways:

Using the automated (online) publishing features of HTML editors like FrontPage and not keeping a local backup on your own computer.
Using dynamic site content such as databases which need to be downloaded periodically -- often easy to forget to do.

There are many other situations that we could come up with, but you probably get the idea. If you do all your site work on your own computer and upload the finished files to the server, then you always have at least one backup. To be safe, you should probably use an additional backup system such as a second computer, zip drive, CD-R, etc.

Next Tutorial
Back to the Tutorials Index