移動Web開發(fā)設計五大最佳實踐
我們曾給大家介紹過如何設計一個簡結的移動互聯(lián)網(wǎng)站。目前移動設備的興起正在給互聯(lián)網(wǎng)帶來一場新的革命，雖然說移動Web設計原則不會有多大變化，但是卻有著明顯的區(qū)別。
移動Web設計
至少有一點是截然不同的，目前移動設備的網(wǎng)絡速度可比不上寬帶，另外移動Web呈現(xiàn)方式也是多樣的，有觸摸屏，有上網(wǎng)本，這些小屏幕卻貌似巨人！
可能有些人會認為移動化其實根本沒必要，但是幾乎所有人都得承認這是一個不可避免的趨勢。
如果你正在研究移動Web設計（或者正在將一個網(wǎng)站搬到移動設備上），這篇文章或許可以幫助你了解到目前移動設計的發(fā)展趨勢。
呈現(xiàn)方式
在設計對移動設備友好的網(wǎng)站時，首先要考慮的元素之一就是呈現(xiàn)方式或者用戶體驗方式。
呈現(xiàn)方式的多樣化
理想的情況就是你現(xiàn)在的網(wǎng)站適用于所有類型的移動設備。也許你的網(wǎng)站可以適用于iPhone等擁有內(nèi)置瀏覽器的移動設備，不過卻在其他的移動設備上，情況未必如此好，而跨設備移動設計卻又難以獲得成功。
如果你認為開發(fā)出在IE/Firefox/Chrome/Safari等瀏覽器的網(wǎng)站很艱難，其實可以不妨試試開發(fā)專門針對iPhone/BlackBerrys/Palm Pres/Androids/Motorola/Nokia的網(wǎng)站，不過你很快就會發(fā)現(xiàn)這些硬件設備真是太多了。
在桌面網(wǎng)絡設計中，你只有一種語言:HTML,但是在移動網(wǎng)絡上，可能是WML，平臺也可能是蘋果的iOS，或者是Android。
WML已經(jīng)非常靈活
雖然WML曾一直限制著我們的設計創(chuàng)意，但是如今我們所擁有的方式變得更加靈活了！
NO1:采用支持移動設備的Web設計
在移動Web設計上，一個簡單的處理方法就是對現(xiàn)存的桌面網(wǎng)頁代碼和設計進行調(diào)整，以適用于移動設備，還有就是從草圖做起，一步步的設計。例如，通過CSS3，你可以根據(jù)用戶的移動設備來調(diào)整Web布局等等。
但你想想看，問題在于并不是所有移動設備都支持CSS3，所以你得求助于服務器設備偵查或者JavaScript（例如調(diào)整DOM來改變頁面布局）。不過問題又來了，有些設備又不支持這些技術！
依據(jù)窗口來決定布局大小
依據(jù)窗口來決定布局大小，或許只需幾行CSS3
NO2:將移動用戶轉(zhuǎn)向手機版網(wǎng)站
移動設計呈現(xiàn)的另一種方式就是專門針對手持設備而優(yōu)化的布局，你可以利用Mobify等網(wǎng)絡服務來做到這點。
與第一種方法相比（采用支持移動設備的Web設計），這種呈現(xiàn)格式更加優(yōu)秀，因為體驗設計是專門針對移動用戶的，不考慮桌面用戶。
這種情況下，你的流量取決于用戶的瀏覽器代理。例如，如果一個移動設備用戶訪問你的網(wǎng)站（yousitename.com）,然后他們會比自動轉(zhuǎn)向至mobile.yoursitename.com或者m.yoursitesname.com等之類的。
網(wǎng)站也喜歡網(wǎng)絡速度快的用戶
獨立的手機網(wǎng)站會獲得那些喜歡更快的速度的用戶所帶來的流量。
NO3:用戶引導要點:
無論你使用何種方式，下面兩點是很重要的：
| 訪問者知道你的手機版網(wǎng)站是可以登錄的 |
| 訪問者可以選擇是登陸手機版網(wǎng)站還是普通版網(wǎng)站 |
雖然強行為用戶轉(zhuǎn)向或者改變布局聽起來似乎是個好主意，但是結果往往會令人沮喪，所以最好還是讓用戶可以選擇。
簡單的技巧就是有這兩個版本的網(wǎng)站的鏈接。例如，Six Revisions，你會發(fā)現(xiàn)在該網(wǎng)站的地段會有手機版網(wǎng)站的鏈接（m.sixrevisions.com），這樣無論是手機用戶還是電腦用戶都有了選擇。
結構和代碼
另外一件需要考慮的事情就是結構代碼（markup和styles）：
| 你知道WML或者XHTML mobile profiles？ |
| 你所設計的app是應用于iPhone還是Android？ |
| 你在設計時有沒有考慮到移動設備瀏覽器的成本和速度？ |
| 什么是HTML5和CSS3? |
這些問題還不夠全面，有些問題也正處于研發(fā)階段。
新設備所支持的代碼可能不同于舊的移動設備
新設備所支持的代碼可能不同于舊的移動設備。
選擇
設計一個對移動用戶友好的網(wǎng)站，最重要的事情就是選對語言。在智能手機出現(xiàn)之前，舊的手機只支持WML（最基本的語言），隨后W3C推出了更加友好的XHTML（XHTML Mobile Profiles檔案）。
幸運的是，移動設備產(chǎn)生的更新速度是的網(wǎng)頁體驗更加完整和健全，如果你不懂mobile profiles或者WML，你可以使用正常的HTML或者XHTML。
不過，仍要強調(diào)的一點是，WML仍是要考慮的，你的用戶也許使用的是普通手機（非智能手機）。當然現(xiàn)在我們要處理更多的web zombies（網(wǎng)頁劫持）。
同樣你的決定必須基于網(wǎng)站數(shù)據(jù)和大量的網(wǎng)站分析。
網(wǎng)站數(shù)據(jù)和大量的網(wǎng)站分析影響你的決定
速度和成本（對用戶而言）
無論你采用哪種語言，接下來要考慮的首要因素就是速度和用戶成本。
移動互聯(lián)網(wǎng)運營限制流量，進而使帶寬成了一個有限而寶貴的資源，而且漫游收費還很貴！
考慮到流量、成本和速度，所以必須保證markup（編程語言）盡可能的簡潔、小且標準。
得記住一點，移動網(wǎng)絡運營商收取的漫游費是很多的！
由于新技術更新和采用速度很快，未來肯定是HTML5和CSS3的天下，所以要考慮適當?shù)厣壞愕拇a。
像Apple等都提供固件升級，這樣很多老設備也可以支持新標準了。但是也許會發(fā)生類似的情況：IE6用戶拒絕升級到IE8，因此在決策之前，都要做好研究，測試、測試、再測試！
布局要素
移動Web布局會很麻煩：
| 移動設備形狀尺寸不一； |
| 移動設備質(zhì)量和解決方案不一； |
| 移動設備或許支持放大滾動，但也可能不支持； |
| 屏幕小，所以頁面滾動會更加困難。 |
移動頁面設計布局的終極目的就是：盡可能地讓用戶快速地找到所尋找的東西，減少這一過程的用戶負擔。
布局對你的移動網(wǎng)站成功與否起著本質(zhì)性的作用。
單欄設計
由于空間少，single column designs（單欄設計）是必須的！
簡潔
有效的移動Web布局的理念之一就是簡潔。內(nèi)容越繁雜，讀起來越困難，需要滾動的地方越多！
空間小致使多欄設計并不適用，內(nèi)容布局不能超越屏幕，除非是被動放大等。
因此，單欄設計顯得更加實用。
避免滾動
iPhone和iPad等移動設備可根據(jù)設備中心來調(diào)整頁面，這些也減少了滾動需求，不過并不是所有移動設備都有這功能。
在手機上需要滾動的內(nèi)容頁面不具有良好的體驗。
橫向滾動也不是個好主意，特別iPad上，滾動條只有在用戶嘗試滾動的時候才會出現(xiàn)，所以多數(shù)情況下，移動Web設計都要避免滾動。
避免滾動
一個好的移動Web設計具有清晰地布局以及簡潔的導航選項。
清晰地布局 簡潔的導航選項
導航和按鈕的大小
另外一個關鍵成分就是導航和按鈕了！這也是觸摸移動設備的一個重要問題。
我不確定你的手有多大，我想你肯定遇到過要點下那么小的按鈕，更該死的他還沒有放大功能。
所以說，一個好的體驗要有什么？一個大小恰當，按起來爽的鏈接和按鈕！
減少點擊次數(shù)也是個好主意，在移動Web設計中這也是重要的一點??！
內(nèi)容設計
內(nèi)容是網(wǎng)站的核心，不過也要考慮到流量等成本問題，如何減少過大的圖片、文本和多媒體也是門學問，50KB和2MB有著相當大的區(qū)別！
移動設備更強調(diào)“少”，更少的內(nèi)容意味著更具可讀性！
文本內(nèi)容
一個網(wǎng)站里，最多的就是文本內(nèi)容了！
但是盡管內(nèi)容依舊是手持設備上的網(wǎng)站，但是諸如滾動、小文件、快速閱讀以及帶寬限制等因素，這些都意味著我們必須調(diào)整文本以確保其可用性！
如果你的設計只是在現(xiàn)有網(wǎng)站布局上進行簡單的調(diào)整（也就是第一個辦法NO1:采用支持移動設備的Web設計），你需要對一些不必要的文本、圖片或者多媒體進行刪減（就算是提供下載，也會增加可讀性）。而獨立的手機網(wǎng)站設計的好處就是可以清除多余的內(nèi)容。
圖片
屏幕小決定著CSS格式的圖片或者大容量的infographics會有問題。雖然有些手持設備屏幕大，問題不會明顯。IPhone等設備的放大縮小功能仍舊有限，所以一些視覺美化功能肯定需要剔除！
大圖占據(jù)寬帶，所以要減少其大小
50KB和500KB的圖片在尺寸和解決方案上也有著明顯的區(qū)別！帶寬損耗也不同!
視音頻
視音頻幾乎是必須具備的內(nèi)容，就算是有寬帶限制，尤其是在iPhone和iPod這樣的設備。同樣的道理，適度的和明智的使用是關鍵！
如果你提供視音頻，最好有一個下載征詢！
下面是幾個建議：
| 格式：謹慎使用flash等一些設備上不兼容的格式； |
| 視音頻文件大小：優(yōu)化你的文件 |
| 不要自動下載視音頻：一定要事先征詢用戶。 |
| 不要自動播放：這樣很讓人厭煩。 |
其他需考慮的因素
最要要考慮的因素可能還有scripting、plugins等等
知道該不要什么，該保留什么，這樣才能提高用戶體驗，同事確保你的手機網(wǎng)站能夠適用于所有移動設備！
移動設備交互VS個人電腦交互
兩者交互方式如此不同在于屏幕不同；另外移動設備中沒有鼠標鍵盤，而是通過手指動作來指定行動和反映。
專屬技術和Plugin
比如，Apple就阻止flash在其移動設備上的應用，這真的是個問題！從而不得不依賴于蘋果的專有技術！
Apple反對flash也許預兆著移動設備生產(chǎn)商想保住其對第三方的優(yōu)先權。雖然很多開發(fā)商也因此使用蘋果平臺，不過對這一問題的最好解決辦法就是適度地對自己的手機網(wǎng)站進行降級！
有著良好網(wǎng)絡連接的網(wǎng)絡服務
由于現(xiàn)在的移動設備網(wǎng)絡環(huán)境，網(wǎng)絡連接仍舊是許多web app最頭疼的一個問題！甚至還有一些手機沒信號的“死亡區(qū)”，這些都影響著用戶交互，用戶在做某一件事，不過網(wǎng)絡卻突然中斷了，體驗自然很糟糕！所以在設計app時需要考慮到離線和在線兩種情況。（推薦閱讀this offline HTML5 iPhone app tutorial）。
移動網(wǎng)站測試
你只要到手機店逛一逛，就會發(fā)現(xiàn)屏幕等等都是有很多不同的！
目前有很多網(wǎng)站測試模擬器。
考慮到現(xiàn)在幾個大公司都只想保住自己的競爭優(yōu)勢，所以標準化似乎不太可能發(fā)生！
所以網(wǎng)站測試的范圍要盡可能廣！
移動設備模擬器測試
毋庸置疑，你需要在盡可能多的平臺上對自己的網(wǎng)站進行測試.
總結：3S：Simple,Small,Speedy
雖然本文提供的都是一些概要性的建議，不過仍舊有著基本的原則。
速度（speedy）仍舊是目前首要解決的問題，我們可以利用監(jiān)視器來限制解決方案和顏色。許多ISPs仍舊限制寬帶，有時還會發(fā)生斷網(wǎng)，這些情況對于老一代開發(fā)人員來說似乎并不陌生！
所以在網(wǎng)絡等基礎設施未改善之前，simple,small,speedy就是我們要遵守的3個主要原則了！
【編輯推薦】
