Organizing a website

This tutorial is designed to give some ideas about how files in a website (documents, images, videos, etc.) can be distributed among directories and how the resources can refer to each other from these different locations.

Directory structure

Besides personal preference, the ways a website can be organized depends heavily on its type and scope. In this tutorial we'll analize a few models that can help you organize the files of your website and make updating it a pleasant job.

It can be definitely good to create a folder in your computer for each project you start. Then, every file of a website will fall somewhere inside its corresponding folder, despite the internal structure you desing for them. Having said this, it's important that you don't make links in your documents to resources outside the website folder, as these are prone to be moved, specially if you consider the idea to make your website public.

About designing the internal structure of your folder, you should consider that putting all the files in the main directory (also called "root") may be fine for a small site (let's say, 5 pages and 3 images). But if you have to handle 20 pages and 200 images, that organization model can turn into a serious problem and give you a hard time trying to find the documents among so many images. So what you can do in such case, is to start grouping the files in some way and place them in different directories to make your site a little easier to manage and update.

Structure for small websites

For small websites it's better to keep the directory structure simple. For example, let's say you have a site where you display your artwork: a collection of 5 images designed by yourself. After consider it for a while, you decide that you'll build only one page to show the images, plus the home page and the contact page. This makes a total of 3 pages and 5 images. It's not much, so you can go with the following directory structure:

  • root
    Folder
    • images
      Folder
      • image1.jpg
        JPEG image
      • image2.jpg
        JPEG image
      • image3.jpg
        JPEG image
      • image4.jpg
        JPEG image
      • image5.jpg
        JPEG image
    • contact.html
      HTML document
    • images.html
      HTML document
    • index.html
      HTML document

As you can see, the directory strcuture consists of a root directory which contains a sub-directory called "images". In this organization model you put all your artwork in the "images" directory and all the documents in the root.

Dividing into categories

The previous structure is clear and simple, and works very well for the files it needs to hold. But suppose that, in the following months, you continue to create more of your artwork. Before you realize, you have 100 images and you begin to think that this directory structure is getting obsolete, as you have already placed a hundred files in a single directory.

In this scenario, a viable solution would be to divide your images into thematic groups: "flowers", "people", "animals", "fantasy" and "surrealism". This way you can show all the images corresponding to a category in a single page, having one page for each category. Let's see how this looks like.

  • root
    Folder
    • images
      Folder
      • animals
        Folder
      • fantasy
        Folder
      • flowers
        Folder
      • people
        Folder
      • surrealism
        Folder
    • animals.html
      HTML document
    • contact.html
      HTML document
    • fantasy.html
      HTML document
    • flowers.html
      HTML document
    • index.html
      HTML document
    • people.html
      HTML document
    • surrealism.html
      HTML document

You can put now, each image into the appropriate directory, getting an average of 20 images per directory. And yet, these directories can be subdivided: for example, the directory "animals" can contain sub-directories like "birds", "horses" or "felines".

But just when you start feeling allright with this structure, adding and adding new categories as required, your friends start asking you for the opportunity of showing their own work in your site. You like this idea very much, but after a little consideration, you realize that the current directory structure isn't going to make it.

Dividing into sub-websites

A good idea to solve the problem presented in the previous paragraph is to use the previous models but as sub-sections of the website, thus having a small website for each artist displaying his work in it. In this scheme, each artist will have a directory with all his images and pages properly arranged. Let's take a better look at this, so we can then continue with a clearer image.

  • root
    Folder
    • artists
      Folder
      • isaac
        Folder
        • images
          Folder
        • bio.html
          HTML document
        • contact.html
          HTML document
        • images.html
          HTML document
      • me
        Folder
        • images
          Folder
        • bio.html
          HTML document
        • contact.html
          HTML document
        • images.html
          HTML document
      • index.html
        HTML document
    • contact.html
      HTML document
    • index.html
      HTML document

Now, pay attention to the folder "artists". This is a plus that allows both, organization and expandability, making the structure more flexible to address the addition of new artists. And the "index.html" file inside the "artists" folder contains a document showing all artists present in the website. Placing this file there seems appropriate in a sense of ownership: it's the list of artists; it should be in the "artists" directory.

So far, you've seen three possible structures for three different situations, but there are many more. You could, for example, add categories for the images of each artist in the last structure or use categories first and place artists' folders inside of them.

Designing the structure of files in a website is about finding solutions to an organizational problem. And a particular thing about solutions (or more specifically, about approaches) is that there are always more than one. So the approaches proposed in this document are, at their best, one option among many.

123Próx