TNG Page Layouts

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

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 by Wild-type

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.

5 responses to “TNG Page Layouts”

  1. Clem Batz

    Jodi,
    I did not know where on your site to send this email – so here it is!

    As you will see, my site needs some professional help. The wording on the home page explains my project. Perhaps you will have ideas on artwork. I just do not have the time to learn and do it right myself. My genealogical project has turned out to be a continuing expanding one. At 76, I need to prioritize my time. At this time, I am working on the new obits as well as going over the microfilm of two newspapers of the last 100 plus years. I have had the present site out for two plus years and now know better my needs for this special purpose site. I have found out during this time that a very small percentage of site login users follow through with promised information or a second login. I think most are interested in their own relationships and not the date information of living relatives that they do not already know. I have just recently removed any mention of login requests to view living data info on my opening page. I no longer plan to grant many requests to view living dates and notes.

    My name is not shown to prevent the site from being known as the Clem Batz Family website. I hope to get the Sun Prairie Historical Museum to take over this project when I am no longer able to. I am presently on the Sun Prairie Historical Society Board, active with the Museum and should be able to do this.

    The main project that I would like done is update from version 6 to 8 and redo the genealogy/index.php page. I have tried to work on this but just do not have the time for the trial and error needed by a non-programmer. You will notice that I have removed some of the links and would also like to remove the Log in, Register for a user account and Notes. I will give by email a link to the log in page to selected individuals. I have bought the upgrade, but am afraid to mess up what is working. My site will not have pictures or cemetery information and so other links can be removed. As you can see, the picture on the template is not Wisconsin! Also, the title should be in keeping the theme of SUN PRAIRIE CONNECTIONS – GENEALOGY – YOUR SUN PRAIRIE TIES or part of that.

    Thanks for your time,

    Clem Batz

  2. Roger

    I like what you have done with the basic TNG template and would like to use your ideals.

    I note you said it was being made available to others:
    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.

    Do I need your permission to use this? If so do I have your permission to use the basics and change it to suit my likes?

    Thanks
    Roger

  3. Petar Zulj

    I have just found you web page about tng pages layout.
    Can you please tell me how much will cost this page layout to buy from you http://wild-type.com/tng/tngtest/index.php, and how administration page looks. (can you put a screenshoot of administratin area)
    Thanks!

  4. Ron Burchell

    Hi,
    I have TNG 8.2 installed and I am using Template 4, it’s the most Modern and cheery I can find.

    I see you have done some work on what I would call crisp and clean templates, I don’t need a have installing and customising just the basic Template do you have an ‘off the shelf’ template and what is the cost. ?

    Cheers

    Ron

Leave a Reply