移動(dòng)瀏覽技術(shù)現(xiàn)狀
當(dāng)今最受歡迎的手機(jī)系統(tǒng)包括 Android，BlackBerry 與 iPhone。雖然這些手機(jī)系統(tǒng)中的瀏覽器都支持 HTML + CSS + JavaScript，但它們?nèi)匀淮嬖谀承┚窒蕖?BR>
Flash
現(xiàn)階段，用手機(jī)訪問(wèn) Flash 站點(diǎn)，除了一個(gè)黑屏幕，什么都不會(huì)顯示，而且手機(jī)也不會(huì)提示說(shuō)無(wú)法加載 Flash，因此，F(xiàn)lash 站點(diǎn)應(yīng)該通過(guò)瀏覽器探測(cè)技術(shù)，在不支持 Flash 的客戶端上輸出替代內(nèi)容。盡管 Flash 在眾多平臺(tái)上都能輸出漂亮的內(nèi)容，但在手機(jī)上運(yùn)行 Flash 就像在 Mac 上運(yùn)行 Windows 一樣，不過(guò)，業(yè)界已經(jīng)出現(xiàn)一些技術(shù)來(lái)解決這個(gè)問(wèn)題，但不要指望太多。
Silverlight
Windows Mobile 7 將支持 Silverlight，那將是唯一一款支持該技術(shù)的移動(dòng)瀏覽器。不過(guò)，既然微軟已經(jīng)向 HTML 5 敞開(kāi)大門(mén)，因此，也不要指望微軟在移動(dòng)平臺(tái)上會(huì)為 Silverlight 做多少努力，因此，底線是，不要在你的移動(dòng)站點(diǎn)中過(guò)于依賴(lài) Silverlight。
JavaScript
過(guò)去5年，移動(dòng)平臺(tái)對(duì) JavaScript 的支持勢(shì)不可擋，其體驗(yàn)已經(jīng)接近桌面，但不能支撐過(guò)于復(fù)雜的功能，這里有一個(gè)關(guān)于這個(gè)問(wèn)題的案例分析。至于那些比較老的手機(jī)，雖然也支持 JavaScript，但多數(shù)都是默認(rèn)關(guān)閉的。當(dāng)你需要為移動(dòng)設(shè)備編寫(xiě) JavaScript 的時(shí)候，需要對(duì)代碼進(jìn)行驗(yàn)證和檢查，以免用戶的設(shè)備崩潰，另外記住，將 JavaScript 腳本放到頁(yè)面底部，這樣，不至于在頁(yè)面還沒(méi)加載前就崩潰。
CSS 3
移動(dòng)平臺(tái)對(duì) CSS 的支持已經(jīng)很久了，如今，大量基于 Webkit 開(kāi)源項(xiàng)目的手機(jī)開(kāi)始支持 CSS 3，CSS3 擁有更好的視覺(jué)體驗(yàn)，支持降級(jí)使用，還能加速頁(yè)面加載，你在使用 CSS3 的時(shí)候，只需要注意其中的某些屬性在舊的手機(jī)上可以降級(jí)使用。
設(shè)計(jì)感與易用性之爭(zhēng)
流行的 Web 技術(shù)并非都是你的最佳選擇，你需要對(duì)使用的各種技術(shù)進(jìn)行測(cè)試，事實(shí)證明，在移動(dòng)瀏覽領(lǐng)域，諸如 Lightbox，視頻，鼠標(biāo)盤(pán)旋一類(lèi)的技術(shù)存在問(wèn)題，需要避開(kāi)，我們將在這一節(jié)中對(duì)各種 Web 設(shè)計(jì)元素進(jìn)行講述。
為什么視頻不能播放？
前面提過(guò)，不同移動(dòng)平臺(tái)對(duì) Flash 和 Silverlight 的支持很不一致。目前，像 Vimeo 及 YouTube’s 一類(lèi)的站點(diǎn)在移動(dòng)設(shè)備上訪問(wèn)還存在各種問(wèn)題，YouTube 比 Vimeo 略好一些，而內(nèi)嵌視頻支持目前則好像只限于 Google Android 平臺(tái)。
移動(dòng)平臺(tái)的視頻，是通過(guò) HTML5 實(shí)現(xiàn)的，然而，到目前為止，HTML5 視頻的許可問(wèn)題仍不明朗，不過(guò) Google 一直在這個(gè)問(wèn)題上走在最前面，希望他們能最終使這個(gè)問(wèn)題免于重蹈 DVD 解碼器許可的覆轍。
文字縮放
希望你的文字最多使用的是相對(duì)位置而不是絕對(duì)位置，否則，Android 平臺(tái)的瀏覽器會(huì)將你頁(yè)面的文字扔到屏幕之外的某個(gè)地方。
在小屏幕上的顯示清晰度問(wèn)題
在手機(jī)的小屏幕上看網(wǎng)頁(yè)，就像你隔著一個(gè)房間看電腦屏幕那樣，結(jié)果是什么看不清晰，你需要將重要的頁(yè)面元素加深對(duì)比度以便用戶能看得清楚點(diǎn)。
Lightbox 技術(shù)
Lightbox 是最受歡迎的 JavaScript 技術(shù)，也是最容易讓手機(jī)用戶抓狂的地方，在很多時(shí)候，手機(jī)屏幕上的 Lightbox 只顯示一個(gè)角落，而大部分內(nèi)容則被扔到屏幕外的某個(gè)地方。另外，在某些時(shí)候，Lightbox 還讓手機(jī)的 Web 頁(yè)面崩潰，導(dǎo)致任何東西都無(wú)法點(diǎn)用。這并不意味著你不能使用 Lightbox，諸如登陸框一類(lèi)的地方還是可以使用（登陸框可以做得比較小一些 - 譯者注），但不管怎樣，最好同時(shí)提供一個(gè)傳統(tǒng)的登錄方式，以免 Lightbox 顯示到屏幕之外。
瀏覽器探測(cè)
很多年前， Web 開(kāi)發(fā)與設(shè)計(jì)者需要借助瀏覽器探測(cè)技術(shù)，為不同瀏覽器，或者不同版本的瀏覽器輸出不同內(nèi)容，隨著 Web 標(biāo)準(zhǔn)的深入人心，為不同瀏覽器輸出不同內(nèi)容已經(jīng)不可取。瀏覽器嗅探可以通過(guò)諸如 jQuery 一類(lèi)的 JavaScript 庫(kù)輕松實(shí)現(xiàn)，還有一些可以嗅探 flash 支持情況的庫(kù)可以使用，然而現(xiàn)實(shí)是，除非你有大量 Flash 應(yīng)用，否則很少會(huì)用到這個(gè)，事實(shí)上，現(xiàn)在的很多移動(dòng)瀏覽器在遇到不支持的內(nèi)容時(shí)會(huì)悄然掠過(guò)，而不會(huì)像 IE6 那樣彈一堆錯(cuò)誤。
鼠標(biāo)盤(pán)旋
很多站點(diǎn)的導(dǎo)航使用鼠標(biāo)盤(pán)旋并下拉子菜單的方式，然而移動(dòng)瀏覽器沒(méi)有鼠標(biāo)盤(pán)旋一說(shuō)，雖然有的手機(jī)支持這一操作，但和桌面方式有很大的差異。應(yīng)該避免將重要的信息放到需要鼠標(biāo)盤(pán)旋才能顯示的狀態(tài)。
下拉菜單導(dǎo)航
下拉菜單需要鼠標(biāo)盤(pán)旋才能打開(kāi)，前面說(shuō)過(guò)，在手機(jī)上，這無(wú)法實(shí)現(xiàn)，另外，下拉菜單的尺寸往往超過(guò)手機(jī)屏幕尺寸，即時(shí)用戶打開(kāi)了下拉菜單，也很有可能無(wú)法完全訪問(wèn)。你應(yīng)當(dāng)始終在側(cè)邊欄保留子菜單，不管是針對(duì)手機(jī)站點(diǎn)還是桌面站點(diǎn)。
緩慢的加載速度
手機(jī)瀏覽器加載速度非常慢，你需要壓縮自己的數(shù)據(jù)，甚至使用 CDN 加速網(wǎng)絡(luò)。在 WordPress 一類(lèi)的 CMS 中可以啟用數(shù)據(jù)壓縮，你可在在這個(gè)站點(diǎn)測(cè)試你的數(shù)據(jù)是否經(jīng)過(guò)了壓縮，如果你使用靜態(tài)設(shè)計(jì)的頁(yè)面，可以使用 Minify 對(duì)你設(shè)計(jì)的網(wǎng)頁(yè)代碼進(jìn)行凈化。
加載進(jìn)度提示
你應(yīng)當(dāng)使用加載進(jìn)度圖標(biāo)，告訴用戶現(xiàn)在正在加載，對(duì)于手機(jī)瀏覽器這種 Internet 連接不很穩(wěn)定的情形尤其重要，在一些 Ajax 應(yīng)用場(chǎng)合，如果不顯示加載進(jìn)度，用戶會(huì)以為你的站點(diǎn)已經(jīng)失去反應(yīng)。
記憶用戶的數(shù)據(jù)
手機(jī)用戶打字很不方便，應(yīng)該盡可能使用 Cookie 記憶用戶的數(shù)據(jù)。
側(cè)邊欄放在左邊還是右邊？
應(yīng)該是右邊，因?yàn)槭謾C(jī)屏幕很小，用戶閱讀你的網(wǎng)頁(yè)的時(shí)候，如果左邊顯示側(cè)邊欄，他們要看真正的內(nèi)容，就不得不左右滾動(dòng)，放在右邊，用戶就可以直接向下滾動(dòng)看具體內(nèi)容，需要看側(cè)邊欄的時(shí)候再左右滾動(dòng)。
小屏幕
早期的 Web 設(shè)計(jì)師提起當(dāng)年的 800x600 屏幕就一肚子怨氣，好在現(xiàn)在的桌面屏幕都足夠大了，然后移動(dòng)設(shè)備的屏幕比這個(gè)更小。你所能做的，盡可能不要把網(wǎng)站的 Header 或 Logo 做得太大。
移動(dòng)站點(diǎn)適合你嗎？
很多公司花費(fèi)大量金錢(qián)部署專(zhuān)門(mén)的移動(dòng)站點(diǎn)，事實(shí)上，這并不必要，如果你有個(gè)電子商務(wù)站點(diǎn)，而手機(jī)用戶存在訪問(wèn)問(wèn)題，這種情況，也許才值得專(zhuān)門(mén)部署一個(gè)移動(dòng)站點(diǎn)。
單列布局
要想讓你的站點(diǎn)更好地支持移動(dòng)瀏覽器，你或許需要扔掉側(cè)邊欄，因?yàn)閭?cè)邊欄對(duì)移動(dòng)用戶來(lái)說(shuō)毫無(wú)疑義，F(xiàn)acebook 以及 Amazon 一類(lèi)的站點(diǎn)使用這種方法改善用戶體驗(yàn)。
圖片縮放
很多基于博客系統(tǒng)的站點(diǎn)都包含移動(dòng)版，實(shí)現(xiàn)更簡(jiǎn)單的導(dǎo)航，問(wèn)題是，這些站點(diǎn)同時(shí)會(huì)像文字那樣縮放它們頁(yè)面上的圖片，那些被縮小的圖很難看清楚，更甚的是，你沒(méi)有辦法改變圖片的顯示尺寸。應(yīng)當(dāng)允許用戶點(diǎn)擊一個(gè)圖片以顯示其完整尺寸版。
簡(jiǎn)單導(dǎo)航
與其讓移動(dòng)用戶像在桌面上那樣顯示站點(diǎn)中的所有內(nèi)容，不如只為他們顯示最基本的內(nèi)容，免得到處滾動(dòng)，YouTube 在這方面做得最好，頁(yè)首的那些干凈，簡(jiǎn)單的按鈕非常好用。
廣告
去掉側(cè)邊欄之后，你的站點(diǎn)中的大部分廣告位就沒(méi)有了，一個(gè)不錯(cuò)的方法是將廣告放到頁(yè)尾。
頁(yè)尾的完整站鏈接
雖然你擁有一個(gè)移動(dòng)版本的站點(diǎn)，但用戶可能希望看到完整的站點(diǎn)內(nèi)容，多數(shù)移動(dòng)站點(diǎn)的做法是在頁(yè)尾放上完整版站點(diǎn)的鏈接。
結(jié)論
上講述了現(xiàn)代移動(dòng) Web 站點(diǎn)設(shè)計(jì)中的各種問(wèn)題，下面是創(chuàng)建移動(dòng) Web 站點(diǎn)的一些資源和工具：
Tools
- W3c Mobile Checker （W3C 移動(dòng)站點(diǎn)驗(yàn)證）
- JavaScript Support for Phones （手機(jī)瀏覽器的 JavaScript 支持）
- Mobile Site Converter （移動(dòng)站點(diǎn)轉(zhuǎn)換）
- Simple Mobile Site Testing （簡(jiǎn)單移動(dòng)站點(diǎn)測(cè)試）
