首頁 繪圖設計 工作閒聊 比賽活動 美術討論 標籤 圖片
網頁行動裝置相容/手機友善化測試: 網頁測試工具與資源整理 Mobile Friendly
Type(Type) 2015/5/13 18:29 (Since 2015/5/13 18:13)

網頁行動裝置相容/手機友善化測試: 網頁測試工具與資源整理 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

圖片資源


(2,461 views)
[更多討論] 討論區 Windows, Linux, Perl, PHP, C/C++, Driver, Web 理論、應用、硬體、軟體




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

首頁 繪圖設計 工作閒聊 比賽活動 美術討論 標籤 圖片
傳統桌面版 [ 登入/註冊 ]
© Vovo2000.com Mobile Version 小哈手機版 2018