Phil Gyford

This piece has been re-written at the request of a third party. 7 April 2004.

Live After Dark, a site I developed at Poke around the New Year, went live last week and despite the design’s flouting of many of today’s best web design practices, I’m proud of certain aspects of its construction.

The site is part of a promotional campaign for Heineken in the Netherlands or, as the second home page puts it, “a new Do-It-Yourself approach to partying in which YOU are both the audience and the performer”. Quite. But let’s concentrate on the site’s design and construction. When I first saw the Photoshop mock-ups, created by a different company, alarm bells began ringing; the fixed dimensions of the design reminded me of the fashion for such TV-size sites that has waned over recent years. In particular it brought back memories of Capital Radio’s websites which, when I began working there in 1997, had a similar format.

As most of us know, the problems with frames haven’t changed much since those days: accessibility problems; slow loading; lack of indexing by search engines; complicated construction and maintenance; and the inability for users to share or bookmark the URLs of individual pages. Capital Radio ditched their frames-based design in 1998, and I didn’t relish repeating their earlier experiences in 2004.

So, how could we accomodate the design without revisiting this collection of fundamental mistakes? Aside from the site’s dimensions we also had to bear in mind the need for scrolling windows of text within the main ‘frame’, and the graphical navigation bar at the bottom.

The first problem was to create the basic shape without using a nightmare of nested frames. As with most problems, others had been down the path before, and I was delighted to find a practical solution using CSS. Once the central ‘frame’ was in place it was easy to position the navigation bar along its lower edge, using z-index to keep it in front of the main content.

Now for the scrolling windows of text. In my experience iframes have been more trouble than they’re worth, but initially I couldn’t see an alternative. However, after picking apart the spectacular work done on the The Guardian digital edition, I realised we could use a similar technique. So, for a page like this, we could keep the main text in the same file (rather than the separate one that an iframe would require), wrapping it in an absolutely positioned div. Then we gave the div a fixed width and height and set overflow: hidden — magically a scrollbar appears, producing the required effect.

So, while I wouldn’t place the site’s design up there with the finest in the world, I’m pleased with how we managed to construct it, avoiding what at first seemed like inevitable problems.