Thursday, 5 January 2012

Website Updates

This posting is the first of a set describing the reasoning and working behind the latest updates to my website.

Over time I've made a lot of small changes to the site, both front end (what you see in the browser) and back end (the fancy stuff in the background that drives it) that have meant that things aren't quite as clearly and logically laid out as they could be. This makes predicting the effect of future changes harder. This nearly always happens with software and occasionally you have to dive in, get your hands dirty and tidy things up.

Sometimes changes are required because of external influences, for corporate websites this could be for legal reasons, in my case (and I suspect for a lot of people who maintain websites) it is the increased use of mobile devices such as smart phones and tablets being used to access the web. From the site logs, visitors using smart phones or tablets individually outnumber those using Internet Explorer 7 and together they almost outnumber those using Internet Explorer 8 so this change cannot be ignored. Mobile users have different requirements both in how they use a website and how the website should appear and be usable on such small screens.

The main ideas have been to:

reduce how much data is sent;

display the data appropriately;

limit the amount of data initially shown with user options for pulling in more;

incorporate the touch interface.

Any web page can be viewed as being composed of essentially just three elements: content - the words and pictures; look - colours, layout; behaviour - what happens when you click a button etc. These correspond to HTML, CSS and Javascript respectfully, all of which are in the, seemingly almost continuous, process of being updated.

I'd moved the site to use the latest version of HTML (5) a year ago though it doesn't require many of the new markup that the standard introduces.

In one of those "aha" moments I realised that I could replace the multiple slideshow files and that instead of having bowfell_buttress_slides.php, winter-bgr_slides.php, etc. I could have a single template file and pass it a parameter then use that parameter to load the appropriate javascript array of slide details so slideshow.php?s=bowfell_buttress, slideshow.php?s=winter-bgr, etc. This meant that I could replace over sixty (and growing) slideshow files with just one main file (actually one per main section of the site so three in total) but would need the details from those sixty replacing with smaller files holding the data. The benefit is that if a change needs to be made to the slideshow template, I've only three files to change not sixty or more. Chasing up and changing the many links took a while though! Adding a new slideshow is now a matter of creating the necessary data file and then creating the appropriate link.

Along with similar changes to several mainly text pages this means that any future updates to look or behaviour of these pages is much simpler and I'm less likely to miss a file or break something - if one of the pages works then they'll all work.