Mobile Web Issues: Limitation and Experience

One of two keynote for me on COSCUP 2013. In this presentation, I would talk about the "mobile" web experience, from browser to packaged app.

Transcript

1. ⾏行動平台與 Web： 與限制和體驗奮戰 笨笨的⼩小B (Littlebtc) COSCUP 2013 / MozTW Community Track Slides (C) 2013 Littlebtc , Released under CC-BY-SA-3.0 except otherwise noted.
2. About Me 我是⼩小B @ MozTW ～～～ 有關我的⼯工作請參照（講完的）Kamigami 場 我的業餘專案有 NicoFox 和 TouchLimit
3. 恨鐵不成鋼，但還是很喜歡
4. Mobile Web 沒那麼簡單 RWD 只是讓你的網⾴頁「看起來」可以⽤用 這些才是真⼯工夫 順不順 能不能⽤用 ⽅方不⽅方便
5. Mobile Web 的兩⼤大問題 限制 效能、未實作功能與 Bug、既成枷鎖、... 體驗 包成 App vs 瀏覽器、UI、功能取捨、...
6. Mobile Web 的兩⼤大問題 限制 效能、未實作功能與 Bug、既成枷鎖、... 體驗 包成 App vs 瀏覽器、UI、功能取捨、...
7. ......你要指望這樣的裝置能多快？ ⽐比筆電耗電量少⼀一半⼀一上 ⽐比筆電更輕更薄好幾倍 要能⽤用 WiFi、GPRS/EDGE/3G/HSPA/LTE/LTE-A 還要能拍照能 GPS 等⼗十年⽐比較快 有關效能
8. ⼿手機瀏覽器慢哪條？ 網路（特指⾏行動網路，最殘酷的現實） JavaScript JIT 推進器普及，甚⾄至現在主流是兩段推進器了 雖然還是⽐比桌機慢很多但不會很慘 GC Pause 也是⼀一個問題，但⼤大家正在改善 DOM / CSS 真正的瓶頸（被以為是 JS 的部份） 複雜的樹狀運算對⼿手機很傷 Layout 與實際成像 ⻑⾧長⾴頁⾯面、複雜的效果、......
9. 那功能上呢？ position: fixed 到 iOS 5 與 Android 2.x 才開始慢慢⽀支援 Android ⻑⾧長期存在會把 Click 拖很久的問題 其他族繁不及備載 另⼀一個問題是，並不是所有⼈人都能更新到最新瀏覽器 （尤其是 Android）
10. ⼿手機瀏覽器很糟嗎？ 以下為真實案例， 我在 iOS 或 Android 上遇到的「靈異現象」： 就是不給你出來的 CSS Transition（兩平台都有） 爛掉的渲染結果（Android） 捲不動的網⾴頁（WebKit） 按不到的按鈕（Android） etc...
11. Fair-use meme, not under CC.
12. 有解嗎？ 花時間去找出每種機器上的問題修復 花時間對各種瀏覽器進⾏行最佳化 or 相信⼀一些奇妙的現成⽅方案 jQuery Mobile（缺乏 App 製作上的最佳化） Sencha（開嗆 Fb 的那個，不⽀支援 Firefox |||） famo.us（你們到底好了嗎？ QQ）
13. Mobile Web 的兩⼤大問題 限制 效能、未實作功能與 Bug、既成枷鎖、... 體驗 包成 App vs 瀏覽器、UI、功能取捨、...
14. 形式的取捨 以 PhoneGap 包成 App 根據各平台微調 App 的設計（體驗考量） 直接⽤用瀏覽器⽅方式提供 要不要分⼿手機版和桌⾯面版？（使⽤用便利性考量） 哪些功能要留或要砍？（流量考量）
15. 不同 OS 有不同 Design Fair use. iOS 7 Design (C) Apple Inc. Gmail Play Store Preview Image (C) Google Inc.
16. 格格不⼊入很⿇麻煩 Fair use. (C) Dept. of Transportation, Taipei City & (C) Taiwan Area National Freeway Bureau.
17. 「最⼤大公約數」 Fair Use. From App Store and Google Play Store. (C) Facebook, Inc.
18. 功能性取捨：切換 Fair Use. (C) Vox Media, Inc, & (C) udn.com.
19. 共勉之 ⼿手機復⼿手機，⼿手機何其多。 我⽣生待 Bug 消，萬事成蹉跎 時間也許會解決技術問題 但體驗是需要好好努⼒力的東⻄西
20. Thanks! :)