The Hunger Games Explorer

Can't wait for The Hunger Games: Catching Fire to hit theaters? Be the first to get in on the action at the Hunger Games official website: The Hunger Games Explorer.

The Hunger Games partnered with Internet Explorer and RED Interactive Agency to design this experience to be THE place for all things Hunger Games. It was built with the latest web technologies making it perfect for touch. Sparks will fly as you get your District ID, check out exclusive new trailers & photos, and get an inside look at all things The Hunger Games: Catching Fire.

Set the web on fire!

Behind the Scenes

The Hunger Games Explorer is a futuristic content portal brought to life by the creative technologists at Internet Explorer and RED Interactive Agency, working closely together to match the technology to the user experience.

The idea of having a responsive grid layout with gesture navigation and a sleek futuristic UI were with us from the beginning. We wanted fans to feel as though they were experiencing a sleek touch interface, regardless of what device they were actually using.

To achieve this we took a mobile-first approach to the design and development of TheHungerGamesExplorer.com. Whenever a new concept or animation was developed, we used the Microsoft Surface as baseline test platform, from wireframes to development, since it handles both touch and mouse input equally well. Also, taking a mobile-first approach allowed us to ensure we used a single code base across multiple platforms and devices.

In The Making

So, what do you do when fans consume, comment and create content at a jaw-dropping, mind-blowing rate? You build them a portal that allows them to take it to the next level.

You create a back-end that is capable of pulling in all of their favorite social networks, blogs and official Hunger Games content. That can deliver a unique experience based on a user's location or language and ensures only quality, relevant content is being surfaced.

You bring the expansive, ever changing nature of The Hunger Games to life, using the latest web technologies. Creating an immersive, engaging experience that is as intuitive to explore by touch as it is by mouse.

The Grid

At the core of The Hunger Games Explorer is a responsive grid layout that allows the complete flexibility that was required to display, filter and sort content from a range of sources.

Rather than a traditional floated grid layout, we used JavaScript to place each block in place. This allowed us to ensure that blocks at any size would fit neatly without any gaps. As the browser resizes, we recalculate the position of each block and ease it into place, regardless of the screen resolution coming from a TV with IE on Xbox, a laptop, a tablet, or an HTML5 enabled smartphone.

We also made sure no blocks span the middle gutter so that when the blocks are pushed to the background the two columns have clean edges, we think it looks better from a design aesthetic.

Having all the blocks positioned absolutely with 3D CSS transforms also allows us to easily move and rotate the block as it is dragged or animated to its detail view. Try using your finger to drag new content from the left or right rail into the detail view!

Navigate by Touch

Building for touch runs deeper than simply including gesture-based navigation, it's about integrating consistent and intuitive navigation for all inputs. It's about thoughtful planning. In order to achieve a uniform experience regardless of how a user is navigating the site, The Hunger Games Explorer utilizes Microsoft Pointer Model to manage both mouse and touch input with a single API.

The below example uses a MSGesture to normalize any number of pointers to get the scale, position, and rotation. And since we are using MSGesture events, we get rotation, scale, and position inertia for free.

View the site in IE10 on Windows 8 to be able to interact with using touch.

3D Flipping Animations

Looking beyond the functionality, we wanted our users to feel like they were using a sleek futuristic touch interface. To achieve this we used CSS3 Transforms optimized with requestAnimationFrame, creating animations that were consistently smooth across a wide range of browsers and devices. requestAnimationFrame is also great in that it allows us to achieve a higher level of responsiveness without sacrificing computing power.

A lot of the core functionality of the site is accompanied by 3D flipping animations, such as when a user swipes a piece of content from the homepage to the detail view. Here is an example of how we achieved this animation.

The Future

Going forward, we see this platform evolving along with its audience. New features and unique ways to explore the Hunger Games Franchise will be added to keep users engaging, but what all of these features could be is anyone's guess.

What you're seeing is a living, breathing platform; built to evolve.