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.
   

   View Slide

2. About Me
   我是⼩小B @ MozTW ～～～
   有關我的⼯工作請參照（講完的）Kamigami 場
   我的業餘專案有 NicoFox 和 TouchLimit
   

   View Slide

3. 恨鐵不成鋼，但還是很喜歡
   

   View Slide

4. Mobile Web 沒那麼簡單
   RWD 只是讓你的網⾴頁「看起來」可以⽤用
   這些才是真⼯工夫
   順不順
   能不能⽤用
   ⽅方不⽅方便
   

   View Slide

5. Mobile Web 的兩⼤大問題
   限制
   效能、未實作功能與 Bug、既成枷鎖、...
   體驗
   包成 App vs 瀏覽器、UI、功能取捨、...
   

   View Slide

6. Mobile Web 的兩⼤大問題
   限制
   效能、未實作功能與 Bug、既成枷鎖、...
   體驗
   包成 App vs 瀏覽器、UI、功能取捨、...
   

   View Slide

7. ......你要指望這樣的裝置能多快？
   ⽐比筆電耗電量少⼀一半⼀一上
   ⽐比筆電更輕更薄好幾倍
   要能⽤用 WiFi、GPRS/EDGE/3G/HSPA/LTE/LTE-A
   還要能拍照能 GPS
   等⼗十年⽐比較快
   有關效能
   

   View Slide

8. ⼿手機瀏覽器慢哪條？
   網路（特指⾏行動網路，最殘酷的現實）
   JavaScript
   JIT 推進器普及，甚⾄至現在主流是兩段推進器了
   雖然還是⽐比桌機慢很多但不會很慘
   GC Pause 也是⼀一個問題，但⼤大家正在改善
   DOM / CSS
   真正的瓶頸（被以為是 JS 的部份）
   複雜的樹狀運算對⼿手機很傷
   Layout 與實際成像
   ⻑⾧長⾴頁⾯面、複雜的效果、......
   

   View Slide

9. 那功能上呢？
   position: fixed 到 iOS 5 與 Android 2.x 才開始慢慢⽀支援
   Android ⻑⾧長期存在會把 Click 拖很久的問題
   其他族繁不及備載
   另⼀一個問題是，並不是所有⼈人都能更新到最新瀏覽器
   （尤其是 Android）
   

   View Slide

10. ⼿手機瀏覽器很糟嗎？
    以下為真實案例，
    我在 iOS 或 Android 上遇到的「靈異現象」：
    就是不給你出來的 CSS Transition（兩平台都有）
    爛掉的渲染結果（Android）
    捲不動的網⾴頁（WebKit）
    按不到的按鈕（Android）
    etc...
    

    View Slide

11. Fair-use meme, not under CC.
    

    View Slide

12. 有解嗎？
    花時間去找出每種機器上的問題修復
    花時間對各種瀏覽器進⾏行最佳化
    or 相信⼀一些奇妙的現成⽅方案
    jQuery Mobile（缺乏 App 製作上的最佳化）
    Sencha（開嗆 Fb 的那個，不⽀支援 Firefox |||）
    famo.us（你們到底好了嗎？ QQ）
    

    View Slide

13. Mobile Web 的兩⼤大問題
    限制
    效能、未實作功能與 Bug、既成枷鎖、...
    體驗
    包成 App vs 瀏覽器、UI、功能取捨、...
    

    View Slide

14. 形式的取捨
    以 PhoneGap 包成 App
    根據各平台微調 App 的設計（體驗考量）
    直接⽤用瀏覽器⽅方式提供
    要不要分⼿手機版和桌⾯面版？（使⽤用便利性考量）
    哪些功能要留或要砍？（流量考量）
    

    View Slide

15. 不同 OS 有不同 Design
    Fair use.
    iOS 7 Design (C) Apple Inc.
    Gmail Play Store Preview Image (C) Google Inc.
    

    View Slide

16. 格格不⼊入很⿇麻煩
    Fair use.
    (C) Dept. of Transportation, Taipei City & (C) Taiwan Area National Freeway Bureau.
    

    View Slide

17. 「最⼤大公約數」
    Fair Use. From App Store and Google Play Store. (C) Facebook, Inc.
    

    View Slide

18. 功能性取捨：切換
    Fair Use. (C) Vox Media, Inc, & (C) udn.com.
    

    View Slide

19. 共勉之
    ⼿手機復⼿手機，⼿手機何其多。
    我⽣生待 Bug 消，萬事成蹉跎
    時間也許會解決技術問題
    但體驗是需要好好努⼒力的東⻄西
    

    View Slide

20. Thanks! :)
    

    View Slide