Top header photo
 Trainiax logo
HomeNew Contact Links
Drawings Photos Recordings Train Info.
crossbuck
HTML5 Powered with CSS3 / Styling, and Semantics
Valid CSS!

Site History

Thanks to the Wayback Machine (as well as a few old files stored offline) I've been able to re-create the Trainiax homepage as it appeared in almost all variations from 2001 to the present day. I've significantly altered the code of the earliest versions of the site to remove junk and deprecated HTML tags, but the appearance of the pages remains the same.

There are two significant eras in the site's construction and design: 2000-2008, when I edited the page using Netscape Composer (or similar WYSIWYG HTML editors); and 2010 onward, when I edited all the code manually. There was a transition in 2009 when I gradually shifted from one to the other. I don't have samples of the site's earliest incarnation when it was hosted on Geocities, from March 2000 to early 2001. It was similar in appearance to the site in 2001, but with a light gray background (instead of a lightened photo) and slightly different navigation buttons.

Click on any of the images below to see a static version of the homepage.

2000-2008: Phase 1

2001

This is the earliest version of the homepage that I currently have. The navigation icons were transparent GIF images, the general site font was Arial, and the background was a brightened photo. Early versions of the homepage featured a row of thumbnail photos at the bottom. The crossbuck icon was present from near the beginning of the site, providing a link to the homepage on all the pages and initially flashing "HO/ME".

archive from 2001

2002

For a brief time in the early 2000's, I had a semi-separate site called the "SLR/SLQ Photo Archive" where I posted photo galleries with descriptions of all my photos taken on the SLR, ordered chronologically. (An organized list of photos sorted by reporting mark was still several years away). I also discovered how to use the transparent colour in MS Paint for creating image layers, leading to a short-lived title image of a drawing superimposed over a photo.

archive from 2002

Later in 2002, I revamped the menu icons to add a bit of colour to the top of the pages. I also itemized the site's content in a list. This was also one of the only periods when the homepage had a drawing rather than a photo at the top. I briefly had a browser recommendation (Netscape at 800 x 600) before realizing that the site worked equally well in other browsers and higher resolutions.

archive from 2002b

2003

By this point, the site had reached a relatively stable phase and would see few changes in appearance for several years. I added an "About Me" paragraph on the homepage and removed the bottom photo.

archive from 2003

2004

Minor changes. I removed the flashing "HO/ME" from the crossbuck and moved the last updated date to the top of the page, instead of the bottom. The homepage periodically received a new photo from among the latest ones I had taken.

archive from 2004

2005

More minor changes while retaining the same site appearance.

archive from 2005

2006

At some point in 2006, I changed the navigation icons to be grayed-out until hovered, at which point the icon under the cursor would resume its previous appearance.

archive from 2006

2007

No significant changes.

archive from 2007

2008

It took me five years to realize that the line about the drawings being "developed over the last 3 years" was out of date, and by 2008 I finally corrected it to indicate the year the drawings were started (2000). This was the last year of the website design first established in 2003.

archive from 2008

2009: Transitional

In 2009, I created a new "Trainiax" logo, which would eventually make its way into all the drawings. Pictured is a short-lived experiment with using the logo as the title of the homepage and an equally short-lived redesign of the navigation icons. I switched from Arial to Verdana for the default font and simplified the number of font variations. At this point the page was still being edited with a WYSIWYG editor, although I was transitioning from Netscape to Kompozer.

archive from 2009

Later in 2009, I took several courses in web programming that would ultimately transform the way I edited the site. The first result of my newfound coding knowledge was a completely redesigned layout built entirely with CSS and largely manual coding. Increasing screen resolutions had rendered the previous site design hard to read since text was spread across wide paragraphs. As a result, the content of the site was now listed in a column on the left side and the width of the main body was reduced to fill only a portion of the total width. I also substantially revised the text on the homepage, as well as on other pages. It would be many months before all the site pages would be updated to the new layout.

archive from 2009b

2010-present: Phase 2

From 2010 onward, there was a lot of behind-the-scenes work creating a modular PHP coding system and SQL-based image search pages that affected the site's operation without changing the general appearance. In 2010 alone I made 9 iterations of the page displaying photo search results, each time making refinements to the code; I would further refine it 5 more times from 2012 to 2016. The end result was that all the parts shared among the pages - the header, left column, footer and styles - would be contained in external files, with the individual PHP pages being differentiated by nothing more than their title and content. These changes made the site significantly easier to update and maintain.

2010

My first experiments with a CSS-based menu were a bit clumsy, so by 2010 I had redesigned it so that the "Home" icon in the top menu always lined up with the left column, and the whole page was layered on a darker background set to work well with different screen sizes. The faded photo background, in use since the early days of the site, disappeared in favour of solid colours. To compensate for the relative lack of colour, I added a rotation of title images above the menu. This was the only version of the homepage that lacked a photo below the title.

Among the changes that came with the shift to CSS and PHP was an automated last-updated date at listed the bottom of each page (in previous versions of the site I entered the date manually). I specified that the updates applied to the "page code" because in some cases - such as with the SQL-based photo search - the page code would remain the same for several years while presenting content from later dates.

archive from 2010

2013

Following the 2010 site redesign, changes were mostly limited to styles and colours. By 2013 I changed the menu so that the page being visited would be highlighted in white. A photo returned below the title, this time a random rotation of several images (as with the top title images). Secondary headers were changed to blue extensions of the left column.

archive from 2013

2015

I was not satisfied with the initial colour palette following the site redesign, so by 2015 I shifted the blues a little more toward teal and lightened the menu font.

archive from 2015

2016

In early 2016, I slightly increased the colour saturation and decluttered the left column, bringing the site more or less to its present format.

archive from 2016

2017

The only change to the site styles in 2017 was a slight alteration to the colours in order to meet contrast standards for web accessibility. The Trainiax logo above the left column was made marginally smaller to resolve minor spacing issues (CSS or font variations previously caused a line to sometimes appear under the top menu).

archive from 2017

 Copyright © Michael Eby - Page code last updated 2017-12-10