The G String

You might have heard about the on-line marketing antics of Radiohead in recent months. They’ve already done an honesty-bar-style website to flog their latest album, and now they’re selling bits and pieces of their tracks on iTunes on their remix website. According to WASTE, their previous experiment with Nude surpassed all expectations, with some impressive statistics: over six million visitors, 10 terabytes transfer and over two thousand submitted mixes.

So I was one of the 1800 or so to try my hand at a Reckoner remix. As it goes, I don’t think much of the original, and I had to re-listen to the album to remind myself how it went. I suppose a few people agree with me, since there were fewer submissions than the Nude competition. To be totally honest, there is nothing in the top twenty worth listening to twice, IMO. However, this is supposed to be a web development blog so I will move on.

The website, for those who haven’t seen it, presents the uploaded tracks in a straight list, ten to a page, so a couple of hundred pages with MORE / PREVIOUS links. At the top, you can choose to scroll through the list by most popular, most recent or you can view a randomly-selected list. Each track is displayed with its name, and a flash player and vote button. The voting is tracked seemingly by IP (making my home static address a disadvantage).

Perhaps not surprisingly, there is a huge disparity between the amount of attention received for the top twenty and for the rest, and unless a mix is in the top two hundred it seems improbable that anyone would ever chance on it at all.

To combat this, Radiohead provide widgets that can be posted on external websites. Like blogs, widgets are another buzz-word for something that has been around for some time; a bunch of HTML code that displays an object, but the use of widgets is certainly a winning strategy for getting your website noticed. In essence, facilitating and encouraging the use of widgets turns your visitors into a massive, distributed marketing machine. After all, here I am, writing about the project on my blog, posting a link back to Radiohead, effectively doing part of their marketing for them.

I posted this widget on my own homepage, my blog (obviously), my myspace and the myspaces of anyone who’d approve the comment, and yet I still have only a handful of votes. I refuse to believe the quality of the music was a factor, its just only a few people would have seen this. On the other hand, the use of widgets presumably helped Contract Jack; who is at the time of writing both in first and second place.

However much I am impressed by Radiohead’s innovation in such a new area, I reckon that they could have done much more in their main website design to help promote the mixes that didn’t get uploaded in the first few days (and hence would never make the top twenty pages). One simple enhancement would be to display a page of the most rising mixes; that is, rather than ranking mixes by their overall number of votes, display the mixes in order of how many positions they have jumped that week. That way, the ‘popular’ mixes at the top wouldn’t feature, but interesting mixes uploaded after the first few weeks would have a chance to get a similar amount of attention as the top twenty. Once the mixes move towards the top of the charts, the number of votes required to move up the charts increases, forcing these mixes off the ‘most risen’ list.

But anyway, vote on my remix if you like it!

One of the things that I found that CSS doesn’t handle adequately is arranging a layout as a grid.  Back in the day, when you’d have tables nested in tables nested in tables, it was a horiffic mess, but at least I always knew where I was with layout; and the table element seemed to handle different browsers more reliably too. Now we have a situation where the standard ‘correct’ approach will not work in IE, leaving the developer the choice of a hacky-workaround or providing for IE seperately.

Anyway, these days its bad form to use tables for layout, so I went about making a list of tracks on my web application into a grid using the CSS approach.

CSS supports table-like layouts using the display:table, display:table-row, display:table-cell styles. Whereas before you’d have

<table>
  <tr>
    <td>Hello</td>
  </tr>
</table>

Now you can use any element to form your table.

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell">Hello</div>
  </div>
</div>

What I wanted was to display my list of track objects on the screen using a grid, to make the best use of the horizontal space. But, when styles were turned off, I wanted to keep the list structure. I ended up using

<div class="trackgrid">
  <ul>
    <li>Track one<li>
    <li>Track two...</li>
  </ul>
</div>

div .trackgrid
{
  display: table;
}

div .trackgrid ul
{
 display : table-row;
}

.trackgrid ul li
{
  display : table-cell;
  list-display : none;
}

Which gives the desired effect of arranging the list elements horizontally and without the bullet marks. I used the same technique to create a horizonal menubar, and there are several other uses for it.