Βι¶ΉΤΌΕΔ

Β« Previous | Main | Next Β»

Barlesque: Going responsive

Post categories: ,Μύ

Dan Forys Dan Forys | 12:15 UK time, Thursday, 15 November 2012

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 Βι¶ΉΤΌΕΔ. One of those frameworks is Barlesque.

Ostensibly Barlesque is the header and footer of most Βι¶ΉΤΌΕΔ 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 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 caches or even a (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 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 Βι¶ΉΤΌΕΔ 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:

- to help us manage our cross-browser 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 , Eric Myer's and the work done by our very own . 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.

- to provide modular Javascript loading across the Βι¶ΉΤΌΕΔ. This is how we load JQuery and Barlesque's Javascript enhancements.

- and 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.

Comments

Μύ

More from this blog...

Βι¶ΉΤΌΕΔ iD

Βι¶ΉΤΌΕΔ navigation

Βι¶ΉΤΌΕΔ Β© 2014 The Βι¶ΉΤΌΕΔ is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.