A large part of my work consists of customizing genealogy websites powered by TNG.
While TNG is a powerful application for bringing one’s genealogy to the web, the display and layout of pages “out of the box” is somewhat outdated with respect to web standards. I’ve been using TNG since 2004 and the page layouts are largely the same as they were more five years ago.
My purpose for writing this series is twofold: 1. to record the changes I make for future reference, and 2. to make those changes available to others who may be interested in achieving site-wide uniform page layouts within TNG.
For reference, the following is a list of the core TNG pages as shown on the “out of the box” Home (index.php) page under the heading titled “Other Features”.
TNG Home page "out of the box"
Login/Logout
Register for a User Account
Surnames
Bookmarks
Statistics
Photos
Histories
Documents
Videos
Recordings
Albums
All Media
Cemeteries
Headstones
Places
Notes
Dates and Anniversaries
Reports
Sources
Repositories
What’s New
Most Wanted
Change Language
Access Log
Administration
Contact Us
For the purpose of effective User Interface Design, there doesn’t seem to be any discernible order to the above list. Moreover, the “Other Features” heading is not used on any other page so may serve to confuse a new user. To be fair, a disclaimer at the bottom of the generic Home page states, “Please customize this page!”.
TNG Home page with simple category lists
Fortunately, core TNG pages (pages beyond the “Home” or Index page), have three drop menus built into the upper right hand corner, with the above links grouped under loosely categorized list titles.
These categories can be used as a guide to achieve navigational consistency, not only on the Home page, but also on other custom pages so that a User can intuitively find information of interest no matter what page is viewed.
On the right is a screen shot of a simple customized TNG Home page as viewed full scree on a 1280 x 1024 display. The color palette is the same as the “out of the box” TNG install. In this page layout, list categories have been arranged in the same order as those found on drop down menus within the core TNG pages.
While this custom TNG Home page layout was created on a 1280 x 1024 display, all the content is contained within a fluid block that expands or contracts according to the size of the display. View the custom TNG Home page layout over at my TNG Test database.
