home > usability > structure > site structure

site structure

Simplicity and logic are essential in site construction, both for the creator as well as the user, who can't see the underlying structure. This enables easy editing and a logical hierarchy to navigation and within-site links. If the underlying structure makes sense, hopefully the site navigation will make sense to the user.

The site structure should be hierarchical and will allow the user to get to more detailed information through the navigation. Ideally, the user should be able to reach all levels of the site through any page.

• basic structure
• steps to take
• example site structure

basic structure

• A main site home page located in the root (base of the site) directory (usually called index.html)
• Several sub directory folders, each containing a main page(/foldername/index.html)
• Subsequent pages in these directories will be called something.html
• A graphics folder (smaller sites)
• A graphics folder in each sub directory folder (larger sites)
• A ssi folder to contain server side includes
• A styles folder to contain style sheets (.css files)

steps to take

• Split your site into logical sections - these will be the sub directory folders
• Create folders for /graphics/, /ssi/ and /styles/
• Create your home page and save it as index.html in the root directory
• Create index.html pages for all of the sub directory folders (But not for /graphics/, /ssi/ and /styles/)
• Create as many pages as necessary in each folder
• Where necessary, create new folders within folders

example site structure

The diagram below shows what the actual folder structure could look like: