Go Mobile ! 行動版網頁 – 使用 獨立的行動版網頁 (Separate Mobile Website), 還是 Responsive Web Design ?
Go Mobile 已經是目前的趨勢與現在進行式, 線上零售商 CultureLabel.com 整理了一份數據報告 (http://mashable.com/2012/03/07/mobile-commerce-outlook/), 其中包括:
* 行動電話裝置在全世界人口中的普及率高達 87%，相當於 59 億人口數；智慧型手機銷售在 2011 年成長了 63.1%
* 52% 的使用者平均每天花 40 分鐘在行動上網, 32% 的使用者平均每天花 27 分鐘在行動通訊, 9% 的使用者每天平均花 9 分鐘使用 email 服務。
52% 的使用者平均每天花 40 分鐘在行動上網, 32% 的使用者平均每天花 27 分鐘在行動通訊, 9% 的使用者每天平均花 9 分鐘使用 email 服務。 (http://mashable.com/2012/03/07/mobile-commerce-outlook/)
* 81% 行動裝置用戶在瀏覽網站內容, 77% 的使用者透過行動裝置進行搜尋，特別是當地的在地化資訊
* 2015 年行動電子商務產值預計將成長 99 倍
* 目前仍有 79% 的電子商務平台, 沒有行動版的最適化網頁
目前仍有 79% 的電子商務平台, 沒有行動版的最適化網頁 (http://mashable.com/2012/03/07/mobile-commerce-outlook/)
Foodtree創辦人Derek Shanahan 說:
現在網路上有十分驚人的流量來自手機，行動上網正在轉變網路開發、設計、應用、商業的樣貌，你不能忽視「行動」這個關鍵字，然而大多數的網路均尚未最佳化。我認為，新應用程式與出版品最初會聚焦在手機和平板，然後才是舊網路。我非常期待能見到網路朝「主動回應設計」（responsive design）來發展！
在創建行動版網頁時, 依據自身的需求與可配置的人力, 需要想想這些問題:
如果你的網頁只需傳達訊息, 提供產品資訊, 並不需要用到手機的特定功能 (如:地理位置,相機…), 則建置行動版網頁是一個選擇, 行動版網頁 程式跨平台性高, 但是針對設備最佳化性則低.
接下來需要想想, 你要讓行動版有獨立的網址嗎?
如果要有獨立的網址, 也有兩種選擇:
- 偵測來訪的 user agent , 如果是行動裝置, 則導引到 行動版的獨立網址, 例如 m.yahoo.com, 行動版的獨立網址, 可以是專為行動裝置客制化的版面與瀏覽方式, 也可以是一個 responsive template, 光看你手上是否有時間與資源自己弄一個 行動版的網頁, 或是使用 responsive template.
使用javascript:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// do something - 例如轉址
}
或:
if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/ZuneWP7/i) ) {
// do something - 例如轉址
}
- 如果不要有獨立的網址, 要讓桌面版和行動版都是相同的網址, 則使用 responsive template是合適的選擇.
但仍有一種另類做法, 就是 都是使用相同的網址(沒有獨立網址), 但是我們偵測使用者的 user agent, 如果是行動裝置則呈現的是另一個 佈景主題 (theme), 這個 theme 可以是responsive template, 但是是完全給行動裝置觀看, 桌機是看不到這個 responsive template 的 ! 有人會問: 桌面看不到這個 responsive template, 那為何用 responsive template? 哈哈, 真是一個專業的問題 ! 但是問題是, 我們沒有時間與人力做一個完全給行動裝置觀看的版面啊, 因此才用 responsive template.
當然, 這只是一個粗淺的劃分, 我們仍然要瞭解一下 Separate Mobile Website 和Responsive Web Design 之間的差異 與可能造成的問題:
- 妳曾經有這種經驗嗎? 當妳在手機上分享一篇文章到 FACEBOOK , 但是朋友卻是在桌機上點選這篇文章, 結果朋友在桌機上連結到行動版網頁來看這篇文章, 這是一個有趣的問題, 通常我們都會把行動裝置導引到行動版網頁, 確忽略桌機瀏覽行動版網頁時該做什麼處理, 這就是一種反向思考! Separate Mobile Website 就有這種網址散佈與網址管理的問題存在, 當然, 妳也可以把桌機的使用者導引到桌面版網站, 或是記得放一個 view full site 的超連結讓使用者可以做出選擇!
- Separate Mobile Website 可以拿掉一些不需要的功能, 呈現較大的按鈕與導覽方式, 並且呈現手機版的 slider 來營造注目效果.
- Responsive Web Design 讓原有的桌面版內容, 完整呈現在行動裝置上, 只是版面稍有不同, 較適應行動裝置, 要行動裝置完全load 完一個內容很多的頁面, 且讓使用者一直不停的捲動網頁, 才可以看完所有的內容, 要考量一下使用者的頻寬與耐心, Performance 仍然是需要重視的一個問題.
你可以使用 free tool to give you a deeper understanding of how to improve your mobile website’s web performance:
在這個網頁輸入網址, 即可測算出行動版網頁之效能: http://mobitest.akamai.com/m/index.cgi
在這個網頁輸入網址, 即可測算出行動版網頁之效能 (http://mobitest.akamai.com/m/index.cgi)
- Separate Mobile Website 可以完全以 APP 的角度設計, 而非傳統網頁的角度思考, 妳可以放上較大的按鈕, 提供較短的捲動次數, 與較快的下載速度, 拿掉耗電的flash內容…等
世界上針對行動裝置設計的網站還不到21%，有了行動網站就等於先贏了其他79%, 不管是產品資訊, 新聞或是電子報, 廣告的呈現, 都需要針對行動裝置做出最適化的呈現, iphone 5 仍然是小小的 4吋螢幕, 要廣大的 iphone 使用者看著小小的字體並做出不斷的滑動動作, 不知會損失多少眼球數與 pageview !
這個世代是一個只用眼睛的世代, 試著抓住小小的螢幕, 為自己帶來大大的商機, so, Let’s Go Mobile !
這篇文章的網址(可分享到FB、LINE)：用LINE分享給朋友: