The Financial Times has this week launched a redesign of its award winning web app, created and developed by the FT’s product, design, web development (FT Labs) and editorial teams. Here they talk through the technical challenges and opportunities of developing the app.
What are the benefits of developing an HTML5 app?
HTML5 is unique in that it supports interoperability between devices and platforms, meaning we can use the same code base to support the FT app on iOS, Android and Windows 8, plus the desktop version of Google Chrome (although this isn’t currently available to the public). By pushing the boundaries of web technologies, we’re able to maintain a native-like experience, but not be constrained by a particular app ecosystem. This means we have a direct relationship with our users, are able to release changes without asking people to update and can fix major bugs within hours, rather than having to wait for an app store to approve the latest version. It also means we can extend support to new platforms such as Firefox OS, Tizen and Ubuntu Touch easily.
What challenges did you face while developing a newspaper layout for the app?
One of the key features of the new app is it offers readers a morning edition that mirrors that day’s FT newspaper. To create this we strove to give our users a more newspaper-like style with fixed height, large images and different editorially controlled layouts on different section pages, without being restricted to having a specific number of articles per page. Initially we turned to new standards such as flexbox, but found this wasn’t currently performing well enough on mobile devices to meet our requirements. In the end we had to do a lot of custom development rather than relying on some of the newer standards, in order to achieve the desired level of presentational control and maintain the level of performance that our users expect.
As the new app contains more images and we wanted to be able to support high resolution devices, optimising pictures was essential in order to keep loading times down. We adopted a single image workflow where we consume a high-resolution master image, then dynamically resize and compress it on the server. This means we can serve an appropriately sized image based not just on screen resolution, but also where the image is used in the app.
Any challenges/insights from developing full page ads and ads on article pages?
As the FT’s advertising platform allows us to target ads to different groups of users, we have to be able to load a variety of adverts dynamically. Full-page ads can take a while to download over the network, so we monitor people’s connection speed and preload the adverts before the user swipes to them. This ensures that the loading and rendering of ads doesn’t have a negative effect on the user experience. As an essential part of this, we had to rework some of our analytics to ensure that an advert impression was only sent when (and if) the advert was actually viewed, and not when it was preloaded.
What can you tell us about the development of the new personalised section, My FT?
Personalising a user’s experience is one of the most significant advantages that digital platforms have over traditional print media. However, we’re aware that our readers value strongly the FT’s curation of content, making it important to delineate what is personalised and what is editorially controlled. My FT gives a clear hub for personalised content, offering users bespoke “recommended reads” based on their reading habits, the ability to “clip” articles or special sections into one place, and the ability to view the performance of their portfolio.
What’s next for web apps?
Developing web apps still has significant challenges, and we have to continue to push the boundaries of web technologies in order to keep up with native applications. At FT Labs we are passionate believers in the web and continue to share our learning and experiences with the development community, through tutorials and blogs on our website, open-source projects hosted on GitHub and hosting events such as EdgeConf, organised in collaboration with Facebook and Google.