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.
See also Website Building—How I created this site
Click on any of the images below to see a static version of the homepage in each era.
2000-2008: Phase 1
2000
I don't have samples of the site's earliest incarnation when it was hosted on Geocities, from March 2000 to the beginning of 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. The earliest version of the site also lacked the "Trainiax" name, which I hadn't yet adopted.
The first homepage address was www.geocities.com/mjeby/mehomepage.htm. The filename of "mehomepage.htm" was for "Michael Eby homepage", and subsequent html files used my initials in the filename - a pattern which continues to this day (if for no other reason than the convenience of grouping them alphabetically in the server's root directory).
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".
At this point the site was hosted on the server 0catch, with a homepage address of trainiax.0catch.com. As it was a free hosting package, the site had ads along the top (not included in the simulation below).
Hide ▲
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.
Show ▼
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.
In late 2002 I upgraded to a paid hosting package to eliminate ads on the site.
Show ▼
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.
Show ▼
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.
Show ▼
2005
More minor changes while retaining the same site appearance. In early to mid 2005 I gradually transitioned the entire site over to Bravenet and purchased the "trainiax.net" domain name, but the site appearance remained unaltered through the transition.
Show ▼
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.
Show ▼
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.
Hide ▲
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.
Hide ▲
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.
Hide ▲
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 7 more times from 2012 to 2020. 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.
Hide ▲
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.
Show ▼
2015
I was not satisfied with the initial colour palette following the site redesign, so by late 2013 I had shifted the blues a little more toward teal and lightened the menu font. In 2015 the menu links had a (short-lived) ">" added.
Show ▼
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.
Also, in June 2016, I changed how images were displayed in the Photos section, eliminating small thumnails (100 px high) and replacing them with medium-sized images slightly reduced in size.
Show ▼
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).
At this point I also simplified the layout code after I discovered the CSS "box-sizing:border-box" property, which was the biggest breath of fresh air since I had started coding manually. I honestly don't know why this wasn't the default box-sizing property to begin with. The standard sizing model, which based box sizes on the inner content size (inside the margin, border AND padding), instead of on the border size, was counterintuitive and required nested <div> elements to get the pages to display correctly.
Show ▼
2019
In April 2018 I revised the layout code of the site so that the page would better adapt to varying screen resolutions. Although the site is still largely optimized for desktop use, a new layout for smaller screens was added - shifting the content menu to the top and removing the side icons to maximize limited screen real estate. For larger resultions, the maximum width of the page (inside the dark blue borders) was increased from 1200 to 1400 pixels, with the left column set to two different percentage widths depending on screen size. The image below shows the site behaviour with smaller screen size.
The "About the Site" paragraph was also slightly modified in 2019 as I worked on tempering my hubris regarding various claims I had made on the site.
Hide ▲
2020
At the end of 2019 and beginning of 2020, I made slight revisions to the CSS styles of the green navigation bar and the menu links, specifying the border radius in percentage rather than pixels. In the Drawings and Photos pages, I added arrows for drawing links and simplified the sorting, options and page links for photos.
Soon after, I made more significant changes to the overall appearance of the site. The overall design became less "flat," with added shadow effects, higher-contrast menu font colours, increased header spacing, and (for the first time ever) underlined menu links. I moved the HTML and CSS validation icons down to the footer, as they served no purpose other than for me to double-check code updates.
At the end of March 2020, the text links for drawings and photos were altered to display photos (small versions) and drawings within the page itself using Javascript, rather than opening the images separately.
Show ▼
2021
In late 2020, I slightly refined the site styles, narrowing the width of paragraphs (which were too wide on large monitors) and generally increasing the spacing between various elements.
In January 2021 I re-wrote most of the text on the homepage and removed the geeky reference to meeting various web standards (which I relocated to the Website Building page).
Show ▼
2022
In March 2022 I shortened the breadcrumb navigation and removed it from high-level pages, along with removing the green bar to lighten the appearance a bit.