Page Splitting Techniques on GeodSoft.com

The mechanics of splitting large pages and the development of adaptive navigation aids with previous and next links to pages which logically precede and follow the current page are discussed.

Once the decision was made to split large pages, the technique is pretty straight forward. I decided to start with the "Making this Site" portion. The labeled sections were just about the size that I wanted for finished pages. I belive it's important to separate projects and areas by directory or folder so as the first step was to create a "making" directory under the "about" directory.

I copied the long document to the new folder and then deleted everything specific to all but one page and saved the results as a new page. Since the original document had a table of contents and anchors, it was natural to save the pages with the names of the anchors plus ".htm". There were some cosmetic changes that needed to be made to each page such as fixing page titles and adjusting header sizes.

It may be worth noting the heading sizes use on this site at this point. This is one area that I have made use of style sheets. Browsers typically render H1 headings so large they cannot be used for any practical purpose on most web sites. I have used CSS to dramatically compress the size range in headings so that H1 is much smaller than normal, H5 is much larger than normal, and the differences between successive headings, quite small compared to normal browser displays. This allows me to use H1 as the page heading on top level pages and H2 as the page heading on second level pages. So far I've gone as far as H3 on these third level pages. Previously when Making this Site started as one large page it began with an H2 heading and the subsections had H3. Now even thought they are physically separate pages, this keeps the same heading levels with the same content. It will allow software that used heading levels to automatically construct an outline of the site contents from the HTML headings.

To make using several small pages at least as easy as using one large page requires providing good navigation aids. In one large sequential document, the user just keeps scrolling down. As separate pages, a means needs to be provided to make sequential access just as simple. While much of the web is not sequential in nature, and users may wish to take advantage of this, a sequential document that is broken into separate pieces should still be accessible sequentially. The obvious solution is to provide next and previous links on each page.

In this case I created a small right pointing arrow with an "N" on it for next and a left pointing arrow with a "P". I also created an up arrow with a "C" for contents. This additional link is to assist anyone searching for specific material or wishing to access the material in a non sequential order. Of course I stayed with the already established color scheme (white letters on red). The graphics were too small to use bevels or drop shadows. For the link names I chose to use shortened versions of the page titles rather than the less meaningful "Next" and "Previous". I also placed the links at the very top and bottom of the page specific content on each page.

The links at the top facilitate rapid browsing to assist the user who is not sure based on page title alone if the page is what they are looking for. The links at the bottom assist the user who is actually reading the pages so they do not need to scroll to the top or the site map to continue with the next page when they reach the bottom of a page.

I also added site map contents in the left column for the new section. I had considered having a site map that listed every page in the site. After seeing how quickly the site map grew with just the Making this Site section, I decided that would obscure the clarity of the site map. I decided to hold the site map to the top two levels of the site, except for the current section which will automatically expand when the user is on a page in such a section. In addition I decided to highlight the link to the current top and second level sections as well as the link to the page that the user is currently on, to help give the user a sense of place wherever they are within the site. The color of these highlights is the full intensity red. I tried the slightly darker cooler red of the graphics but in the fine letters of the site map, it does not show as well. I doubt that many users will notice or wonder about the slight differences in the reds.

Top of Page - Site Map

Copyright © 2000 - 2014 by George Shaffer. This material may be distributed only subject to the terms and conditions set forth in http://GeodSoft.com/terms.htm (or http://GeodSoft.com/cgi-bin/terms.pl). These terms are subject to change. Distribution is subject to the current terms, or at the choice of the distributor, those in an earlier, digitally signed electronic copy of http://GeodSoft.com/terms.htm (or cgi-bin/terms.pl) from the time of the distribution. Distribution of substantively modified versions of GeodSoft content is prohibited without the explicit written permission of George Shaffer. Distribution of the work or derivatives of the work, in whole or in part, for commercial purposes is prohibited unless prior written permission is obtained from George Shaffer. Distribution in accordance with these terms, for unrestricted and uncompensated public access, non profit, or internal company use is allowed.