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.