Lysis blog

28th Oct 2011

website improvements

Over the last couple of weeks, I've been trying to tidy up this website - I finally got around to making a proper 404 page, and various other minor tweaks.
More importantly, I've redone the games pages to be more attractive, consistent and easier to maintain. Once I'd started doing that I couldn't resist working around the limitations to get rotating palette ads working again, so I cover that in some detail.

I know this probably isn't that interesting to most people, but you can always ignore it.


New Games pages

The page layout is entirely by css, which will hopefully display properly on most browsers written in the last decade. (For some reason IE6 hates the whole site, but I've given up on that now.)
My main desire necessitating the redesign was that the layout be fluid, formatting itself to a range of browser widths, with the game description flowing around the game itself. I also wanted adding a new game to be easier, with less scope for error.

My approach here uses server-side includes (SSI) to build each page. The initially referenced file sets up some variables, and references other files which get included in the output.
I have standard 'top' and 'bottom' sections, which between them define most of the webpage. These use the variables to specify the things which need to change dependent on the page : the game's name, gamefile url and so on. Sandwiched in-between the two incorporated files is the game description, which generally meant to be completely different for each game.
By doing it this way I've taken a trade-off of ease of maintenance at the cost of more server work generating the page. Since my server is under-utilised this was an easy decision to make.

Colour-changing Ads

rotating colour-palette ad.

While doing the above, I realised that earlier in the year, Google had removed some functionality from ad-sense. Previously, it was possible to set up adverts to randomly choose from up to four colour-schemes, with "rotating color palettes". I thought this was great fun, but apparently this didn't see much use.
As this is no longer a service, I decided to see if I could get a similar effect myself. It turns out that it is using just SSI, and without modifying Google's code as it's seen by the browser - for a very few adverts per page.

The first thing to do is set up several adverts with different colour-schemes. Here I'm using this method primarily for links units, as the others tend to pull in graphical ads anyway.
Apache SSI scripts can't generate random numbers, but you do have access to the time, and can pull pseudorandom numbers from that by setting the time format for example to just give seconds.

Here is the basic code I'm using for one advert on the page:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-*my-account-id**";<!--#config timefmt='%S'
--><!--#if expr='${DATE_LOCAL} >= 45' -->
/* link unit pastel blue */
google_ad_slot = "*adcode-1*";
<!--#elif expr='${DATE_LOCAL} >= 30' -->
/* link unit pastel green */
google_ad_slot = "*adcode-2*";
<!--#elif expr='${DATE_LOCAL} >= 15' -->
/* link unit pastel purple */
google_ad_slot = "*adcode-3*";
<!--#else -->
/* link unit pastel yellow */
google_ad_slot = "*adcode-4*";
<!--#endif -->google_ad_width = 160;
google_ad_height = 90;
<script type="text/javascript"

This cycles the ad displayed every 15 seconds. By changing the numbers, you can have up to 60 (!) different options. If you want them to have equal opportunity of being shown, you could have 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 or 60 different options. The more options you have, the longer the code, and the more work to parse by your server.

The reason for the slightly odd-looking line-break positions is to give the output the appropriate formatting. Newlines before the end of the SSI command don't affect the server parsing, and are not passed on to the output.

Obviously if you want a second ad on the page to change independently, you'll need a second, independent 'random' number - I use minutes, and cycle through my four ads three times, yielding a change every five minutes.
To do this, change the string in the config timefmt command. Potentially suitable options are:

(case sensitive)
descriptionrange current value
%SSeconds0-59 42
%MMinutes0-59 14
%I12-Hour1-12 04
%H24-Hour0-23 16
%wday of week0-6 1

If you really, really wanted multiple, rapidly and independently changing ads, you could use the residual data in the seconds component, but it's at the very least more complicated, and probably not worth it. It's desirable for the colours to change independently, but it probably doesn't matter if a particular ad is the same colour for someone who sits around refreshing the page every few seconds. In any case, for more than two ads it might be worth thinking about other methods - perhaps a chron job could regenerate them every few minutes using better pseudorandom number generation facilities.

Just to labour the point, there are lots of possibilities here. Changing background colour dependent on the time of day is a cliché. But it is also possible to change layout in a subtle or blatant manner.
When creating a set of ads, you're not restricted to colour changes - you could have ads of different sizes, or you could move it around by including html in the rewritten section.

Remember that this isn't for every site - even enabling SSI for the page puts extra load on your server - if you get a lot of traffic to a page you might need to make it static.

Useful links:

Got a comment? Leave it below, or email me feedback privately.



Add a comment (Please read the notes before submitting your first comment)
no registration required
re-use handle & password to retain identity


Back to Lysis Games main page

Back to Lysis Blog