Responsive design

[happypeter]

http://twitter.github.com/bootstrap/scaffolding.html#responsive

you don't have to write media query yourself, cause bootstrap provides .visible-phone and the like.

[happypeter]

      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

is needed to make navbar resposive.

You need the js to make the button work

//= require bootstrap-collapse

[happypeter]

It's not so hard, but we don't need to be responsive right now, so Just keep the code on it's own branch responsive, as a ref later.

[happypeter]

Touch screen devices, like iphone and ipad has no "mouse hover" event, and the buttons should no smaller than 40x40px as apple's guideline put it. No double-click, no right-click....

Mobie device's not only have smaller viewport, but also it's hold vertically(portrait) or horizontally(landscape) interchangeably all the time.

[happypeter]

Do I have to design for Mobie devices?

Check google analytics 🔹

People will learn with their mobile devices a lot in the future, and surely we need to support phones and tablets。I'd better also make everything works offline, if users spend some time download the videos before hand.

[happypeter]

Draw some wireframe for each screenSize might be very helpful

[happypeter]

fixed width?

if you check github.com, devbootcamp, and a lot relatively complex site, they all go with fixed width.

[happypeter]

有一点可以确认，我们必须支持移动触屏设备。但是可能不是现在。

github 用 920px 的固定宽度，固定的布局可以适应 Mac 和 ipad，这是我当前的任务：

1. 放弃 bootstrap 的 grid 方案，采用 github 的方案
2. 那么未来如何适应手机呢？
   A: youku 在 Mac 上也是 fixed width，但是在 ipad 上他就采用了另外一套 layout，可能也是固定宽度的，所以未来适应手机的问题，并不成为我们现在的顾虑。

[happypeter]

现在确定了 fixed width，但是 container 的宽度要确定为多少呢？

1. 如果要采用可汗的播放页面布局，那920px就不够用了，可汗学院用的是 1200px; 测了一下，1200px 不管是在我的大 iMac 还是 13" 的小 macbook 和 dell 机器上表现都很好。达成可汗的宽敞播放器再加上课程表栏，效果极佳。
2. github 采用 920 也是非常聪明的，因为再大几十个像素，ipad 上就装不下了。而且 ipad 上不支持缩小。

结论：无疑我就是要用 1200px，这样 ipad 上其实将就也能用，未来单独为 iphone 和 ipad 再做 layout 也不麻烦。

[happypeter]

好吧，那就暂时用固定 1200px