Hello I'm Dan Forys a software engineer in the Future Media Platform team. I work in a small team dedicated to front-end frameworks and libraries used by the rest of the BBC. One of those frameworks is Barlesque.

Ostensibly Barlesque is the header and footer of most BBC web pages. In reality it's a framework providing global templates, styles and modules.

It currently provides three main versions - a 'Legacy' version for older pages, a fixed-width desktop version and a mobile version - 'Mobilesque'.

Mobilesque

Today, delivering two different versions of a page for mobile and desktop is not always desirable. There is a development overhead to creating and maintaining two different codebases and users don't want to learn different interfaces on different devices.

Also, increasingly there is no clear delineation between what constitutes a mobile device and a desktop device. Supplying a 'desktop' experience with a (normally) higher download weight to a netbook on a train with poor connectivity might be a poor experience, even though it is equipped with a desktop-grade browser.

Similarly, a connected TV - whilst not physically mobile - might have poor browser support for a desktop-grade experiences.

As a result there are many teams now working on device-agnostic responsive products and Barlesque has to work in a similar way.

Because Barlesque is the 'glue' that binds the page together with every other team's products we need to be one step ahead to deliver optimal experiences, whatever the device.

With this in mind a few months back we started developing a new version of Barlesque - codenamed ORB - or 'One Response Barlesque'. The One Response referring to our goal of having a single, cacheable response that will be quick to load on slow devices and connections.

Get ready

Having one response is especially important when pages are delivered through Varnish caches or even a Content Distribution Network (CDN). If we delivered a different masthead for different devices we would need a cached copy for every single variation - potentially making the page completely uncacheable and therefore every request hitting our servers.

We decided to take a 'mobile first' approach. This means we'll deliver the minimum possible code to the browser and then enhance that code on larger screens and more capable devices. The benefit of this is that we don't send code to devices that can't use it.

This meant we had to throw away some of the existing behaviours of Barlesque - no more loading of JQuery on every page for example!

ORB has a new, smart menu at the top. As the width of the browser decreases menu items drop out and become part of a bigger drop-down menu.

Similarly, as width increases, items pop back into the main menu. This behaviour isn't tied to any text size or particular width, ensuring that any unusual or future screen sizes will still be catered for. At very small widths the search box and BBC iD button collapse into icons.

Tabs for the smart menu

In-page there's a new (optional) responsive grid in development by our UX team. There's also a fluid footer which flexes to any width like the header.

I'll go into more technical detail in future posts - but for now here's a summary of some of the techniques and libraries we're using:

- Sass to help us manage our cross-browser CSS rules. We have different stylesheets for some browser widths and early versions of IE. Sass compiles these into regular CSS files.

- CSS rules based on great work in normalize.css, Eric Myer's Reset CSS and the work done by our very own Responsive News team. Our new rules are optional and designed to be very lean. This will allow products to design as they wish without being constrained to overzealous reset rules or a fixed-width column - both problems with the current Barlesque.

- RequireJS to provide modular Javascript loading across the BBC. This is how we load JQuery and Barlesque's Javascript enhancements.

- JSHint and CSSLint to help maintain code quality. Every time we commit to our code, we run these tools to make sure we conform to various coding standards.

Right now we're busy porting over some internal libraries around cookie privacy opt-outs, statistics gathering and a way of getting user feedback. We're also testing like mad on as many devices as we can get our hands on. Hopefully you'll start to see the first ORB sites rolling out in the very near future.

Dan Forys is a software engineer in the Platform team in Future Media.

Tagged with:

Comments

This entry is now closed for comments.

  • Comment number 10. Posted by Alain Mostert

    on 17 Jan 2013 13:54

    @Russ - think pre-loading the content is probably a more efficient solution rather than making multiple calls to the server. If anything it might be better design to preload the style completely before loading the content (that way you wouldn't see the full text flash up beforehand).

    • This entry is now closed for comments. Number of positive ratings for comment 10: 0
    • This entry is now closed for comments. Number of negative ratings for comment 10: 0
    Loading…
  • Comment number 9. Posted by orchidgrey

    on 14 Jan 2013 06:27

    This comment was removed because it broke the house rules. Explain

  • Comment number 8. Posted by Russ

    on 26 Nov 2012 14:36

    The 'show more'/'show less' toggle on programme pages is really infuriating, especially because the full text flashes up for an instant before the script kicks in to show the default truncated version. Seems to me to be a pointless script overhead in loading a page. Sometimes the 'show more' consists of only one extra line.

    Russ

    • This entry is now closed for comments. Number of positive ratings for comment 8: 0
    • This entry is now closed for comments. Number of negative ratings for comment 8: 0
    Loading…
  • Comment number 7. Posted by Henry Bemis

    on 26 Nov 2012 13:06

    Nice. The new smart menu looks very much like the Android Action Bar. It's a concept that I think works very well. Nice work and thanks for the post!

    • This entry is now closed for comments. Number of positive ratings for comment 7: 0
    • This entry is now closed for comments. Number of negative ratings for comment 7: 0
    Loading…
  • Comment number 6. Posted by Dan Chambers

    on 22 Nov 2012 16:02

    Great post Dan, I particularly like the point you raise about there being no clear delineation between what constitutes a mobile and desktop device.

    Would be good to hear your thoughts on taking ORB up to a TVP/HD experience and what that might mean in terms of implementation and level of complexity in terms of interaction methods? (remote control, keyboard, iPad/iPhone, kinetic input etc.)

    Thanks,

    Dan

    • This entry is now closed for comments. Number of positive ratings for comment 6: 0
    • This entry is now closed for comments. Number of negative ratings for comment 6: 0
    Loading…
  • Comment number 5. Posted by Nick

    on 18 Nov 2012 18:12

    This comment was removed because it broke the house rules. Explain

  • Comment number 4. Posted by Dan Forys

    on 15 Nov 2012 18:36

    Hi Mo - Yes, full webservice support. It's already up and running actually!

  • Comment number 3. Posted by Mo McRoberts

    on 15 Nov 2012 17:33

    I should probably already to know the answer to this, but will you be able to get the responsive Barlesque when using the webservice?

  • Comment number 2. Posted by Nikos Tsouknidas

    on 15 Nov 2012 13:55

    Thanks for the post Dan; best sum-up of all the work we've been doing.
    Get excited, it's coming.

    • This entry is now closed for comments. Number of positive ratings for comment 2: 0
    • This entry is now closed for comments. Number of negative ratings for comment 2: 0
    Loading…
  • Comment number 1. Posted by Mark Stickley

    on 15 Nov 2012 13:18

    Nice work. Too many responsive designs and implementations are actually just adaptive to fixed breakpoints and conditions. It looks like this covers all bases & setting a fine example!

    • This entry is now closed for comments. Number of positive ratings for comment 1: 0
    • This entry is now closed for comments. Number of negative ratings for comment 1: 0
    Loading…

More Posts

Previous

Next