What navigation options are required and desirable?
To some extent, how you answer this question depends on the nature and popularity of your website. For example, Wikipedia has thousands of pages on a multitude of subjects, but most users will probably find a specific Wikipedia page by entering the required subject, e.g. 'science', into a search engine and then looking up the associated Wikipedia page listed in the search index, which will typically be on the very first page. Alternatively, you might search on 'Wikipedia' and then use the local option in Wikipedia to search for 'science'. Either way, Wikipedia's status as a major website allows it to adopt a fairly simple navigation strategy. Of course, this navigation strategy is not necessarily the best approach for a website that nobody will know about or will fail to quickly find in the weighted ranking of any given search engine.
So what other navigation criteria might be taken into consideration?
Well, we might describe the nature of the website content as being analogous to a book. If so, we might consider the equivalent navigation capabilities of a book to find a given page through a table of contents or the sequential turning of each page or looking up a keyword via an alphabetic index. Of course, while all these facilities might seem desirable, there is a practical question to address at this point:
How are these options to be implemented?
So what approach was adopted by this website?
- Internet Explorer
- Mozilla Firefox
- Google Chrome
In practice, most website designs probably have to make some trade-off between maximising the number of users who can realistically access their site against the complexity of supporting too many compatibility permutations. While backward compatibility support of users on slower connections and older browsers is an obvious problem, leading edge users adopting the latest versions of HTML and CSS only represent a minority in terms of numbers.
- Main top-bar drop-down menu
- Up/down, next/previous page menus
- Expandable inset tree menu
- Expandable sitemap tree menu
- Keyword search facility
It is highlighted that some of the options listed above are a possible overkill, which were only developed in order to satisfy my own technical curiosity. However, each navigational option might be useful to different users at different times. For example, the top menu that run horizontally across each webpage allows first time users to quickly identify, and access, the main sections within the website. In contrast, the page menu(s) allows sequential access to adjacent pages plus quick access to key pages:
- top - entry index.html page
- home - home for the current website
- up - goto the parent page, if available
- next - goto the next page, if available
- previous - goto the previous page, if available
- down - goto the first child page, if available
- sitemap goto a more detailed indexed description of all pages
OK, but what about the implementation issues?
In order to support the navigation options outlined, it was decided to divide each webpage into logical sections using the HTML <div> tag, which then allowed the percentage [%] width of each section to be defined within an external CSS file so that the width can be dynamically adjusted to best suit the screen in use. The following HTML is only intended to be representative of the code, while the actual HTML source can be viewed online by using the view/source option on most browsers.
<div id="header"></div> <!page title -->
<div id="topBar"></div> <!main drop-down menu -->
<div id="leftInset"></div> <!inset for position and tree menus -->
<div id="content"></div> <!main content section -->
<div id="rightInset"></div> <!inset for general comments -->
<div id="bottomBar"></div> <!bottom position menu -->
<div id="footer"></div> <!copyright statement-->
In many cases, ad-hoc web developers, like myself, start off having no specific idea about the potential size of their website, i.e. many sites simply grow and branch off in many different directions over time. However, in this respect, the Mysearch website had already identified its potential scope when being developed under Microsoft Frontpage. As such, it was recognised that any implementation had to support hundreds of pages, to which new pages might be added and existing pages re-arranged within some new hierarchy. However, this aspect of the discussion will be continued under the heading of Update Automation