Being Blonde

Grolsch is sponsoring Original Comedy on Channel 4.

In support of this, Leith have produced a series of sponsorship idents, shot in Amsterdam and featuring a couple of guys on a grass-roofed barge. Quirky things happen around them as they make their way along the canals - these involve a zebra, a mole, Amazonian indians, a visit from on high by a Japanese businessman, an unusual pizza delivery and some “wild” grass.

We’ve developed a new Grolsch site which is being referred to internally as the “immortal” - part immersive brand experience, part portal. The new site is designed to make the most of the increasing amount of dynamic content that Grolsch/we are generating - much of this obviously arising from the C4 sponsorship.

An example of this dynamic content is the Codebreaker competition. Within the action of each sponsorship film we’ve included a Grolsch-related number. These numbers pertain to facts about the brand, its history, its locations, its products, its packaging and to beer drinking in general. The numbers are “hidden in full view” in that they’re pretty easy to spot if you know to look for them, but you probably won’t notice them if you don’t.

Competition entrants have to identify each of the six numbers between now and the end of March and enter them on the Grolsch site. To successfully break the code they have to enter the sum of all six numbers. Winners get their own centrally located houseboat in Amsterdam for three nights, plus a two day trip to the Grolsch Brewery in Enschede.

Getting this competition off the ground has been a properly integrated effort involving forward planning and great collaboration between Blonde, Coors, Channel 4, Leith and their production company. Hard work but good fun.

Mark Wong joined us recently as a developer in our London office (aka Blondon).

Talking of aka, it’s Mark, aka “Wonky”, aka “Wonkenstein”, aka “the Wonkenator”.

In a previous post Fraser talked about developers being machines that turn coffee into code.

Wonky is clearly a machine that turns beef flavour Hula Hoops into code.

(Plus the occasional banana).

Back when the web was young (and we all walked uphill through snow both ways to get to work) we web monkeys got by with good old “view source”. If a problem was extra-tricky we’d make a copy of that source and tinker till it worked.

Unfortunately nowadays just viewing the source doesn’t often help - sometimes all you get is two divs and a javascript call to work with… (which then goes on to use XMLHTTPRequest’s and the like to populate the page, generating the document on the fly, rebuilding entire sections by importing a google-maps-flash-GPS-mashup into a floating div… you get the idea)

So we need something better than just “view source”.

Enter Firebug:

This allows you to view the document structure in real time - even if it’s being changed constantly by a bit of Web 2.7 AJAX/Jif^[1] Magic. You can also see what styles are being imported from what stylesheets, you can right click and “inspect element” on the webpage and firebug will show you the appropriate bit of code.

Even better - you’re not just limited to looking at what the document is - you can tinker: add new elements, add attributes, change the styles (even with all these fancy toys, ‘border: 1px solid red;’ is still my favourite CSS debugging tool ;)).

After using firebug for a few hours it’s hard to imagine ever debugging a web page without it… and that’s its one problem…

See, Firebug only comes with Firefox - and unfortunately we poor web monkeys have to debug for IE6 and IE7 too (something to do with world+dog using IE still). Having played with Firefox and Firebug I’m now spoiled - I don’t want to look at that page in IE6 because I know something is going to be out of alignment and I’m going to have a much more painful time of tracking it down than if I could just Firebug it…

However, this morning in my inbox I have an email linking to an IE equivalent - the Internet Explorer Developer Toolbar. Its name isn’t quite so snappy and it doesn’t have all the handy network monitoring tools Firebug has (very useful when debugging some Flash apps), but it does let you view and tinker with the document and the stylesheets.

Hurrah!

So, my fellow web monkeys - if you’ve not discovered either of these tools yet - check the links below, they’re just too good to miss out on. Give it a day or two of using them and you’ll wonder how you ever lived without.

Firebug add-on for Firefox

The Internet Explorer Developer Toolbar

^[1] I can’t help it if people name the latest nifty web-fad after a popular brand of bleach can I? Give it five years and we’ll be talking about using “Toilet Duck” to empower “The Nappy Framework” or something.