Monday saw a gathering of 250 leading figures from the world of business at London’s Saatchi Gallery; and organisers UK Trade & Investment asked Puffbox to put together a microsite for the event. With minimal advance publicity, few official post-conference outputs, and no particular involvement for the general public, we felt the best approach was to work up a relatively modest ‘one page site’ idea, ‘mashing up’ material from numerous external sources.
For the past few months I’ve been falling in love with javascript library jQuery; and I wanted to make use of what I’d learned – partly to enrich the user experience above that of a fairly static page, but also to simplify its management. So there’s a nice little sideways-scrolling video playlist – which uses jQuery not only for the animation effect, but also to wrap the content in the necessary HTML markup. Each set of three videos needs to be contained in an LI tag; but doing that manually would have been a nightmare, especially when it came to adding new videos midway down the list – so jQuery does it on my behalf.
When you click to play a video, it loads in the page’s main panel – and generates a few extras too. We’re offering YouTube’s little-known short URL format for easier sharing; social buttons for Twitter, Facebook and Delicious; plus a (somewhat experimental) click-to-copy button, which triggers a rather cute colour trick when you press it. None of it rocket science, but it all helps make things a little more user-friendly, and hopefully a bit more memorable.
(If you’re keen to know how any of it was done, a peek at the source code should reveal all.)
It was a little strange to find myself right back at the coalface, hand-coding HTML pages in real-time: it’s been a good few years, probably dating back to my time at the Foreign Office or Sky News since I’ve had to do that. (Yes folks, that’s right – no WordPress this time.) And inevitably, with various people producing various things in various places – all also in real time, a significant proportion of the effort went on coordination rather than pure web development.
This wasn’t a website on the scale of, say, FCO’s efforts for the London Summit last year. But given what we had, in terms of both time and material available, I’m definitely pleased with it. Looks pretty, thanks to designer Matt; with some cute interactions, thanks to jQuery; and relatively easy to maintain on the day. I’m particularly grateful to UKTI, who were an ideal client in many respects – telling us the end result they wanted, and allowing us to work out how best to do it.
Responses
Nice. Up to your Delicious tagging tricks with the links bars underneath the videos?
Always meant to get more into jQuery. Where’s a good place to start?
No Steph: it’s all yer basic hard-coded HTML. Of course we could have done the Delicious thing: but since I was running it myself, and since it had a live ‘shelf life’ of only a couple of days, it didn’t really seem worth it.
Not sure what I’d recommend if you wanted to start learning jQuery, to be honest. It’s really just a question of getting your head around the CSS-style selectors: $(‘#something’) will grab a DIV with the ID ‘something’, which you can then .hide() or .fadeOut(), and so on. The beginner tutorials on jquery.com aren’t fantastic, but once you’ve grasped the basic structure, the various functions are all very well documented (and demonstrated).
Alternatively, hire an expert. ๐