From Barley To Barlesque
Post categories: user experience & design
| 19:00 UK time, Tuesday, 20 May 2008
Hi - I'm Mat Hampson, the lead developer on a ±«Óãtv project called Barlesque. (I know, I know: odd name. More about that later.)
This week, we've found the project featured in 's Birtspeak 2.0 column [Shurely shome mishtake - ed] which, in case you're not familiar with it, is the regular column where Private Eye casts its satirical spotlight on a jargon-filled missive or announcement from the ±«Óãtv.
Having read the Eye for years, being on the receiving end has been fun. Aside from impressing our mums by appearing in the national press, it's also demonstrated again how a paragraph that makes perfect sense to those of us making the product can look like gobbledegook to everyone else. Anyway, we thought it might be useful to offer up a translation, and perhaps explain a little bit about Barlesque along the way.
First, the email snippet in question:
As you may be aware from the Barlesque mailing list, on May the 13th we are going to roll out a change to the Barley implementation used by DNA services in order to align it with the new global visual language being used across bbc.co.uk. This change will be carried out by the DNA team and will require no work on your part... See the attached PDF for details of the change ['Barley toolbar update - aligning legacy UK toolbars with the new visual language standard'].
All clear? Well, we think so...
Barlesque is bbc.co.uk's new web page layout system. Without getting too technical and boring everyone to death (I'll save that for a post in our forthcoming developer blog), that means the masthead at the top, the footer at the bottom and some of the underlying setup of every new page appearing on the site, for example on the new Doctor Who site.
Barlesque replaces a system called Barley* (hence is Barley-esque - aha), which was designed and built just after the millennium and is used on hundreds of sites, including this one. Barley was a great product for its time, but it uses some really outdated technology. ( support? layouts? Nowadays that's comparable to using wattle and daub to build a house.)
Another thing Barley does is use technological restriction to enforce consistency of design [Still with us? - Ed]: the page content is nestled inside a big HTML table with a limited set of widths, the navigation has a particular structure to its HTML, and so on. One of the main lessons learned since (as taught to me by , its original lead developer) is that if you try to restrict designs like this, they will find new and unintended ways round your roadblocks - "Nature finds a way" as .
And that's exactly what happened to Barley: In updating it last week (to make it more visually consistent with Barlesque), we've counted literally dozens of variants and half-copies of Barley that sites have been forced to make over the years (including one on our DNA platform** to which the Birtspeak column refers).
This causes a huge maintenance headache for us techies, so when the UXD (User Experience and Design) team devised a new for bbc.co.uk (as discussed when the News and Sport redesign launched), we set out to build Barlesque to be as simple and flexible as possible in its implementation.
We launched the first version two months ago, and, while we're still improving it, it already includes:
- , and - so it contains less code and is more accessible than its predecessor.
- Support for many languages, useful behind the scenes technical tools and visual customisations. (Teal-coloured navigation? No problem. White footer? Sure.) That said, it also has...
- A shallow learning curve for developers, since it works off-the-shelf, with none of the display configuration set up.
- Easy implementation for Indies (the source of many of the Barley variants) since it only requires one line adding to the Apache configuration to get going.
- Finally, the ability to deliver other pan-bbc.co.uk systems, such as user authentication, and surveys, which in turn makes them easier to implement and maintain too.
Bundle this all together, and we think that Barlesque effectively removes the need for sites to make their own copies of the layout system. That means greater technical and visual consistency, quicker updates, and best of all, frees up precious developer time to work on more exciting things!
At least, that's the plan - watch this space.
*And as for Barley, that was named after a character from Charlie Brooker's spoof listings magazine TV Go ±«Óãtv, which gave rise to a Channel 4 sitcom called... .
**DNA is the system we use to power our messageboards and several of the ±«Óãtv's other community-based sites like H2G2; the names DNA and H2G2 are derived from .
Mat Hampson is Senior Client Side Developer, ±«Óãtv FM&T Intrernet Group.
Comment number 1.
At 20th May 2008, richardhodgson wrote:That's awesome Mat.
Also, DNA powers the comments on this very blog post! :)
Complain about this comment (Comment number 1)
Comment number 2.
At 20th May 2008, Josh wrote:Hi Matt,
Congrats on getting into Private Eye. :)
I spotted the new masthead earlier in the week, and was a bit surprised. It seems to resemble Barlesque rather than actually being Barlesque; it's smaller; the "Explore the ±«Óãtv" button links straight to the A-Z, rather than bringing up the popup; the Text only and Accessibility help links aren't in the same place; there's no Barlesque footer; the alt text for the ±«Óãtv logo is different, and the word "±«Óãtv" is placed next to it, for some reason.
I know I'm probably being overly pedantic (sorry!), but I'd thought it would be better to stick with the legacy masthead until a fully-functioning Barlesque masthead is ready rather than potentially confusing site users with a masthead which pretends to be Barlesque but functions differently.
[/whinge]
Anyhoo, it's a good start! Best of luck fully rolling it out in the future. :)
Complain about this comment (Comment number 2)
Comment number 3.
At 21st May 2008, dennisjunior1 wrote:Good job on the promotion!
Complain about this comment (Comment number 3)
Comment number 4.
At 21st May 2008, SteveFarr wrote:Great job ur doing here Mat.
A few things i'd like to see:-
- More consistency across the main site areas. Some of those front page customizations made available everywhere so we don't have to keep flipping back to the home page.
- A better watching-while-reading experience. Maybe a fixed embedded video window - staying put while scrolling down through content. (I like the one on the Yahoo tech ticker).
- A more integrated article and blog experience. Blogs and articles in the same space, so we can comment on everything.
- Blog comment rating (Digg style?). You kind of have this on "Have Your Say". This is an area in need of some real innovation. It would be nice to be able to sort comments on recommendation or relevance for example. Maybe also do something that latches onto twitter-style "rules" for threading/linking replies together in some fashion.
Build it and they will come. Keep up the good work!
Complain about this comment (Comment number 4)
Comment number 5.
At 22nd May 2008, Mat wrote:@saxsux: You're completely right, Barley only got a simple reskin to make it look a bit more like Barlesque. The problem is the 2m legacy pages built using Barley: Given Barlesque's centring of the page, increased width, floating navigation panel and a host of other things behind the scenes, migrating those pages is not really an option.
However all new pages will use Barlesque, and there's a number of large sites planning redesigns to take advantage of its features, so for most of the site the inconsistency won't last long, and at least in the meantime we avoid the jarring visual difference.
@SteveFarr: That sounds like an easy morning's work - I'll see what I can do...
Kidding of course ;-) but they're all interesting suggstions, and indeed some do match with various plans that the relevent teams have: DNA, iPlayer, Blogs and the overall visual language are all under active development, so as I say: Watch this space...
Complain about this comment (Comment number 5)
Comment number 6.
At 15th Jul 2008, blitz99 wrote:Intrernet (sp)
Is it Birtspeak, or am I being pedantic?
Complain about this comment (Comment number 6)