We’ve built a new interactive detailing the British soldiers who have lost their lives in Afghanistan. This was originally planned to be included in Release 102 but was unfortunately launched a little too late to be covered in the original blog entry.
Previously, a similar Flash-based application was launched but here we have recreated it using JavaScript and HTML for a couple of different reasons.
The original Flash version fetched data from an XML document. The updating process was fairly long-winded, requiring a developer to update the XML then upload it along with new images. Now, journalists can update a public Google Spreadsheet and use existing editor tools to upload appropriate images. They then publish the spreadsheet and the application fetches a JSON object from the spreadsheet’s Atom feed on page load, resulting in live updates with no involvement from anyone on the development team.
As has been well documented, Apple refuses to support Flash in its mobile devices, citing issues with memory leaks and stability. An ever increasing number of Guardian users access content with mobile devices so, in an attempt to reach these users, some of the less complex interactives are being ported from Flash into HTML. The new version displays on Apple mobile devices and is currently undergoing further optimisation for all touchscreen devices to support touch events such as swipe and to use CSS media queries to allow different layouts with portrait and landscape orientations.
The JavaScript used is fairly straightforward; get data from the Atom feed and parse it to create the markup. We have a JavaScript carousel object which controls the pagination and use lazy loading to display the full size image of the soldiers to try and cut down on the number of initial HTTP requests. The jQuery autocomplete plugin is used for the client side search but required a bit of adaptation for our needs here – mainly because the search functionality doesn’t use a submit button. Some further work is required here to better support touch devices.
As with all Guardian content, the interactive works in all our supported browsers with a few minor concessions for visuals and performance in older versions of Internet Explorer.