Chrome 開發人員高峰會已於幾週前結束,以下是本次活動一系列報告的第一項。我們也相當重視行動裝置和跨裝置開發, 所以下定決心是這麼做!
Paul Kinlan 針對行動網路應用程式的最佳使用者體驗模式
我們分析前 1000 大網站是否適合透過行動裝置瀏覽後,我們發現以下問題:53% 仍然僅提供電腦專用體驗、82% 的網站在行動裝置上會有互動問題,64% 的網站內文會有使用者在閱讀時無法順利閱讀的文字。
快速命中功能,大幅提升你的行動網路體驗
- 一律定義可視區域
- 在可視區域中調整內容
- 將字型大小保持清晰易讀的狀態
- 限制使用網頁字型
- 適當調整點按目標的大小和間距
- 為輸入元素使用語意類型
PageSpeed Insights 剛推出一項使用者體驗分析,可協助判斷網站是否適合透過行動裝置瀏覽,可協助您找出網站行動版使用者體驗的常見問題。快來體驗看看!
Alice Boxhall 推出多裝置無障礙功能
使用者將透過各種裝置存取您的網站和服務,適用範圍各有不同。只要採用正確的語意元素和正確的 ARIA 角色,瀏覽器和輔助技術就能進一步瞭解您的網頁。
瞭解和解決無障礙功能問題的重要方式
- 確保使用者享有優異的鍵盤體驗
- 使用正確的元素選項和 ARIA 來傳達介面的語意
- 請在電腦上使用 ChromeVox 和 Android 的 TalkBack 進行測試。
- 試用無障礙開發人員工具 Chrome 擴充功能
- 上網人數越多,使用者就越能上網搜尋您的網站
使用 Matt Guant 的 Chrome WebView 打造行動應用程式
我們都知道開發人員過去在 WebView 建構時遇到的問題: HTML5 功能有限、沒有偵錯工具,也沒有建構工具。隨著 Android 4.4 (KitKat) 開發人員引進了採用 Chromium 的 WebView 技術,開發人員現在可使用各式各樣的新工具,使用 WebView 打造出色的原生應用程式。
WebView 支援完整的遠端偵錯,以及 Chrome 所使用的相同工具。您也可以透過 Grunt,將信任的網頁開發工作流程整合至原生堆疊工具,透過 Gradle 將其整合至原生堆疊工具。隨著越來越多的世界,使用 Chrome 開發人員工具測試 JavaScript 的原生程式碼也是個很聰明的技巧。
有效的 WebView 開發重點
- 這並不是重要的新功能,現在能用來加快工作流程。
- 請勿嘗試模擬原生 UI。但請務必移除其中一部分為「網路內容」。
- 視情況使用原生實作功能。例如,對大型檔案使用 DownloadManager,而非 XHR。
Matt Gaunt 針對跨裝置的世界調整工作流程
如果我們需要針對電腦、行動裝置、平板電腦、穿戴式裝置和其他板型規格開發產品,該如何調整工作流程,減輕生活壓力?LiveReload、Grunt、Yeoman 和新剛推出的 Mini Mobile Device Lab 都擁有完善的多裝置方法,能快速疊代。最後,如果您沒有要測試的實體硬體,有些供應商會透過雲端提供。
重要須知
- 我們願意設計的裝置數量 只會增加一倍
- 運用 Grunt 和 Yeoman 打造合適的工作流程
- 利用 Mini Mobile Device Lab 簡化跨瀏覽器和跨裝置測試程序
- 透過 Chrome 開發人員工具模擬、股票模擬器、Saucelabs、Browserstack 和 appexperience 等雲端模擬器,以及第三方模擬器 Genymotion
- 行動測試不只是透過 Wi-Fi 連線進行測試,還會使用 Proxy 模擬網路速度較慢的環境
網路連線:由 Jake Archibald 選用
我們從這場講座中學到很多:小傑在簡報過程中不會穿著鞋子,Business Kinlan 目前推出新書,因此瀏覽器供應商正留意離線狀態,也即將推出各種工具,協助你在離線狀態下打造良好體驗。
ServiceWorker 可讓我們輕鬆打造引人入勝的離線優先體驗,而且不必擔心 AppCache 造成的困擾。您甚至可以使用 Polyfill 嘗試 API。
將 ServiceWorker 進行救援
- 在新一代的漸進式強化功能中,我們將網路視為可能的增強功能
- ServiceWorker 可讓您完全、可進行偵錯和偵錯的網路要求控管機制
- 如果是離線體驗,請不用等網路失敗後再顯示,因為可能需要一些時間