One of my websites – andrewluvtrains.com – has been in a state of disrepair for a few months now. I’ve been so busy with other things that I could never seem to get back to it. This was actually the first modern website I’ve had (my previous ones we’re rough and incomplete). I broke some of the content that was originally on my train website into multiple websites – with the goal of keeping each website focused on one subject). That said, I still wanted to keep this website up and running – and it wasn’t.
One of the primary characteristics of my trains website was photos – lots of photos. For many years I’ve been using Gallery2 on my websites and on many of my clients – as it was an excellent photo gallery – easy to upload and very usable. The Gallery Community decided in 2010 that Gallery 2 was at it’s end of life – and that a completely new build of the Gallery – Gallery 3 – needed to be produced. Therefore my trains website became a testing site for this new gallery – including doing some release candidate testing (I have to give credit to the community for working the issues I found in a rapid manner).
My methods are the same with every site – create the “template” that the whole site is based on (header, footer, background, etc.). I’ve been trying to be a little more artistic in building my websites – as some I’ve done in the past are pretty utilitarian. The trains site lent itself well to this – as the photos make it a lot easier to create something pleasing to the eye. Therefore I came up with a template using these characteristics:
- I wanted to keep it clean – where the “header” of the site was pretty minimal. Therefore I added a simple train image (my logo) and the name of the website “Andrew Loves Trains” (text)
- I also kept the menu very simple – simply words as hyperlinks – no images, drop-downs, etc.
- One of the common approaches I’ve used lately is to have a fixed layout – with the body having a very large image behind it. In this case I had a nice train photo to serve as the very large image.
- I decided to keep this image as central to the site – so the background of the content and the header is simply a semi-transparent white image.
- The footer continued this pattern – except with a series of semi-transparent images to make the footer look different.
The other thing I wanted to do with this website was try a different font – instead of the standard set of web fonts. Therefore I went to the Google Font Directory to look for a special font. There are a growing number of new fonts to choose from (more than when I first looked a few months ago). I decided on “Coming Soon” as my website font – to give it a distinctive look. What’s nice about the Google fonts is all I have to do is import their css definition and add it to my css definitions (in my case the body).
Therefore I created the template that’s visible in the website – using a combination of css (backround images, fonts, etc.) and a template in Dreamweaver. Then I created each page from this template – for consistency of look and feel, as well as navigation. I’ve finally moved away from tables – so it’s all in DIVs with CSS formatting.
