稍微整理一下最近開發行動版網站的心得。

最近因為工作的關係，開始接觸手機版網頁的開發，不過我沒有參考什麼書籍，翻了幾個網頁、看了幾個網站的成果，再加上自己的想法，整理出來一些開發的心得，希望有各方好手能不吝賜教。

為什麼要做手機版的網頁?

隨著 smart phone 愈來愈流行，除了過去的 Windows Mobile 或是 Symbian 系統之外，現在的環境又多了 Apple 主推的 iPhone 以及 Google 的 Android 平台，未來以 smart phone 作為上網平台的人口照趨勢來看只會成長（不然也不會有這麼多大公司來競爭），所以如果一個提供服務的網站能夠有行動（手機）版本，對於使用者來說黏度會更強（當然前提是要夠好用）。

無縫連上行動版本

當一個網站品牌經營夠久時，使用者（或是搜尋引擎）所記得的大多是首頁的網址，所以當使用者用手持裝置連上網站首頁時，網站最好能偵測使用者目前是用手持裝置上網而直接導引到行動版本（不管是 redirect 到不同網址，或是根據手機換不同的 view ），這樣使用者不用特別記住行動版本的特殊網址也能夠享受到行動版的服務。

要做這件事其實不難，就我所知可以判斷三件事：

  1. 檢查 HTTP header 中的 Accept 欄位，看看之中有沒有 text/vnd.wap.wml 或是 application/vnd.wap.xhtml+xml 值
  2. 檢查 HTTP header 中有沒有 X-Wap-Profile, Profile, X-OperaMini-Features 或 UA-pixels 等欄位
  3. 如果不幸上述兩個動作都沒有，那就看看 User-Agent 欄位，來根據不同的手機品牌來作 match，比方說看看有沒有 sony, nokia, java, moto 等等字串

如果上述三個條件任一為真，那就幾乎可以判定 client 是一個手持裝置，而將之帶到行動版網頁。

當然，如果使用者需要，應該還是要提供一個回到完整版的連結，像 iPhone 或 G1 的使用者也許就想直接打開普通版的網站來使用。

網頁設計的語言

在一般版本的網頁，設計者幾乎都是用 XHTML 或是 HTML 作為網頁標記語言，以現在的手機瀏覽器而言，可以使用 XHTML MP 來作為網頁標記語言，也就是除非要為舊手機設計，不然現在並不需要特別用 WML 語法而寫網頁。而 XHTML MP 其實也沒什麼特別，你可以簡單地把它想成是精簡版本的 XHTML（有錯請指正）就可以，比方說一樣是用 <a> 這個標籤來建立超連結等等。只是一個標準的 XHTML MP 文件 Content-Type 要設成 application/xhtml+xml 或 application/vnd.wap.xhtml+xml 。

但其實現在許多手機的瀏覽器也做得很強，不那麼標準的 XHTML MP 也可以正常顯示 :P 而 CSS 及 JavaScript 的支援程度就真的比較難控制一點，雖然較新型的手機多採用 WebKit 核心來做瀏覽器，但要使用 CSS/JavaScript 時就要多多處理不支援的情況（比方說不能用 XMLHttpRequest 之類的）。

不過我的看法是 JavaScript 能少用就少用，除了支援度的問題以外，還有下一個部份會提到的問題。

要提供什麼內容？

手機的網路即便是到了 3.5G，也不能與一般電腦連接的 (W)LAN 來相比，再加上手機大小的先天因素，行動版的網站不太可能像普通版網頁那樣提供一樣多的資訊，所以在製作行動版網頁前，就要考量什麼才是「用手持裝置上網的使用者」會想要得到的。

會用手機上網的人大多是在戶外，可能是在等車等人，或者是突然有查詢資料的需求，如果使用者會選擇連到你的網站，表示你的網站可能有（或是打算提供）「打發時間的內容」或是「方便生活諮詢」等內容，所以只要把功能明確的部份拉出來即可，也不必讓使用者花了封包數據費用、傳輸時間還在找尋網站的「入口」。而且為了讓使用者不覺得上你的網站是負擔（封包數據太貴、讀取網站太久），沒必要的素材其實可以盡可能地拿掉，圖形能選擇適切的格式特別重要。

所以行動版的網頁理論上會是普通版網頁的精簡版本，仔細想想，其實會需要使用 JavaScript 的部份應該會少很多，手機上網已經很辛苦了，就不要再讓使用者辛苦地執行複雜的 JavaScript code 吧。

畫面大小的制約

就跟開發手機應用程式一樣，手機螢幕、解析度大小更是網站開發者難以掌握的變因，不過雖然這麼說，但其實大概翻翻現在流行手機的規格，螢幕的寬度大約都是 176px, 240px, 320px（以不翻轉而言），說差異太大其實也還好，不過現在許多網站的版型設計都習慣所謂的寬版版型，因為這樣也較符合目前主流的寬螢幕設計，只是手機剛好相反，大多人在用手機時都是直立式的，而且操作習慣上都是上下捲動，這暗示了我們一件事－－那就是手機版的網頁最好是設計單欄（one-column）的版面。

我們可以欣賞幾個行動版服務的例子：

不難看出大家共同的特色就是－－精簡、整齊、單欄。而且我認為很重要的一點－－一個畫面裡不要有過多的連結，因為畫面很小，連結太多顯得有點擁擠，而且現在觸控式螢幕愈來愈多，連結最好最成夠大的按鈕，不然使用者想用手指點連結時，要不是按不到就是按到鄰近的連結，操作的順暢感也會大打折扣，尤其是 iPhone，所有的操作都是用手指完成，小小字（或是小小 icon）的連結豈不痛苦？

另外就是網頁排版問題，雖然在普通版網頁大家很厭惡 <table> 排版，但其實在畫面大小不一的手機上，其實 <table> 還是蠻好用的，不要那麼嫌棄它吧 :P

如何開始？

如果只是設計版面，可以在頁面最外層用一個 div{width:240px} 之類的框架套住，然後再用一般的瀏覽器（Firefox, Safari）來測試顯示效果即可。而如果真的要安裝各個手持裝置瀏覽器的模擬器，那麼：

  1. Android 平台可以下載 Android SDK，裡面就有個已經裝好 browser 的 emulator 可以模擬 android 手機瀏覽網頁
  2. iPhone 的 emulator 當然也是在 iPhone SDK 裡，只不過你一定得裝在 Mac OS X 裡才能使用 iPhone emulator
  3. 模擬 Opera Mini 的話可以下載 MicroEmulator，然後再下載 Opera Mini 的 jad/jar 來模擬即可，或是到網站版本的模擬器去執行。

剩下其實就跟開發一般網頁相去不遠，其實入門的門檻並不會很高。

結論

各位網站工人趕快動手下去寫就對了，這就是我的結論。XD

 

歷史上的今天