7 ms·

Khan Academy Redesign

90 points by woan 15y ago

albahk 15y ago
Logo looks very similar to the Banyan Tree Logo. Banyan Tree is a very famous luxury brand in Asia. www.banyantree.com
barmstrong 15y ago
JQuery mobile seems like an awesome way to get both iPhone and Android support in one fell swoop. It's still not quite as good as a native app, but it seems like you're getting 90% of the benefit with about 10% of the work. For a dev team strapped for resources it seems like a good option.
- deleted 15y ago
  [deleted]
- te_chris 15y ago
  Best thing is, combine it with PhoneGap and you've got a "native" app store submittable app quickly.
  - zitterbewegung 15y ago
    I have heard the performance of using PhoneGap versus a native android app is quite noticeable. YMMV
    - 6ren 15y ago
      I wonder how much faster phones need to be for it not to matter (i.e. native is still faster, but not noticeably). Would dual core be enough? Assuming the engines can scale behind the scenes for us, how many cores would be needed? This would change everything, especially for the iPhone's walled gargen (unless new apps appear that require the extra power - perhaps console-quality games? complex visualizations) Intel managed an amazing trick, of keeping demand for more processing power strong for decades (from 1978 to 1998; when the celeron was introduced, for the market that valued low price over performance; and 2008, the Atom for low power consumption over performance). But to really compete against ARM requires letting go of the blessing and the curse of back-compatibility - which Intel hasn't succeeded at so far (see Itanium). The demand for performance seems to be ending, and I expect with it, Intel will also - perhaps by 2018.
      - ryanpetrich 15y ago
        iOS's JavaScript engine and version of WebKit is single-threaded; dual core won't help (this isn't strictly true, but there's a global lock that they both acquire). No support for WebWorkers either Perhaps Android is better in this regard?
    - te_chris 15y ago
      My point was more that PhoneGap + jQuery Mobile allows you to get something out really quickly which can then be replaced by a native app as time or money allows. In my startup's case we're using this approach as none of us are proficient in Obj C so while we catch up with that and iterate our native app, our designer/front end guy can pretty much build our WebView app himself. In a small team with lots to do this is proving very helpful
rubergly 15y ago
The design looks very slick, and I'm very impressed. My one complaint is that it seems wrong to have a pseudo-hover state for the entries in the lists. I don't know what standard practice is in mobile web interfaces, but it seems strange that scrolling causes elements to look selected because you have to hit a point in order to start scrolling.
- marcomonteiro 15y ago
  I noticed that too and wondered if it was by design or a bug in the implementation. I haven looked at the source though so can't answer knowledgeably.
  - ryanpetrich 15y ago
    It's a side effect of the way iOS implements scrolling--as soon as scrolling starts the web content is "frozen" and only resumes once the scroll is complete. Only way around is to imitate the native scroll using CSS and JavaScript.
    - rubergly 15y ago
      But why is the item selected in the first place? It's not like it's doing the same animation as when the item is actually clicked (at which point it turns blue).
duopixel 15y ago
While the new design is better visually, it follows a trend that I've seen the past few years and that I don't particularly like: it dedicates almost all of the real estate trying to convince you that the Khan Academy is great, while downplaying the videos which are the actual content of the site. This is fine for an app or content that is behind a "registerwall", because you must convince the user that registering is worthwhile. But in the Khan Academy the courses a freely available. Instead of presenting me a video of Sal chatting with Bill G on the stage of TED, I'd prefer a video that is likely to expand my understanding of the universe.
- jasonrr 15y ago
  Totally fair criticism. Like any design effort, it represents a careful priority balancing act. The Khan Academy is trying to do a lot of things, and communicating that effectively is a challenge. For example, not everyone is as knowledgeable as you are about what the Khan Academy offers and why they should care. The good news is that people don't have any trouble finding the videos, so I don't think the design is causing too much damage from the perspective of getting to the content you want. That said, the sketches/mockups that led us to the current iteration of the design also included both the idea of featured content in the main video carousel and different homepage content for users who are signed in. They didn't make the cut yet, but we haven't forgotten about them. Ultimately, I agree that we want to make it as efficient as possible to get to the content you want quickly, and I don't think we're there yet.
  - neovive 15y ago
    Great job on the redesign. I've been following Khan Academy for a long time and the new design is great leap in usability and the playlist feature is excellent. The old site required a lot of in-browser searching and definitely was not as appealing to younger audiences. BTW: Sal's TED talk was very inspiring and really demonstrated the amazing potential of his work. It's great to see all of the recognition and support he is receiving and the excellent team now in place. His talk even inspired me to start blogging about Education last month -- see the first post on Education2.org [http://www.education2.org/2011/03/welcome-to-education2-org http://www.education2.org/2011/03/welcome-to-education2-org].
tybris 15y ago
You can never have enough pictures of Bill Gates.
roryokane 15y ago
Clickable link: http://www.khanacademy.org/ http://www.khanacademy.org/ I had expected that the image of the redesign would link to the main page, but annoyingly, it does not, nor is there a link anywhere else in the article.
- jasonrr 15y ago
  Good point! Fixed it in the main article too. Thanks.
Raphael 15y ago
I would strongly recommend a black background to go with the blackboard theme of the videos. (Alternatively, switch to whiteboard visuals). It would blend so nicely. Also, the blackboard animation should be in a smooth vector format instead of blurry compressed, bandwidth-intensive videos. Now for words and symbols, I recommend text. You can easily time-release it with JavaScript. For diagrams, maybe something like Graffiti Markup Language. http://www.graffitimarkuplanguage.com/about/ http://www.graffitimarkuplanguage.com/about/
krosaen 15y ago
fwiw the khan academy runs on app engine and is open source: https://sites.google.com/a/khanacademy.org/forge/for-developers/getting-started-with-the-code https://sites.google.com/a/khanacademy.org/forge/for-develop... pretty easy to keep up with the progress by running it locally and occasionally syncing. one note: on my nexus one, the back button in the upper left of the mobile site doesn't work. specifically, after clicking on one of the list items, sliding to the right, I can't go back by hitting the button on the upper left.

90 points by woan 15y ago

Logo looks very similar to the Banyan Tree Logo. Banyan Tree is a very famous luxury brand in Asia. www.banyantree.com

JQuery mobile seems like an awesome way to get both iPhone and Android support in one fell swoop. It's still not quite as good as a native app, but it seems like you're getting 90% of the benefit with about 10% of the work. For a dev team strapped for resources it seems like a good option.

deleted 15y ago
[deleted]
te_chris 15y ago
Best thing is, combine it with PhoneGap and you've got a "native" app store submittable app quickly.
- zitterbewegung 15y ago
  I have heard the performance of using PhoneGap versus a native android app is quite noticeable. YMMV
  - 6ren 15y ago
    I wonder how much faster phones need to be for it not to matter (i.e. native is still faster, but not noticeably). Would dual core be enough? Assuming the engines can scale behind the scenes for us, how many cores would be needed? This would change everything, especially for the iPhone's walled gargen (unless new apps appear that require the extra power - perhaps console-quality games? complex visualizations) Intel managed an amazing trick, of keeping demand for more processing power strong for decades (from 1978 to 1998; when the celeron was introduced, for the market that valued low price over performance; and 2008, the Atom for low power consumption over performance). But to really compete against ARM requires letting go of the blessing and the curse of back-compatibility - which Intel hasn't succeeded at so far (see Itanium). The demand for performance seems to be ending, and I expect with it, Intel will also - perhaps by 2018.
    - ryanpetrich 15y ago
      iOS's JavaScript engine and version of WebKit is single-threaded; dual core won't help (this isn't strictly true, but there's a global lock that they both acquire). No support for WebWorkers either Perhaps Android is better in this regard?
  - te_chris 15y ago
    My point was more that PhoneGap + jQuery Mobile allows you to get something out really quickly which can then be replaced by a native app as time or money allows. In my startup's case we're using this approach as none of us are proficient in Obj C so while we catch up with that and iterate our native app, our designer/front end guy can pretty much build our WebView app himself. In a small team with lots to do this is proving very helpful

rubergly 15y ago

The design looks very slick, and I'm very impressed. My one complaint is that it seems wrong to have a pseudo-hover state for the entries in the lists. I don't know what standard practice is in mobile web interfaces, but it seems strange that scrolling causes elements to look selected because you have to hit a point in order to start scrolling.

marcomonteiro 15y ago
I noticed that too and wondered if it was by design or a bug in the implementation. I haven looked at the source though so can't answer knowledgeably.
- ryanpetrich 15y ago
  It's a side effect of the way iOS implements scrolling--as soon as scrolling starts the web content is "frozen" and only resumes once the scroll is complete. Only way around is to imitate the native scroll using CSS and JavaScript.
  - rubergly 15y ago
    But why is the item selected in the first place? It's not like it's doing the same animation as when the item is actually clicked (at which point it turns blue).

duopixel 15y ago

While the new design is better visually, it follows a trend that I've seen the past few years and that I don't particularly like: it dedicates almost all of the real estate trying to convince you that the Khan Academy is great, while downplaying the videos which are the actual content of the site. This is fine for an app or content that is behind a "registerwall", because you must convince the user that registering is worthwhile. But in the Khan Academy the courses a freely available. Instead of presenting me a video of Sal chatting with Bill G on the stage of TED, I'd prefer a video that is likely to expand my understanding of the universe.

jasonrr 15y ago
Totally fair criticism. Like any design effort, it represents a careful priority balancing act. The Khan Academy is trying to do a lot of things, and communicating that effectively is a challenge. For example, not everyone is as knowledgeable as you are about what the Khan Academy offers and why they should care. The good news is that people don't have any trouble finding the videos, so I don't think the design is causing too much damage from the perspective of getting to the content you want. That said, the sketches/mockups that led us to the current iteration of the design also included both the idea of featured content in the main video carousel and different homepage content for users who are signed in. They didn't make the cut yet, but we haven't forgotten about them. Ultimately, I agree that we want to make it as efficient as possible to get to the content you want quickly, and I don't think we're there yet.
- neovive 15y ago
  Great job on the redesign. I've been following Khan Academy for a long time and the new design is great leap in usability and the playlist feature is excellent. The old site required a lot of in-browser searching and definitely was not as appealing to younger audiences. BTW: Sal's TED talk was very inspiring and really demonstrated the amazing potential of his work. It's great to see all of the recognition and support he is receiving and the excellent team now in place. His talk even inspired me to start blogging about Education last month -- see the first post on Education2.org [http://www.education2.org/2011/03/welcome-to-education2-org http://www.education2.org/2011/03/welcome-to-education2-org].

tybris 15y ago

You can never have enough pictures of Bill Gates.

roryokane 15y ago

Clickable link: http://www.khanacademy.org/ http://www.khanacademy.org/ I had expected that the image of the redesign would link to the main page, but annoyingly, it does not, nor is there a link anywhere else in the article.

jasonrr 15y ago
Good point! Fixed it in the main article too. Thanks.

Raphael 15y ago

I would strongly recommend a black background to go with the blackboard theme of the videos. (Alternatively, switch to whiteboard visuals). It would blend so nicely. Also, the blackboard animation should be in a smooth vector format instead of blurry compressed, bandwidth-intensive videos. Now for words and symbols, I recommend text. You can easily time-release it with JavaScript. For diagrams, maybe something like Graffiti Markup Language. http://www.graffitimarkuplanguage.com/about/ http://www.graffitimarkuplanguage.com/about/

krosaen 15y ago

fwiw the khan academy runs on app engine and is open source: https://sites.google.com/a/khanacademy.org/forge/for-developers/getting-started-with-the-code https://sites.google.com/a/khanacademy.org/forge/for-develop... pretty easy to keep up with the progress by running it locally and occasionally syncing. one note: on my nexus one, the back button in the upper left of the mobile site doesn't work. specifically, after clicking on one of the list items, sliding to the right, I can't go back by hitting the button on the upper left.