Mobile. Social. Local. Pivot. - Well one of those, anyway

I haven’t really written about the somewhat massive redesign that the Khan Academy site underwent in January/February, but in case you didn’t notice, it changed:

A lot:

The redesign accomplished a ton of goals that the organization had, and also gave us a chance to make typography, layout, and navigation a lot more consistent visually and technically. It’s a bunch easier to add/change content which is good, because we’re doing a lot of that. And people didn’t hate it either, which is every designers fear when you’re working on a product that people love.

But that’s not really why I’m here today. I’m here today to talk about “the future.” More accurately, “the present,” but saying, “the future” always seems so much more romantic. 

Introducing: the Khan Academy mobile site

One thing that the new design didn’t address was the mobile experience, especially on smaller screens (it works reasonably well on the iPad). As of this moment, if you hit the site from a device running a mobile OS like Android, iOS, or WebOS (sorry Windows Phone 7 folks, we’re working on it), you should be greeted with a new version of the site that is, for the moment, focused on one thing browsing/watching videos:

A couple of things worth noting: this isn’t a separate site. It’s the same site with some mobile magic applied to it (I will reveal those secrets in just a moment). Features that are missing (login, discussion, exercises) were intentionally cut for v1 since we were really looking to validate that this was a) possible and b) people actually liked it enough to warrant the effort of making the other features work. We did take the time to make it easy to switch between the mobile and normal sites so you can parachute out of the mobile stuff if it isn’t working well enough for you. 

How we built it

jQuery Mobile did basically all of the heavy lifting for us. The thing that made it easiest for us is that the markup for defining pages and list views is pretty unobtrusive, and with a little device detection to load the right CSS and JS, courtesy of Ben, we only had to do a tiny bit of conditional styling inline. If you inspect the homepage, you’ll see that we’ve defined a bunch of “pages”: one for primary navigation and one for each playlist. In total, it’s about 2k of additional markup that defines all of the navigation in the mobile site. 

Once you grasp how navigation and linking work, the experience of using jQuery Mobile is something akin to sprinkling magic fairy dust on our existing site and having a mobile site grow out of that. And even though we’re not doing everything by the book, it’s surprisingly solid.

If you want to see the specifics of the implementation, you can check out the code.

Still to do

Even before we add new features, we’ve got stuff to do. The performance on some of the longer lists is a bit sluggish and can cause a JS timeout in some cases. We need to figure out if that’s because we are generating the playlist “pages” from the *very* large homepage (clocks in at about 530k) or if we should be doing the markup differently or what. We’ve also got a bit of a kludge in there to help us handle linking to resources that haven’t been converted to mobile pages yet (we show the standard site for those pages). Finally, I’ve got some work to do creating a custom skin that more closely matches the branding from the standard site, but it looks like there’s a good way to do that.

So give it a shot, and let me know what you think. Feel free to leave comments here, but it would be awesome if you would report your bug or feature request in our issue tracker.