Financial Times: Workshop and Consultancy

Written by Harry Roberts on CSS Wizardry.

One of the first clients I worked with after I’d started working for myself was the Financial Times. When Andrew Betts—Founder and Director of the prolific FT Labs—got in touch about me helping them out with their CSS architecture and development of a UI Toolkit, I was incredibly excited, and rightfully so:

1. What a great client—the Financial Times!
2. FT Labs produce some great (open-source) work—we were big fans of FastClick at Sky.
3. I love the FT as a newspaper—I used to read it a lot when I was studying for my Business Studies A-Level.
4. I was also thrilled to be told that a lot of the FT’s work was based upon a lot of my own articles, talks, and code.

We’re great fans of Harry at FT Labs, his work has had a lot of influence over the CSS architecture of the Financial Times web app.

Andrew Betts, Director, FT Labs

We initially weren’t sure what the extent of our working together might be, so I recommended we start with some on-site consultancy work to help the team get a handle on some of the problems they faced, and how we might be able to solve them. On the day, I woke at 0440 and made my way from Leeds down to the capital to join Andrew and the team at the FT offices in London.

This initial day turned into an intensive, all-day workshop- and consultancy-style Q&A session as Andrew and some of the FT’s core designers and developers fired questions at me. Over the course of the day we’d managed to cover topics including:

• Styleguides and UI Toolkits: How should they be built, what should go in them, how are they updated, what kind of things had we done at Sky to build Aluminium.
• Workflows: Who is in charge of maintaining UI Toolkits, how do changes make their way back into the codebase, how do those changes get propagated back out again?
• Culture and working practice: How do they get company-wide buy-in, how would they enforce and police any standards and guidelines?
• Architectures: How should the codebase be written to accommodate entire projects (they got a preview of ITCSS) and for components that need sharing across products?
• Techniques and guidelines: What coding styleguide and rules should be in place, what techniques and technologies should they use to achieve certain results?

At the end of a long but very fun day, I left the team with a lot of answers to a lot of questions—looking back at the notes from the day, it’s crazy just how much stuff we managed to get covered.