Interview: Financial Times Experience with Web Apps

The decision by the Financial Times to launch a Web application made headlines in 2011. I recently spoke with Mary Beth Christie, Product Director, and Dan Skinner, Head of Design about their experience so far.

IJ: How did you get started with HTML5 and the Open Web Platform?

MBC: We launched the iPad native app in April 2010 and were blown away by its success. We had no aspirations for the iPad app other than it work. It was so successful we thought we would have to do this for every device (and there was a lot of hype about new devices). There was no way we could come out with new apps for new devices and new systems at that point. Around the same time we began discussions about creating a Web app. We asked our development people to see if it worked, but then kind of forgot about it until February 2011. We then sat down with our developers and it was amazing. The Web app was doing most of what we needed (e.g,. swiping). There were some questions about offline storage, but we decided it was worth pursuing. We reset our priorities and released the Web app in June 2011. We now have over 1 million users of the Web app. A lot of customers have switched over from the native app.

IJ: How is user experience different?

DS: The Web app and native experiences are very similar. We had set out to mimic the native app and make the transition to the Web app seamless. Although it was tricky to achieve precisely the same quality (e.g., access to apis), we quickly got very close (say, 80-90% the same user experience). We have since stopped development of the native app and are aggressively developing the HTML5 version.

IJ: What characteristics of the Web app approach stand out for you?

DS: You don't have to download anything; you just visit the Web. Faster start-up provides an improved user experience. You can download the app icon to the homescreen too which can then enable offline caching.

MBC: Some other benefits: marketing is easier. You can just say "Visit app.ft.com." Development times have gone down, it's easier to debug problems and deploy fixes, and we have shortened release cycles.

IJ: Did anybody notice the difference?

MBC: We've had super positive response from users overall. But the experience is so close many people probably did not recognize the difference. We resolved some glitches from the initial release and now things are running smoothly.

IJ: Do you see value in staying in stores (e.g., to reach more customers)?

MBC: We have discussed this but have concerns about supporting diverse versions of the app. We don't know enough about the testing costs. In theory, it sounds like a great idea to have multiple versions but in practice you need to test and bug fix for multiple devices. Having a generic app that can be used across several different devices is more cost-effective. And because there is more consistency across devices, this is less confusing to users.

IJ: One thing we've talked about lately is how the Web platform lets you link devices in new ways (see the blog post from Dominique Hazaël-Massieux). Have you looked at any multi-device scenarios for the Financial Times?

DS: We have looked into the TV angle a bit. Until recently that market has been small, but now there is an explosion in smart TVs. In theory porting TV is a simple matter of a new style sheet. But in practice we would have to treat it like another platform. It will be interesting in the future, however.

IJ: Did you change what content you offer when you switched to HTML5, or are you planning to add, say, more video?

DS: Not really. We already have significant video content that app users appreciate.

MBC: While video is an important avenue, it's not going to take the place of text any time soon. We are not a broadcasting house.

IJ: What pieces of the stack are missing?

DS: We would love to see notifications.

IJ: We may have some work going on in that area; see Web Notifications.

DS: There are quite a few things where we had to work to reach parity with the native solution. For example, for proper caching we ask the user (via a dialog) to extend the memory of the device. For swiping interactions, we had to do a lot to make it smooth.

IJ: Did you use any framework or libraries to help out?

DS: We looked at a number of those tools but in the end we pretty much wrote things from scratch.

IJ: Do you have other apps you plan to convert to HTML5?

MBC: We have an app for our magazine "How to Spend It" that we would like to convert to HTML5. However, there are some challenges. It is rich in gorgeous images. We've encountered some performance issues.

DS: Those assets are large and that has an impact on the smoothness of the experience. Ultimately we would like to emulate a glossy magazine.

IJ: Does typography play an important role in your apps?

DS: Interesting question. We do use certain typefaces in our apps, but we don't use them on the Web site. Custom fonts on the Web have been tricky until about a year ago. On platforms with well-understood capabilities (e.g., the iPad) it would be unusual not to use custom fonts.

DS: An area of interest to us has to do with online charts. You expect two features: vector graphics and interactivity.

IJ: Are you using SVG for vector graphics?

DS: Not yet. We use raster images but I would like to see us move in the direction of SVG. We really value interactive graphics. We have a lot of flash interactives on the site (e.g., to demonstrate timelines, to implement slide shows) We've not yet found a way to translate them. I think it is primarily a workflow issue. The tools aren't there yet for producing several HTML5 charts a day. But we'd love to get there.

IJ: Any other things you would like to share?

DS: One overarching theme is the "write-once deploy everywhere." We have really found HTML5 useful for that. However, it's not as easy as it could be. There are still browser interoperability issues. It takes a lot of fine-tuning to achieve a polished experience on multiple platforms.

IJ: Can you design for big classes of devices (for example "big screen," "tablet," and "mobile") and then refine from there?

DS: That's true, you have to cleverly work out some core layout options first, for example related to number of columns or pixel density. But even once you've done that you still run into issues such as "people who use this environment expect desktop icons to appear in specific positions." So for the best experience, you need to do more than tweak your CSS. You have to treat it like a different product.

DS: HTML5 offers a huge advantage, but in the end it still requires work. The degree of work depends in part on the nature of the app. For example, our text-heavy app requires a lot of alignment. It is also the case with more features (e.g., caching) that there are fewer examples out there to compare.

IJ: Thank you very much for your time!