The Hunger Games Interactive Website: Cutting-edge Web Technology

Internet Explorer hits the mark for web engagement with The Hunger Games Explorer.
The film adaptation of Catching Fire, the second in the Hunger Games trilogy, doesn’t come out until November. But Internet Explorer partnered with the Games web team and RED Interactive Agency to give fans an edgy, interactive online portal that gives them everything they need to whet their appetite while they wait.

Hunger games website screen shotThe team built this site on some of the very latest web technologies, and it’s especially designed for the touch-screen, tablet experience. There’s all the regular stuff, like trailers and exclusive photos, but there is also content to keep users coming back. Fans can sign up and get their own District ID, and go behind the scenes on the making of the film via this futuristic online content portal.

The team took special pains to ensure the technology lives up to the demand for excellent user experience. This comes across in the responsive grid layout designed to be just as engaging no matter whether the user is on a mobile phone or tablet. “Taking a mobile-first approach [to back-end design] allowed us to ensure we used a single code base across multiple platforms and devices,” the behind-the-scenes website reveals. The grid was built using JavaScript.

The entire portal is designed around driving home this concept of the fast-paced, user-driven interface, providing a platform that is connecting young fans across multiple social networks at the same time. The grid design also provides another crucial, cutting-edge component: individualized experiences, made possible by an endless combination of filter and sorting options.

3D CSS capabilities ensure that blocks move easily as they are dragged and dropped, and no blocks span the gutter to provide a finer aesthetic experience overall. They also used CSS3 Transforms optimized with requestAnimationFrame to create seamless animations that remain consistent across browsers and devices.

The goal is to have users feel as if they are using a sleek, futuristic interface — reminiscent of something they might be using in the Capitol, perhaps?

What’s most exciting about this interactive platform is its ongoing, living nature. The team sees it continuing to grow along with its audience. The most successful and effective platforms and web apps are those that ultimately continue to expand and adapt to meet the evolving needs of the users.

As we work to develop and expand upon our own innovative, interactive dashboards and HTML5 web apps, we’re keeping a close eye on creative projects like this.