Mobile Web Issues: Limitation and Experience

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.

7aa07e17cd90ec9fff21dd7a9fbcdff1?s=128

Hsiao-Ting Yu

August 03, 2013
Tweet

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! :)