Using Augmented Linear Web Structure
A Brief Introduction
When building out the navigational structure of a website, there are many factors to consider. In this tutorial, we will be looking at augmented linear website structures. Augmented linear website structures improve on one fundamental flaw of the standard linear structure: a way to navigate back to the home page.
How Does an Augmented Linear Structure Work?
As in our previous tutorial, let’s use a slideshow as an example of a linear structure. If a user wants to start the slide show over at any point, they need a way to return to the starting point. In this example, we will create the link within our pages that will allow them to do this.
The HTML
The HTML will consist of four pages. The first page as shown below is the home, or starting page (index.html):
<html>
<head>
<title>Augmented Linear Website Structure</title>
</head>
<body>
<br />
<br />
<br />
<h1 style="text-align: center;">This is an example of an Augmented Linear Website Structure</h1>
<br />
<hr />
<br />
<br />
<h2 style="text-align: center;">This is the Home Page</h2>
<br />
<hr />
<br />
<div style="text-align: center;"><a href="page_1.html">Page 1 →</a></div>
<br />
<hr />
<br />
<div style="text-align: center;"><a href="last_page.html">Go to Last Page</a></div>
</body>
</html>
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
When you open the index.html document in a browser, you will see that there is a link to another page. That will be the next page we create (page_1.html):
<html>
<head>
<title>Page 1</title>
</head>
<body>
<br />
<br />
<br />
<h1 style="text-align: center;">This is an example of a Linear Website Structure</h1>
<br />
<hr />
<br />
<br />
<h2 style="text-align: center;">This is Page 1</h2>
<br />
<hr />
<br />
<div style="text-align: center;"><a href="index.html">Home Page ←</a> •
<a href="page_2.html">Page 2 →</a></div>
<br />
<hr />
<br />
<div style="text-align: center;"><a href="index.html">Go to Home Page</a></div>
</body>
</html>
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 menu consisting of only two links: to the pages before and after it. The following pages are where the augmented linear structure comes into play.
<html>
<head>
<title>Page 2</title>
</head>
<body>
<br />
<br />
<br />
<h1 style="text-align: center;">This is an example of a Linear Website Structure</h1>
<br />
<hr />
<br />
<br />
<h2 style="text-align: center;">This is Page 2</h2>
<br />
<hr />
<br />
<div style="text-align: center;"><a href="page_1.html">Page 1 ←</a> •
<a href="last_page.html">Last Page →</a></div>
<br />
<hr />
<br />
<div style="text-align: center;"><a href="index.html">Go to Home Page</a></div>
</body>
</html>
At the bottom of the source code, you can see that an additional link has been added returning the user to the home page. This may seem insignificant enough, but when it is applied to a linear structure of several pages, its significance should be apparent.
A Few Last Words
The most important this to remember is that even though augmented linear structures are an improvement of the traditional linear, this method is still severely limited in terms of general usability. In other words, this style of navigation is not standard and should only be used for web sites with a limited number of pages that are in a clearly defined order.I just signed up at Server Intellect and couldn’t be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
