Chrome 開發人員高峰會 - 行動裝置摘要

Chrome 開發人員高峰會已於幾週前結束,以下是本次活動一系列報告的第一項。我們也相當重視行動裝置和跨裝置開發, 所以下定決心是這麼做!

Paul Kinlan 針對行動網路應用程式的最佳使用者體驗模式

我們分析前 1000 大網站是否適合透過行動裝置瀏覽後,我們發現以下問題:53% 仍然僅提供電腦專用體驗、82% 的網站在行動裝置上會有互動問題,64% 的網站內文會有使用者在閱讀時無法順利閱讀的文字。

快速命中功能,大幅提升你的行動網路體驗

  • 一律定義可視區域
  • 在可視區域中調整內容
  • 將字型大小保持清晰易讀的狀態
  • 限制使用網頁字型
  • 適當調整點按目標的大小和間距
  • 為輸入元素使用語意類型

PageSpeed Insights 剛推出一項使用者體驗分析,可協助判斷網站是否適合透過行動裝置瀏覽,可協助您找出網站行動版使用者體驗的常見問題。快來體驗看看!

簡報:行動版網站應用程式的最佳使用者體驗模式

Alice Boxhall 推出多裝置無障礙功能

使用者將透過各種裝置存取您的網站和服務,適用範圍各有不同。只要採用正確的語意元素和正確的 ARIA 角色,瀏覽器和輔助技術就能進一步瞭解您的網頁。

Google 簡報:多裝置無障礙功能

瞭解和解決無障礙功能問題的重要方式

  • 確保使用者享有優異的鍵盤體驗
  • 使用正確的元素選項和 ARIA 來傳達介面的語意
  • 請在電腦上使用 ChromeVox 和 Android 的 TalkBack 進行測試。
  • 試用無障礙開發人員工具 Chrome 擴充功能
  • 上網人數越多,使用者就越能上網搜尋您的網站

使用 Matt Guant 的 Chrome WebView 打造行動應用程式

我們都知道開發人員過去在 WebView 建構時遇到的問題: HTML5 功能有限、沒有偵錯工具,也沒有建構工具。隨著 Android 4.4 (KitKat) 開發人員引進了採用 Chromium 的 WebView 技術,開發人員現在可使用各式各樣的新工具,使用 WebView 打造出色的原生應用程式。

WebView 支援完整的遠端偵錯,以及 Chrome 所使用的相同工具。您也可以透過 Grunt,將信任的網頁開發工作流程整合至原生堆疊工具,透過 Gradle 將其整合至原生堆疊工具。隨著越來越多的世界,使用 Chrome 開發人員工具測試 JavaScript 的原生程式碼也是個很聰明的技巧。

簡報:使用 Chrome WebView 打造行動應用程式

有效的 WebView 開發重點

  • 這並不是重要的新功能,現在能用來加快工作流程。
  • 請勿嘗試模擬原生 UI。但請務必移除其中一部分為「網路內容」。
  • 視情況使用原生實作功能。例如,對大型檔案使用 DownloadManager,而非 XHR。

Matt Gaunt 針對跨裝置的世界調整工作流程

如果我們需要針對電腦、行動裝置、平板電腦、穿戴式裝置和其他板型規格開發產品,該如何調整工作流程,減輕生活壓力?LiveReload、Grunt、Yeoman 和新剛推出的 Mini Mobile Device Lab 都擁有完善的多裝置方法,能快速疊代。最後,如果您沒有要測試的實體硬體,有些供應商會透過雲端提供。

Google 簡報:針對跨裝置環境最佳化工作流程

重要須知

  • 我們願意設計的裝置數量 只會增加一倍
  • 運用 GruntYeoman 打造合適的工作流程
  • 利用 Mini Mobile Device Lab 簡化跨瀏覽器和跨裝置測試程序
  • 透過 Chrome 開發人員工具模擬、股票模擬器、SaucelabsBrowserstackappexperience 等雲端模擬器,以及第三方模擬器 Genymotion
  • 行動測試不只是透過 Wi-Fi 連線進行測試,還會使用 Proxy 模擬網路速度較慢的環境

網路連線:由 Jake Archibald 選用

我們從這場講座中學到很多:小傑在簡報過程中不會穿著鞋子,Business Kinlan 目前推出新書,因此瀏覽器供應商正留意離線狀態,也即將推出各種工具,協助你在離線狀態下打造良好體驗。

ServiceWorker 可讓我們輕鬆打造引人入勝的離線優先體驗,而且不必擔心 AppCache 造成的困擾。您甚至可以使用 Polyfill 嘗試 API。

簡報:網路連線 (選用)

將 ServiceWorker 進行救援

  • 在新一代的漸進式強化功能中,我們將網路視為可能的增強功能
  • ServiceWorker 可讓您完全、可進行偵錯和偵錯的網路要求控管機制
  • 如果是離線體驗,請不用等網路失敗後再顯示,因為可能需要一些時間