Dancing To The Drumbeat Of HTML5, New Pandora Is Brilliant, Beautiful

Perhaps you noticed that TechCrunch went through a bit of a redesign yesterday. Well, we’re not the only ones undergoing a major facelift this summer. Another site you all know and love will soon look completely different. More importantly, it will soon function much better. It’s a change that will affect millions. Get ready for New Pandora.

Yes, after years of familiarity, Pandora will begin a massive metamorphosis on the web this week. At first, subscribers of the Pandora One service will begin to get access to the new site (on a rolling basis). And over the next several weeks, everyone will. The transformation is pretty stunning — and I mean that entirely in a good way. New Pandora is beautiful. I cannot think of a single thing I like better about the old site.

“I’ve been looking at it for seven years. I was ready to give it a fresh coat of paint,” is how Pandora head of product and CTO, Tom Conrad, sets up the change as we sit down to go over the new site. “We started on it about a year ago. But even earlier than that, we’d been talking about it. There were core navigation problems that needed fixing. At first, we had been talking about more incremental changes, with the site still operating in Flash. But then last summer, it became clear that browsers with full HTML5 capabilities had gained enough support. We realized we could do the full Pandora experience without Flash,” he says.

That’s right, another site once completely reliant on Flash is breaking the addiction.

“Back in 2004, web browsers didn’t natively know how to play music. There was QuickTime, Real Player, and Flash. Flash was so ubiquitous back then — it was an obvious choice,” Conrad says. “Fast forward to last year, everything was changing. I had begun to get worried about site performance on the client side. The backend is fast, but as we kept adding features, everything would slow down for users. If you try to load Pandora right now on the web with a moderate amount of stations, it takes something like 10 seconds. By any reasonable standard, it’s an eternity,” he continues.

Conrad then brings up New Pandora and shows me how quickly it loads compared to the old site. By my count, it takes 2-3 seconds and then music begins playing. It’s an insanely faster onboarding experience.

And the site itself is stunning, yet familiar. “We wanted the experience to be completely fresh. But we didn’t want to force our listeners to completely re-learn the Pandora experience,” he says, noting that while things look much cleaner, the same basic layout remains largely intact. “We keep many of the same progressions from the old site,” he continues. “There are a bunch of great features on the new site, but we continue to be really committed to the idea that Pandora wants to be a simple solution.”

Conrad says that it was also about a year ago, as mobile growth was exploding, that he began to realize that Pandora’s app for the iPhone and iPad were actually closer to the essence of Pandora than the web version was. So it should be no surprise that New Pandora takes its design cues from the iPad app Pandora first built last year (this is similar to the way in which “New Twitter” was influenced by Twitter for iPad).

You’ll notice that along the top of New Pandora, there’s now a music control bar that stays in place as you navigate through the site. This is key. “Content on Pandora is deeper than most people realize. We needed a better way to present it,” Conrad says, showing me that you can now visit any page on Pandora while your music continues to play. And unlike the old site, where elements would open in new windows or clunky Flash overlays, everything is fluidly displayed using HTML. This alone will drastically alter the way many use the service — it will likely be much more of a source of music information to aid discovery.

Then Conrad’s eyes really light up. “Oh! The back button finally works!,” he exclaims. Due to the limitations of Flash, Pandora has long been crippled by natural back button usage in browsers. But not anymore. Want to go back from where you just came? Just click the back button. Again, the music in the top control bar will keep right on playing.

Conrad is also clearly excited by the fact that you can share an actual URL now thanks to the HTML usage. Previously, you had to rely on the share widgets to dynamically create an URL that would work for the Flash-wrapped site.

Lyrics also now expand on the homepage of songs for the first time. And comments finally feel native to the site. “We’ve got millions of people leaving comments on the site, but they never got surfaced. We might see a real explosion,” Conrad says.

“Another core change is the way the station creation process works,” Conrad says, showing me that when you click in the new “Create a New Station” box, a drop-down appears to help you. As you type, you’ll get suggestions for stations to create. These include bands, artists, genres, even comedians. And it’s not just keyword-based. Pandora will dynamically serve you recommendations based on the music genome core, your own voting and listening history, and social elements of the site.

Speaking of social, that’s another key to this revamp. “I wanted to use the clean sheet of paper as an opportunity to rethink how you interact with music socially,” Conrad says. “We have tried lots of different angles on social over the years. Email, profiles pages, commenting, embeddable widgets for MySpace. Twitter, Facebook — then deeper Facebook integration. It just felt to me that we hadn’t gotten the formula quite right in all those attempts,” he continues.

With New Pandora, the social experience is much more central to the site. Right next to “Now Playing” is your “Music Feed” which shows you the activity for all of your friends on Pandora. Every like, every listen, every comment. It’s a bit like Apple’s Ping, but a Ping people will actually use because it captures what everyone already does on Pandora — again, mainly listen to music and give “thumbs up” ratings.

There is also a “My Profile” area to keep track of what you’ve been doing on Pandora. These profiles have actually existed for some time, but few used them as they were very static and uninteresting. Now they look great and are useful. Clicking on any users’ profile allows you to easily see their activity and to follow them. Their activity will then appear in your “Music Feed” stream.

When you click on the “Share” button for each track on Pandora, you’ll still have the standard options to send to Facebook and Twitter, but the default is now to simply share on Pandora itself. For example, you can share what station you’re listening to and send that right to your music feed for all of your Pandora followers to see. “Pandora now has its own follower/following system,” Conrads notes. “We talked to our listeners and found that the vast majority are very conscious about spamming their friends on their other social networks. They’re more reluctant to share than I would have imagined,” he continues. “My hope is that as people develop followers on Pandora itself, they’ll become more comfortable with sharing in general.”

“I like to think of sharing inside of Instagram as training wheels for the other networks,” Conrad continues. What he means is that people at first are only comfortable sharing images with their contacts within specific apps, but eventually the gain confidence and branch out to share with other social networks.

“What I’m excited about is that this environment is a starting point for us to further evolve the social aspects of music. You can imagine all types of content flowing through our feeds,” Conrad says. “We could port in when artists that you like have new albums, for example,” he says.

Conrad is quick to point out that Pandora still has private profiles as well. If you choose to make your profile private, you’ll basically be invisible to the service at that point, he says.

So what do all of these social endeavors mean for Pandora’s relationship with Facebook? After all, they were one of the initial Open Graph partners — and Facebook is about to launch their own entry into the music space, supposedly with a number of partners. “We’ve had a really, really close working relationship with Facebook for many years. We continue to talk regularly about things. Mark [Zuckerberg] himself has called me with ideas for how to make Pandora more social over the years,” Conrad says. “Clearly, Facebook is the center of the world for social today. We’ll continue to be a part of that.”

That’s all Conrad would give me with regard to Facebook. So I guess we’ll just to wait and see if they’ll be one of the Facebook Music launch partners.

Going back to HTML5, clearly Pandora is making a bet here that this is the future of the web. But that’s an easy bet to make at this point. Still, they’re thinking bigger too. “HTML5 is the only technology that has a shot at being a ubquitous solution across a wide range of computing experiences — tablets, TV, automobiles, etc. We still have along way to go, but it’s possible,” Conrad says.

“I’m not ready to predict our answer for things like tablets will be HTML5 down the road. But it’s nice to have the infrastructure in place,” Conrad notes, while saying there’s still a lot to love about native apps as well. “We’re devoted to delivering the best possible experience.”

And while over half of Pandora’s listeners now come from mobile devices, Conrad notes that the web will always have a place in their heart — it’s where Pandora began. And now it’s where Pandora is evolving.

Again, to be clear, this initial roll out of New Pandora will begin with Pandora One subscribers first. The idea there isn’t to bring in more Pandora One subscribers, Conrad promises. Instead, they simple would like a smaller group to test the new site with (as well as reward those paying members). Pandora is also hard at work to perfect the advertising that will be the a part of the free version of Pandora, which most users use. You can expect this to be largely the same as it is now on the current Pandora site — large ads splashed in the background.

Conrad credits his “incredible engineering team” for pulling off this transition from Flash dependance to HTML5. And while it’s clear that the Flash addiction has been kicked, Conrad notes that they continue to have fall-back Flash elements for browsers not fully HTML5-compliant.

Conrad says the work on New Pandora really touched everyone at the company. There have been well north of 100 people working on this project by this point, he says. Compare that with the 8 to 10 people who built the original site. And remember, they were building this in secret while also going through an IPO!

“It’s the best work we’ve done,” Conrad says simply of New Pandora. Upon using it myself for the past several days, I have to agree. It’s brilliant.

You can find out more about New Pandora here.