Back to News for Developers

How 'For The Win' Designs Great Sports Content on Instant Articles

March 13, 2017ByWill Bleakley

For the Win (FTW) is a digital publisher, run by USA TODAY, that covers viral sports moments from the fan's perspective. The site focuses on social media not just as a distribution channel, but as a driver of content. Its articles are a mix of Twitter, Facebook, Instagram embeds, short sports clips, gifs, photos and slideshows built around written content.

FTW began publishing all their articles as Instant Articles more than a year ago for two reasons. The first was to give its Facebook audience a better reading experience by decreasing load times on its media-heavy content. The second was to use the platform's sleek design environment and style tools to create better looking articles.

We'll take a look at the ways For The Win editors formatted their articles to create more seamless sports content.

How To Build Your Instant Articles Like For The Win

Develop a Strong Visual Identity Using the Style Editor

Instant Articles offers a powerful style editor that gives editors and designers greater control over the look and feel of their articles. In the article above, you can see For The Win built a visual identity partly by applying their signature color red across the byline, outbound links, and like button. They've also utilized styled captions for photos as well as block quotes — both of which can be customized further within the style editor.

Best Practice: Explore all the features of the style editor, especially the design of your pull quotes, block quotes, headers, captions and body text, to help set your brand apart. Learn more about what our new style editor can do.

Include Eye-Popping Interactive Photos and Slideshows

Because any photo loads immediately in Instant Articles, For The Win makes sure to include high-resolution images that look even better when zoomed in. They are also interactive by default so that a reader can tilt their phone to look around, and get different perspectives. The publisher also takes advantage of the native slideshow feature as well our social feedback buttons, which lets readers react to, comment and share any media item in an article.

Best Practice: With instant load times, there's no reason not to include the highest resolution version of your photos. Use this code to insert slideshows into your articles, learn more about your options for images and find out how to turn on feedback buttons on all media items.

Properly Embed Tweets, Posts and Gifs

Embedded media from Instagram, Facebook, Twitter, Instagram, Snapchat and YouTube make up a significant portion of For The Win's articles. Check out the article above and see how embeds fit seamlessly into the Instant Articles environment.

Best Practice: Consult our documentation page on interactive embeds to make sure you're formatting your third-party embeds correctly.


Tags: