Creating responsive graphics and streamlined images for VOA’s World Cup coverage

voa-football-responsive-graphics_photo

For the French and English VOA World Cup sites, we wanted to create a lean, minimalist site. Through the use of progressive enhancements and responsive design we added features to provide an enhanced experience for phones, tablets and desktop browsers. What follows is a description of some of the techniques we used to optimize the World Cup sites.

Using progressive enhancements and SVG (or: How i stopped worrying and learned to love <tables/> )

Who scored when? How many saves did the goalkeeper make? How many shots on goal per a game did a player make? How many of those were successful? Statistics and graphics are a core feature of most sports coverage.

We experimented with a number of approaches for creating graphics for the World Cup. We explored NPR’s fork of ChartBuilder, for converting tabular data into SVG graphics with image fallbacks. We used DataWrapper, a tool that creates responsive graphics embedded via an iframe. Both tools work well for quickly creating one-off graphics.

But because of the tremendous range of devices used across our target market, we couldn’t be sure if (or how) the browsers would support Javascript, CSS or SVG. Ultimately we decided to create a custom solution, using D3.js and borrowing the progressive enhancements approach described by the Filament Group.

We started off by converting Opta’s XML data into a standard HTML table and sending that to the browser. This tabular view was a perfectly valid way of reading and exploring the data. (We actually relied on HTML tables for many basic design elements, because modern CSS techniques created inconsistent results across older, archaic and obscure devices.)

If the device supported Javascript, we could use that data to create a graphic (e.g. a simple bar graph). If the browser supported SVG graphics, we used D3 to bind the data and create the SVG.

I was really inspired by Ryan Pitts’ talk at NICAR 2014 on creating responsive graphics for censusreporter.org. The charting library we created creates responsive graphics based on the width of the browser. If the user resizes the browser, the graphics on the page will be resized.

Because D3 isn’t strictly an SVG-based tool, we could bind the data to almost any HTML element. If the browser didn’t support SVG, we attempted to create an alternate form of the graphic using a somewhat bastardize technique of drawing the bars and labels with an HTML table.

Two JPEG photos of Lionel Messi from VOA football, comparing download sizes.

Streamlining downloads

In addition to creating responsive graphics, we took several simple steps to optimize the site and reduce the overall page weight.

Adaptive images: We used a Javascript solution for downloading the appropriate sized images. The initial images that are downloaded with the page are low-res thumbnail images. If the browser supports Javascript, we check the browser size and then replace the initial image with an image tailored to the size of the window. For comparison, the desktop version of this photo is 156kb, while a 400-pixel mobile version is only 29kb. Multiplied for posts with multiple images, this optimization resulted in tremendous bandwidth savings.

Lazing loading videos: Most video players automatically download additional Javascript and CSS files whether you watch the video or not. We installed a WordPress plugin to add lazy loading support for YouTube videos. When the page initially loads, the plugin displays the YouTube thumbnail image of the video. The user taps or clicks on the image to load the Javascript, CSS and video. This results in a savings of 300 – 1000kb.

Animated GIFs: Those small, pixelated animated loops of cats can actually be fairly large files (particularly for clips created from video footage). We used a similar approach for animated GIFs as we used for video. For the initial page load the user downloads a tiny static JPG image. If the user taps on the image, jQuery replaces the .jpg with the animated .gif file.

In addition, we also tried to optimize the GIFs by simplifying the color palette, reducing the size and reducing dithering. In some instances, an MP4 video would result in a smaller file size than an animated GIF. And for some very simple animated graphics, we loaded the GIF directly without the need for user action.

Planning versus execution

By using a mixture of server- and client-side solutions, we tried to tailor the site to the technical and bandwidth needs of the audience. But the realities of producing a news site with a diverse group of journalists scattered across multiple newsrooms sometimes undermined those efforts.

Third party embeds of tweets, photos and large Storify iFrames, occasionally resulted in enormous, multimegabyte posts.

Future efforts will need to recognize the importance of continued training on best practices in coordination with any technological solutions.

The following two tabs change content below.
Brian Williamson

Brian Williamson

Brian Williamson is the senior UX designer for the Office of Digital & Design Innovation. Follow him on Twitter: @drawinghands.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *