A real-time mobile site for soccer fans

As World Cup fever gripped the planet, ESPN FC partnered with the Internet Explorer (IE) team to draw on the power of the web and IE to deliver coverage to this mesmerized audience. The mobile-optimized site it created, ESPN FC World Cup Essentials, was a reliable reference for all soccer news and information throughout the tournament. The hub detailed the history of the World Cup since its start in 1930 and contained information on each match as well as specifics on the participating teams, bringing it all to life with 3D artwork. The site also drew soccer-savvy fans to ESPN FC for editorials and commentary on the games.

The developers built a savvy site that promotes the web’s capabilities. It used Ember.js to develop the site and WebGL to feature the 3D artwork. CSS transitions and animations are used when navigating between pages, and the site is backed by a Django REST API for up-to-date match scores. To render details such as team names, matches and scores in WebGL, the site’s creators drew the text on a 2D canvas and then used that canvas as a texture in WebGL. Users share content from the site on Twitter or Facebook.

Each day throughout the tournament, 30,000 Instagram photos were submitted to the site to be approved for its “Fans & Traditions” section.

9,370

Lines of JavaScript, CSS, HTML and Python code

42,012

Vertices total in all 44 of the 3D models made for the site