The pages of the bestselling trilogy “The Hunger Games” introduced readers to a captivating set of characters living in a post-apocalyptic world, and on Friday the movie adaptation of the first book will bring that world to life.

Thanks to a partnership between Microsoft’s Internet Explorer team and Lionsgate, fans of The Hunger Games can dive in and experience the world of Panem and its opulent and oppressive Capitol city today.

The Capitol Skyline in Panem. Click for larger version.

Today, Lionsgate and Microsoft launch a “game-changing” Web experience that pulls visitors into the world of The Hunger Games from the moment they step off their train in the Capitol city. Visitors can do things like tour the Capitol, visit the Avenue of Tributes, and hear an address from President Snow.

“We wanted to make a breakthrough online experience for fans. We are so excited at what we were able to create with the team at Microsoft by tapping into the power of Internet Explorer and the investments they’ve made in their product to bring Web content to life,” said David Hayes, vice president of digital marketing for movie studio Lionsgate. “We’re thrilled to show off the Capitol Tour to Hunger Games fans around the world.”

The site, powered by HTML5 and CSS3, is animated, colorful and true to the style of the movie and the book, said Ryan Gavin, general manager for Internet Explorer. Visitors will see the city’s iconic skyline, with a breathtaking level of detail down to the twinkling stars and drifting clouds. They’ll see the highly fashionable Capitol citizens out and about in the city, and even cross paths with some of the iconic characters from the books and movie.

The sheer scale and complexity of the project required a crack team of creative and technical experts, including special effects experts from Lionsgate, members of Microsoft’s Internet Explorer team, and creative experts from digital agencies Ignition Interactive and The Nerdery.

A game master works in the Control Room to prepare for the Hunger Games. Click for larger version.

Evan Dehaven, president and executive creative director of Ignition Interactive, said his company appreciated the opportunity to work on a project that is a true breakthrough for designing in HTML5.

“It’s such a great thing that Microsoft has fostered, through Internet Explorer 9, the idea that the Web is beautiful,” said Dehaven, who is currently working on Web experiences for nearly 30 films. “They want to bring things to life and allow people to tell stories through technology rather than telling people to live within these boxes and these rules while they’re making something. Now we’re just looking forward to fans and the world seeing what we’ve created.”

Dehaven hopes the Hunger Games site’s creative use of HTML5 will be a trendsetter for movie and television experiences online.

Microsoft approached Lionsgate last year about creating a “game-changing, one-of-a-kind” website for the highly anticipated movie adaptation of the bestselling book, Gavin said.

“They loved the idea. We had the opportunity to really dig into the universe of the Hunger Games and fundamentally change how people perceive what’s possible on the Web, all of which is best experienced in Internet Explorer 9,” Gavin said.  “We wanted to create something that crossed the boundaries of books and movies, and we see this type of online experience as the next evolution in how Hollywood uses the Web.”

Typical movie websites mainly exist to house associated content – movie trailers and film clips, photos and electronic press kits. If there’s anything more, it’s usually an interactive game or social media connection.

Most movie websites are also designed using Adobe Flash, which means they can’t be accessed by people using other platforms and devices, Gavin said. The team set out to design the site using HTML5 and CSS3, which means the content is more broadly available across platforms, devices and browsers without the need for plug-ins.

Though the Hunger Games site is designed to work on all major browser formats, a chic hologram tour guide offers visitors this encouragement as they arrive at the Capitol train station, “The Capitol recommends you use Internet Explorer 9 during your tour for the best experience of our city.”

A little plot background, for those who haven’t read the bestselling trilogy: The Hunger Games is set in the future, and North America (now called Panem) consists of 12 districts that work to support Panem’s Capitol. As punishment for the districts’ past rebellions against the Capitol, every year one boy and girl from each district are selected to participate in the “Hunger Games,” in which they fight for their lives in an elaborate outdoor arena. The trilogy follows the story of Katniss Everdeen, a 16-year-old who volunteers to compete in the games to spare her little sister, whose name was chosen to participate in the Hunger Games’ annual lottery.

The Welcome Center of the Capitol greets fans arriving for the 74th annual Hunger Games. Click for larger version.

Team members behind the website project, many of whom are huge fans of the Hunger Games trilogy, thought of themselves not just as content creators but as careful stewards of the story. Gavin recently attended the Hollywood premiere of the film, and said he was thrilled at how well the movie represented the book, and also at how well the Web experience represents both.

Along with the Capitol Tour and the other Hunger Games experiences that launch today, the team will be adding even more in the weeks to come, including a training center where visitors can see Hunger Games competitors exercising and preparing for the games, and a memorabilia center where visitors can explore artifacts and weapons used in previous Hunger Games.

The memorabilia center is not found in the book or movie, but takes elements from both and brings them to life, but the filmmakers thought the center was in keeping with the story, and liked the idea of having such an exclusive experience for fans on the Web, Gavin said.

“Visitors will be able to look at items, rotate them, and see information about how they were used and what they do. It’s what a museum of the future will look like,” Gavin said. “It’s the perfect opportunity for uber-fans of the book series to go geek out on the history of the Hunger Games.”

To receive notifications about Hunger Games content updates, users should pin the site to their Internet Explorer 9 toolbar, he said.