The Times Infographics

Read the case study

Interactive HTML5 infographics for iPad.

Client: News International

Year: 2010/11

Technologies: HTML5, CSS3, SVG & Javascript

Platforms: Web desktop & mobile

When News International launched the iPad edition of the Times in 2010, they were eager to take advantage of the interactive, touch screen format to offer readers new ways to consume the news and better understand the stories. They approached Applied works who, over the course of 2010 and 2011, delivered several interactive projects that ran alongside key news items such as the World Cup, the Royal Wedding and the anniversary of the Battle of Britain.

The first of these projects, The Health of England, is an intensely data rich news story that illustrates the radical differences between the North and South of England in terms of health and health care. Taking full advantage of iOS's WebKit framework, I helped Applied Works create an innovative touch based interface using advanced HTML5 & CSS3 features that were not widely available at the time in desktop browsers.

The iPad had not been launched in the UK at this point, and the only available test units were chained to a desk deep inside News Internationals head office. Ensuring that the iPad could handle the data and interface, alongside the actual iPad app it was running in, required some careful planning and design to keep memory and processing to an absolute minimum.

All the info graphics are self contained HTML5/CSS3 & Javascript displayed inside the Times app via a UIWebView. On one hand this provided us with access a lot of new and exciting features that weren't available in a desktop web environment, but each project also brought with it a unique set of technical challenges that had to be addressed. For example, the Times App itself used a lot of the devices built in memory; when we tested the Battle of Britain project on the device and inside the App, we found it kept crashing due to memory shortages. Javascript does not provide a way to monitor memory usage, and bugs in iOS's Javascript Engine meant we had to be creative with the way we loaded and unloaded images.

Web Fonts were critical to ensuring The Times branding was communicated in a way that wasn't possible on desktops at the time. We worked very closely with the App development team to stay on top of changes to the App and to iOS that directly affected how UIWebViews access and display Web Fonts. Due to the way the App was built, we did not have access to events such as orientation changes and so we created our own implementation using CSS media queries.

Our work with The Times went on to win awards from Design Week and a European Design Award for digital information design. The work was later ported to the web to provide additional content for readers behind the pay wall. Since the projects all made heavy use of advanced HTML5, CSS3 and Javascript features not widely available on the desktop, a whole new set of technical challenges had to be solved.

The Times work is not easily available to view online, but you can find out more about this project on the Applied Works website.