Website navigation structures are a crucial part of any site creation, and should be carefully planned and executed.  When building out the navigational structure of a website, there are many factors to consider.

In this tutorial, we will be looking at a linear website structures.  A linear site structure directs the user along a pre-determined path, and divulges content in an intentional order. For instance, a book can be thought of as having a linear structure, as the pages are meant to be read sequentially. Likewise, it may be that your website has information that is spread across several pages, yet needs to be revealed to the user in a specific order.

How does a linear website structure work?

Let’s say we want to create an image slideshow.  In this slideshow, we will have X amount of pictures, and each picture needs to have its own page. Let’ also say we want to display these pictures in a particular order, progressing through each sequentially.  It would be difficult to accomplish this using a typical hierarchical navigational structure because the pages would not be restricted to a single direction. The user would be able to access each of the pages, but perhaps not in the order intended.

The HTML

The HTML for our site will consist of four pages. The first page (as shown below) is the home page (index.html):

When you open the index.html page in the browser, you will see that there is a link to another page.  That will be the next page we create (page_1.html):

As you can see, the navigational link on this page goes to both the first page (index.html) and the next page (page_2.html).  With this design style, as you add more pages to the website, each page will have the same navigational layout usually including only two links to the pages before and after it. The last page in the site can include either a single link to the previous page or an additional link to the home, page creating a loop.

A Few Last Words

Linear structures are really only appropriate for web sites with a limited number of pages that meant to be displayed in a clearly defined order.  The biggest problem with linear structures is that because of the limited navigation style, as you progress through the site you will move farther and farther away from the home page, which can be confusing on websites with multiple pages.  There are ways in which to resolve this, which we will discuss in future tutorials. 

Download Source Files