網頁行動裝置相容/手機友善化測試: 網頁測試工具與資源整理 Mobile Friendly

1. PageSpeed Insights 行動/桌面測試工具

網址： https://developers.google.com/speed/pagespeed/insights/

一個測試同時幫你測試「行動版/手機版網頁」＋「桌面PC/MAC」版，並且個別打分數。

這個 Tools 最開始的時候，其實著重於「網頁速度」（中文為: 網頁效能工具），而沒有所謂的 Mobile-Friendly 使用者體驗！
但隨著行動上網的人增加，Google 也把 mobile user experience 的元素加入到測試內容內。

小於 60 分，則會顯示「紅字」，60 ~ 85 分則是「橙黃」，85 分以上則顯示「綠色」！
另外，他會幫你挑出
(a) 必須修正的問題 (should Fix)
(b) 建議修正的問題 (consider Fixing)
(c) 通過的測試 (Passed Rules)

當然，一定是建議先從類別 (a) 去著手修復，不管是「使用者體驗」或者「網頁速度」。

2. Google Webmaster Mobile Friendly Checker 測試工具

網址： https://www.google.com/webmasters/tools/mobile-friendly/

Google Webmaster 提供手機網頁相容測試的工具，他的原理很簡單，其實就是剛剛上面提到 PageSpeed Insights 「使用者體驗 (User Experience)」分數超過 80 分，就算是 Mobile Friendly！

這個 Mobile Friendly 測試看起來不 Care 「速度(Page Speed)」，所以有些寫的太過於精雕細琢的 RWD 網頁，雖然 PageSpeed Response time 很長，CPU% 使用率很高，但往往可通過此測試。

3. W3.org 的 Mobile OK 測試工具

網址： https://validator.w3.org/mobile/

W3C MobileOK Checker/Validator 歷史比 Google 資深，他的 User Agent 是「W3C-mobileOK/DDC-1.0 ( see http://www.w3.org/2006/07/mobileok-ddc )」

從 URL 來看，此 W3C Mobile OK 於 2006~2007 年就有了！

也因為是如此資深，他設計的原理其實是希望你符合一些「2G 傳統手機/功能手機」的「網頁瀏覽」
e.g.
(a) 他希望你每一頁 {HTML + 圖片} 小於 20KB
(b) 他希望你每一頁純 HTML 小於 10KB
(c) 他希望你用 XHTML 撰寫
(d) 他希望你不要用 PNG (因為手機可能無法 render)

從下面這段話，W3C 認為 Mobile 的網路還是 GPRS/CSD (10~30 Kbits)，而非 EDGE/CDMA/WCDMA/LTE (384Kbit ~ 1Mbit 等級以上)等。

代碼:


... For instance, on many mobile networks, downloading 100KB worth of data takes as long as 1 minute.

總之，
W3C mobile OK 的原則恰好和 Google 完全相反...，重速度，不重版面；我會建議還是以 Google PageSpeed Insights + Mobile Friendly 測試為主，W3C mobileOK Checker 拿來輔助參考即可。

4. Browser Stack 的 RESPONSIVE (RWD Web) Tool

網址： https://www.browserstack.com/responsive

會幫你測試 Google Nexus 4, Apple Iphone 5/6, Samsung Galaxy S5, Windows, Mac OS 「看起來的樣子」！理論上是個很棒的服務，但缺點因為同時模擬各個機種上的狀況，從 Server 端發出的 request 速度有點慢！

5. Ready.mobi Beta

網址： http://ready.mobi/

顧名思義就是看你的網頁是否為 Mobile Ready 幫你分析各種不同的 items，非常之詳盡（比起 PageSpeed Insights）

甚至連 HTTP HEADER ETAG 都幫你分析，列為 Major Failed

但是！這從實做面來看有點 overkilled，因為 ETAG 能做到的，有其他 HTTP header 也能做到類似功能。

總之，是個非常詳盡的 Tools ，可以根據逐項去改善，甚至會幫你儲存比較。

Ref: 更多 Web Mobile Friendly 資源

https://developer.chrome.com/devtools/docs/device-mode

http://www.opera.com/developer/mobile-emulator

http://detectmobilebrowsers.com/

http://www.mydevice.io/devices/

https://msdn.microsoft.com/en-us/library/jj149680.aspx

#MobileFriendly

#MobileFriendly by Type

Type(Type) 2015/5/13 18:16

圖片資源

(8,350 views)

"網頁行動裝置相容/手機友善化測試: 網頁測試工具與資源整理 Mobile Friendly" 傳統頁面(電腦版)

首頁繪圖設計工作閒聊比賽活動美術討論標籤圖片