Innovation @ BBG » World Cup Fri, 20 Nov 2015 18:47:05 +0000 en-US hourly 1 Creating responsive graphics and streamlined images for VOA’s World Cup coverage Thu, 14 Aug 2014 14:44:18 +0000 Brian Williamson 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 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.

]]> 0
Metrics Rule: Data Learnings From VOA’s 2014 World Cup Coverage Thu, 31 Jul 2014 18:23:29 +0000 Randy Abramson In January, 2014, ODDI and the VOA French to Africa team set the wheels in motion to build a responsive site aimed at the young, mobile enabled African demographic that would tell the story of the World Cup in real time through game scores, lineups and live play-by-play commentary, as well as through shareable animations, illustrations, video, and text commentary. We also put together an extensive marketing plan to help spread the word about the site and we were committed to react and pivot according to metrics that we were monitoring regularly. What follows are some of the lessons we learned along the journey through the group stages, the quarters, semis and finals of the 2014 games in Brazil. (Note: the site is live at and we also created a sister site for VOA English at

Project Goooooooaaaaalllllsssss!

Our data showed high mobile usage of our VOA apps and Web properties across Africa, so our main goal was to create a site that would be optimized for a range of phones and tablets. However, our data also showed us that device type and bandwidth capabilities varied widely throughout Africa, making it hard to target a single experience that would work for the entire region. Additionally, this effort marked one of the first forays into a dedicated site that focused on sports for VOA. With that in mind, we knew that there would be questions whether non-smartphone users with ‘pay as you go’ plans would be willing to use their hard earned money to view World Cup coverage on their devices. Still, the team was determined to create a digital property that loaded quickly and would be flexible enough to optimize for display on low-end mobile phones, as well as on higher-end mobile devices and desktops. Another key goal for the team was to focus on creating shorter, non-traditional news content (examples: memes, illustrated stories, fan badges for Facebook pages, etc.) that would appeal to active sharers on social networks.

Surprise! Desktop and Ethernet/Wifi Users Dominate

Based on our research, we knew that a large amount of mobile use in Africa comes from low-end phones that can’t render java script or rich multimedia elements. We did see a surge of visitors at the beginning and end of the Cup coming in on “unspecified devices,” which we interpret as low-end mobile devices, but we were surprised to see that the majority of the visitors throughout the Cup saw the sites via Windows desktop machines or higher-end Android/Nokia devices. Although we do see big consumption of our standard VOA news mobile web site on lower-end devices, the trend did not hold true for our World Cup offering as these devices were outnumbered by desktop and higher end phone/tablet users by a ratio of about 3:1. We also saw that 70% of the users coming in from Africa used LAN/WiFi connections, but it is important to note that LAN/WiFi connections overseas may not match the high speeds that we are accustomed to in the United States. Connecting to LAN/Wifi might be attractive for low-end users because it doesn’t eat into data plans, but the experience may still be slow due to massive network sharing. Knowing that we were catering to a plethora of user capabilities, we adjusted our content strategy by offering a mix of media formats that would match our users’ varying levels levels of device, platform and connection sophistication.

Marketing Paid Off Big

Another key strategy for the team was to leverage the radio, TV and digital programming that we controlled to market the our World Cup property.  We partnered with VOA’s Creative Services team to create :15 and :30 radio, TV and digital platform ads that would promote the World Cup desktop and mobile Web site. Those ads (see video promotional spot below) ran over 200 times on French and English speaking air during the duration of the campaign. Since 35% of all visits to the site came from users who manually typed in the site URL, we can assume that the advertisements were effective. Additionally, lower third animations ran in VOA TV programming throughout the Cup and drove additional visits. We were also very pleased that our Google AdWords performed with a high engagement rate of 1.9%. Our search engine optimization preparations also helped drive referral traffic to the site, which grew as the Cup went on. In total, Google was responsible for 17% of our referral traffic.


Team Up And Be Relentless On Social Platforms

Facebook is very popular in Africa, so succeeding on that platform was a huge priority platform for our team. Facebook provided not only a place for us to promote our most recent editorial offerings, but it was also an area to interact with our users, test out new content types and get instant feedback.  In the end, Facebook was our biggest referral site, accounting for 35% of the overall referral visits. On a daily basis, and sometimes in real time, we monitored performance reports and adapted to drive our Facebook engagement higher. For example, we saw early that posts with photos drove more engagement than text based posts, so we posted more photos. We then noticed that our photos, when clicked inside of Facebook, simply opened a larger version of the photo instead of sending users to our site. Since the photo is the largest ‘hit’ area, we worked to ensure that visitors went to our site when they clicked on photos inside of Facebook. When engagement and ‘likes’ of our Facebook page began to flat line, we reached out to Brila.FM, the VOA News FB page, Sonny from Sonny Side of Sports, and the Indonesian and Khmer Facebook teams to help amplify our messaging and drive users to our Facebook properties. We also began to repeat some of our Tweets in case users might have missed our original posts and researched the best time to engage with our users, which turned out to be before and after the live matches. Still, we did see that as the World Cup went on, we were seeing less and less traffic from Facebook which we assume was because: a. the African teams were eliminated from the Cup and b. more and more World Cup content began to flood Facebook feeds and Facebook’s algorithm might have put our content at a lower priority, making it invisible to followers.  The big lesson learned here is that going it alone on any social platform is difficult. Looking at this great read from Marketingland, you realize how few of your followers actually see your posts on social platforms, so teaming up with others to help amplify your message is essential.

A Like Could Be As Good As a Page View

Our team tried hard to create content that broke out of standard news reporting and we were delighted to see ‘non-traditional’ content get the most likes and shares of all of our offerings. A surprise hit was the ‘like this if you’re rooting for…’ image badges that were produced by our graphics team. These badges resonated with our users on social platforms in a visceral way: users saw a striking image of the team they were rooting for and liked/shared that content.  News organizations normally fixate on page views and time spent, but we began to appreciate likes and shares as a parallel metric to measure user engagement.

Like if you're rooting for Argentina!

An example of the fan badges we created that performed well on social media platforms.

Beyond the World Cup

The World Cup project provided so many learnings, but in no way do we see these lessons set in stone. Mobile device pricing is constantly falling, making more and more smart devices available across the African region for lower cost. Efforts like Project Loon could make higher speed connections available in remote areas. And who knows what the next developments on social platforms might be? In the end, despite all of our research and preparations, it was our ‘learn as we go’ philosophy that helped us to adapt to user capabilities and desires that made the project successful.

]]> 0