開發手機版網頁

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

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

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

隨著 smart phone 愈來愈流行,除了過去的 Windows Mobile 或是 Symbian 系統之外,現在的環境又多了 Apple 主推的 iPhone 以及 GoogleAndroid 平台,未來以 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-FeaturesUA-pixels 等欄位
  3. 如果不幸上述兩個動作都沒有,那就看看 User-Agent 欄位,來根據不同的手機品牌來作 match,比方說看看有沒有 sony, nokia, java, moto 等等字串

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

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

網頁設計的語言

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

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

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

要提供什麼內容?

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

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

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

畫面大小的制約

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

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

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

另外就是網頁排版問題,雖然在普通版網頁大家很厭惡

排版,但其實在畫面大小不一的手機上,其實
還是蠻好用的,不要那麼嫌棄它吧 😛

如何開始?

如果只是設計版面,可以在頁面最外層用一個 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

  • 對於撰寫手機網頁一事,個人以為這是一個電腦網頁走到手機網頁必須經過的過程,就如作者所言,因手機的款式多,要作到每一款手機要能使用,困難度是多了一點,不過找到方法之後就易如反掌了!

    有人在談如何寫手機網頁,讓我在談推廣行動行銷商業運作的人來說,真是很大的幫助!如果想了解更多的行動行銷,可以到http://teeker.wordpress.com 行動行銷觀點!

    若是想做一個手機網頁,我在網路上看到www.diymad.com 提供了手機網頁(wap diy)的線上編輯工具,提供一個方便製作手機網頁的工具!

  • Pingback: 網站製作學習誌 » [Web] 連結分享()

  • fycadw

    哈嚕您好!
    我最近也在開發手機版的網頁
    但是遇到排版問題
    可以請教您的排版訣竅嗎?
    我在排版的時候用手機版本看
    他不會隨著手機螢幕的改變變大變小(只用div框住)
    一定要使用table來排版嗎?

    感謝指教

    題外話:現在的手機瀏覽器功能已經很強大~JavaScript已經幾乎可以完全支援

  • @fycadw:
    你當然也可以用 position:absolute 來排版囉 😛
    另外,如果對象手機都是新的手機,那多用 JavaScript 或是 也是可以的呀 XD

  • mei

    hello~您好!您寫的文章真精彩…
    能否借我請教個問題,我之前完全沒接觸過手機版的網頁
    最近遇到個問題,就是要去試在iphone平台上可否做出像一般網頁上的樹狀選單效果(因目前把一般網路上找的到用JavaScript寫的功能拿去測試是不ok的),目前完全無頭緒!認真而論,此功能原本就不適合放在手機網頁上,只是如果真有需求要實現,我該如何著手?
    有人說跟寫一般網頁沒兩樣(例如:用JavaScript&CSS即可),是這樣嗎?不知您有無任何的參考資訊或建議!

    再麻煩您的指教!

  • @mei,
    iPhone 的 browser (Safari) 算是 JavaScript 支援性很完整的平台,建議你可以拿 Safari (desktop 版) 作測試,如果你的電腦也是 Mac OS X 平台的話,也可以安裝 iPhone SDK 取得 iPhone Simulator 來做測試。

    至於網路上抓下來的不能用,也許那段程式碼只能在特定的瀏覽器上執行正確吧 😛

  • Henry

    怎麼沒有順便把自己的blog也做一個手機版XD

  • @Henry,
    因為我一直想搬離 WordPress XDD
    但又實在是太懶了….

  • phoenixqq

    hello~ 看到你的文
    對手機網頁的看法還不錯

    想問你覺得用ajax開發手機版的網頁
    對手機執行效率有幫助嗎
    還是用什麼開發 手機執行效率更好
    因為手機不比pc的處理器那麼強
    最近再想這個問題@@a

  • @phoenixqq,
    先看手機的browser有沒有支援 ajax 再說吧 😛

  • phoenixqq

    android 的有吧@@?
    我有試android開flash確定不行
    ajax的話要怎麼知道有沒有支援呢

  • @phoenixqq,
    Android 當然是有,至於要不要用 ajax, 就看你覺得怎樣比較好呈現你的網頁吧 😛

  • phoenixqq

    嗨~ 謝謝你的建議:)

    另外我想問要判斷要用一般網頁還是行動版網頁
    我想是先寫首頁 然後判斷要轉到那一邊
    但要用用什麼語言寫?這邊不是很清楚@@”

  • @phoenixqq,
    就用你伺服器所用的程式語言就可以啦,
    檢查 User-Agent 來判斷吧 🙂

  • 那個用 div 框住的方法很優….感謝分享.

  • Jack

    Eric,你好:

    最近公司也是要我把原來的官網寫一個手機版網頁…,我很贊同您「無縫連上行動版本」的觀念,只是,您的意思是..在原首頁HTTP header中寫入判別式就可以導入到指定的手機版頁面嗎?
    若是這樣的話,語法又該如何寫呢?(或是有可以參考的網頁)

    (對不起!我比較懂設計,進階語法的部份真的不好,請見諒!)

    尚祈不吝回覆,打擾了!感謝您!

    Jack.

  • @Jack,

    找出 HTTP request header 中的 User-Agent 的部份來判斷。
    若是以 PHP 開發,應該就是看 $_SERVER[‘HTTP_USER_AGENT’] 的資訊

  • Sinsmilekimo

    最近在想都到 android 2.3 了,在 android 和 iphone 普及率越來越高的情形下
    是否還要做手機版的出來
    看到別人寫的
    http://www.techbang.com.tw/posts/3928-moving-a-label-is-working-on-mobile-version-of-website
    我會採方案 1 或 3 吧

  • Wu

    你好
    在搜尋手機版網頁的相關資料時 無意間連到這邊 謝謝你分享的心得
    過一陣子我繼續尋找資料的時候 看到有某一家設計公司 標榜手機版網站製作
    但它所刊載的介紹文字 不知何故有一種熟悉之感
    搜尋之下 竟然發現它的介紹文字似乎和你的本篇文章有些相似之處……
    所以提供給你參考
    http://www.i7-11.com/mobile/index.htm

  • Baobao1999

    最近在找尋好的手機網頁製作公司, 有沒有什麽好的推薦?

  • Foo

    沒切到肉。

  • Sp42

    谢谢大大分享:)!

  • Lala999

    感謝分享~想請問一下~做手機版網頁一定要是所謂的HTML5的格式嗎??我是一般的網頁設計只懂一般的HTML…

  • 咩咩

    最近版本的html5+css3很適合拿來開發手機網頁. 已經有人開發出來了 http://mobiz.cc/

  • Pingback: 以 HTML5 開發 Mobile Web App | Pearltrees()