It’s Business Time

There are some things that we need to sort out before we can begin to start moving over tablet and desktop users to the responsive site. Some of these are fun responsive design challenges (getting our navigation to work all the way up to desktop is one of them) some of them are less fun.

Nathan Barley

Currently the responsive site uses a header and footer that we call internally “Mobilesque” made specifically for mobile devices by another team in the BBC, a variation on the standard header called Barlesque. It provides a bunch of standard links and integration with BBC iD.

Mobilesque

The project is named after Nathan Barley for some reason lost to time.

Mobilesque isn’t going to work for the desktop site, but fortunately there is a solution already available. The “BBC Frameworks” team have been working on the One Responsive Barlesque (ORB). You can see ORB in action over at BBC Sport, the Homepage, and many other BBC sites.

ORB

Making it work

ORB does not perform the cut the mustard test, it also currently loads requirejs synchronously which we don’t do. Instead we batch up calls to require *while it’s loading* and then make all the stored calls when it’s loaded to avoid blocking rendering while requirejs loads.

Loading requirejs asynchronously

BBC News Engineer @integralist provides an abstracted code example:

var win = window, doc = document, stack = [];

function loadScript(url, callback) {
    var d = doc, 
        s = d.getElementsByTagName('script')[0], 
        done = false, 
        script = d.createElement('script');      
        
    script.type = "text/javascript";
    script.src = url;
    script.onload = script.onreadystatechange = function() {
        if (!done && (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
            done = true;
            script.onload = script.onreadystatechange = null;
            if (callback) {
                callback();
            }
        }
    };
    
    s.parentNode.insertBefore(script, s); // Find the <script> tag and insert new script above it
}

loadScript('assets/js/libs/require.js', function(){ 
    win.require = win.requirejs; // reset global `require` back to `requirejs`

    require.config({
        baseUrl: 'assets/js/',
        paths: {
            'jquery': 'libs/jquery-2.0'
        }
    });
    
    var module;
    
    // Now RequireJS is loaded we can start processing any calls to `require`
    while ((module = stack.shift())) {
        require(module.deps, module.callback);
    }
});

// Until RequireJS has loaded we'll store any `require()` requests
win.require = win.require || function(deps, callback) {
    stack.push({ deps: deps, callback: callback });
};

/*    Cut the Mustard test:    Serve enhanced experience to capable browsers only    More on <http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard> */
if ('querySelector' in doc && 'localStorage' in win && 'addEventListener' in win) {
    require(['app'], function(app) {
        app.init();
    });
}

A little compromise

ORB fails gracefully all the way down to IE7 and is intended to work on every BBC Online site. “Failing gracefully” in this case is defined as breaking in a way that does not affect the rendering of the page.

So we have conflicting schemes for a responsive site that need to sit in the same page.

The solution is to move both the asynchronous requirejs loading mentioned above and the ‘cut the mustard’ test into ORB. That work will be done by the Frameworks team so it can be shared with the rest of the BBC.

The compromise is that while we wait for this to happen we’re going to take a slight performance hit by synchronously loading requirejs so that we can include ORB right now.