后移動(dòng)年代的 Web 規(guī)劃準(zhǔn)則淺析

還記得 Wap 嗎，現(xiàn)在還有多少人運(yùn)用 Wap？后移動(dòng)年代，跟著閱覽器技能的前進(jìn)，為移動(dòng)設(shè)備設(shè)置特殊站點(diǎn)現(xiàn)已不再必要。作為 Web 規(guī)劃師，假如你能遵循一些基本的規(guī)劃與布局準(zhǔn)則，你的站點(diǎn)將能被大都移動(dòng)設(shè)備更輕松地拜訪。本文敘述的是后移動(dòng)年代的 Web 規(guī)劃準(zhǔn)則。

移動(dòng)閱覽技能現(xiàn)狀

當(dāng)今最受歡迎的手機(jī)體系包括 Android，BlackBerry 與 iPhone。盡管這些手機(jī)體系中的閱覽器都支撐 HTML + CSS + JavaScript，但它們依然存在某些局限。

Flash

現(xiàn)階段，用手機(jī)拜訪 Flash 站點(diǎn)，除了一個(gè)黑屏幕，什么都不會(huì)顯現(xiàn)，并且手機(jī)也不會(huì)提示說無法加載 Flash，因此，F(xiàn)lash 站點(diǎn)應(yīng)該經(jīng)過閱覽器勘探技能，在不支撐 Flash 的客戶端上輸出代替內(nèi)容。盡管 Flash 在眾多渠道上都能輸出漂亮的內(nèi)容，但在手機(jī)上運(yùn)行 Flash 就像在 Mac 上運(yùn)行 Windows 相同，不過，業(yè) 界現(xiàn)已出現(xiàn)一些技能來處理這個(gè)問題，但不要盼望太多。

Silverlight

Windows Mobile 7 將支撐 Silverlight，那將是唯一一款支撐該技能的移動(dòng)閱覽器。不過，既然微軟現(xiàn)已向 HTML 5 敞開大門，因此，也不要盼望微軟在移動(dòng)渠道上會(huì)為 Silverlight 做多少盡力，因此，底線是，不要在你的移動(dòng)站點(diǎn)中過于依靠 Silverlight。

JavaScript

過去5年，移動(dòng)渠道對(duì) JavaScript 的支撐勢(shì)不可擋，其體會(huì)現(xiàn)已挨近桌面，但不能支撐過于復(fù)雜的功能，這里有一個(gè)關(guān)于這個(gè)問題的事例剖析。至于那些比 較老的手機(jī)，盡管也支撐 JavaScript，但大都都是默許關(guān)閉的。當(dāng)你需求為移動(dòng)設(shè)備編寫 JavaScript 的時(shí)分，需求對(duì)代碼進(jìn)行驗(yàn)證和檢查，避免用戶的設(shè)備潰散，另外記住，將 JavaScript 腳本放到頁面底部，這樣，不至于在頁面還沒加載前就潰散。

CSS 3

移動(dòng)渠道對(duì) CSS 的支撐現(xiàn)已很久了，如今，許多基于 Webkit 開源項(xiàng)目的 手機(jī)開始支撐 CSS 3，CSS3 擁有更好的視覺體會(huì)，支撐降級(jí)運(yùn)用，還能加快頁面加載，你在運(yùn)用 CSS3 的時(shí)分，只需求注意其間的某些屬性在舊的手機(jī)上能夠降級(jí)運(yùn)用。

規(guī)劃感與易用性之爭(zhēng)

流行的 Web 技能并非都是你的最佳選擇，你需求對(duì)運(yùn)用的各種技能進(jìn)行測(cè)試，事實(shí)證明，在移動(dòng)閱覽領(lǐng)域，比如 Lightbox，視頻，鼠標(biāo)回旋扭轉(zhuǎn)一類的技能存在問題，需求避開，咱們將在這一節(jié)中對(duì)各種 Web 規(guī)劃元素進(jìn)行敘述。

為什么視頻不能播映？

前面提過，不同移動(dòng)渠道對(duì) Flash 和 Silverlight 的支撐很不共同。目前，像 Vimeo 及 YouTube’s 一類的站點(diǎn)在移動(dòng)設(shè)備上拜訪還存在各種問題，YouTube 比 Vimeo 略好一些，而內(nèi)嵌視頻支撐目前則好像只限于 Google Android 渠道。

移動(dòng)渠道的視頻，是經(jīng)過 HTML5 完成的，但是，到目前為止，HTML5 視頻的許可問題仍不明朗，不過 Google 一直在這個(gè)問題上走在最前面，期望他們能最終使這個(gè)問題免于重蹈 DVD 解碼器許可的覆轍。

文字縮放

期望你的文字最多運(yùn)用的是相對(duì)方位而不是絕對(duì)方位，不然，Android 渠道的閱覽器會(huì)將你頁面的文字扔到屏幕之外的某個(gè)當(dāng)?shù)亍?/p>

在小屏幕上的顯現(xiàn)清晰度問題

在手機(jī)的小屏幕上看網(wǎng)頁，就像你隔著一個(gè)房間看電腦屏幕那樣，成果是什么看不清晰，你需求將重要的頁面元素加深對(duì)比度以便用戶能看得清楚點(diǎn)。

Lightbox 技能

Lightbox 是最受歡迎的 JavaScript 技能，也是最容易讓手機(jī)用戶抓狂的當(dāng)?shù)�，在許多時(shí)分，手機(jī)屏幕上的 Lightbox 只顯現(xiàn)一個(gè)旮旯，而大部分內(nèi)容則被扔到屏幕外的某個(gè)當(dāng)?shù)�。另外，在某些時(shí)分，Lightbox 還讓手機(jī)的 Web 頁面潰散，導(dǎo)致任何東西都無法點(diǎn)用。這并不意味著你不能運(yùn)用 Lightbox，比如登陸框一類的當(dāng)?shù)剡�是能夠運(yùn)用（登陸框能夠做得比較小一些 - 譯者注），但不管怎樣，最好一起供給一個(gè)傳統(tǒng)的登錄辦法，避免 Lightbox 顯現(xiàn)到屏幕之外。

閱覽器勘探

許多年前， Web 開發(fā)與規(guī)劃者需求憑借閱覽器勘探技能，為不同閱覽器，或者不同版別的閱覽器輸出不同內(nèi)容，跟著 Web 規(guī)范的深入人心，為不同閱覽器輸出不同內(nèi)容現(xiàn)已不可取。閱覽器嗅探能夠經(jīng)過比如 jQuery 一類的 JavaScript 庫輕松完成，還有一些能夠嗅探 flash 支撐狀況的庫能夠運(yùn)用，但是現(xiàn)實(shí)是，除非你有許多 Flash 應(yīng)用，不然很少會(huì)用到這個(gè)，事實(shí)上，現(xiàn)在的許多移動(dòng)閱覽器在遇到不支撐的內(nèi)容時(shí)會(huì)悄然掠過，而不會(huì)像 IE6 那樣彈一堆過錯(cuò)。

鼠標(biāo)回旋扭轉(zhuǎn)

許多站點(diǎn)的導(dǎo)航運(yùn)用鼠標(biāo)回旋扭轉(zhuǎn)并下拉子菜單的辦法，但是移動(dòng)閱覽器沒有鼠標(biāo)回旋扭轉(zhuǎn)一說，盡管有的手機(jī)支撐這一操作，但和桌面辦法有很大的差異。應(yīng)該避免 將重要的信息放到需求鼠標(biāo)回旋扭轉(zhuǎn)才干顯現(xiàn)的狀況。

下拉菜單導(dǎo)航

下拉菜單需求鼠標(biāo)回旋扭轉(zhuǎn)才干翻開，前面說過，在手機(jī)上，這無法完成，另外，下拉菜單的尺度往往超越手機(jī)屏幕尺度，即時(shí)用戶翻開了下拉菜單，也很有可能 無法徹底拜訪。你應(yīng)當(dāng)始終在側(cè)邊欄保留子菜單，不管是針對(duì)手機(jī)站點(diǎn)還是桌面站點(diǎn)。

緩慢的加載速度

手機(jī)閱覽器加載速度非常慢，你需求壓縮自己的數(shù)據(jù)，乃至運(yùn)用 CDN 加快網(wǎng)絡(luò)。在 WordPress 一類的 CMS 中能夠啟用數(shù)據(jù)壓縮，你可在在這個(gè)站點(diǎn)測(cè)試你的數(shù) 據(jù)是否經(jīng)過了壓縮，假如你運(yùn)用靜態(tài)規(guī)劃的頁面，能夠運(yùn)用 Minify 對(duì)你規(guī)劃的網(wǎng)頁代碼進(jìn)行凈化。

加載進(jìn)展提示

你應(yīng)當(dāng)運(yùn)用加載進(jìn)展圖標(biāo)，告訴用戶現(xiàn)在正在加載，關(guān)于手機(jī)閱覽器這種 Internet 銜接不很穩(wěn)定的情形特別重要，在一些 Ajax 應(yīng)用場(chǎng)合，假如不顯現(xiàn)加載進(jìn)展，用戶會(huì)認(rèn)為你的站點(diǎn)現(xiàn)已失去反應(yīng)。

回憶用戶的數(shù)據(jù)

手機(jī)用戶打字很不便利，應(yīng)該盡可能運(yùn)用 Cookie 回憶用戶的數(shù)據(jù)。

側(cè)邊欄放在左邊還是右邊？

應(yīng)該是右邊，由于手機(jī)屏幕很小，用戶閱覽你的網(wǎng)頁的時(shí)分，假如左邊顯現(xiàn)側(cè)邊欄，他們要看真正的內(nèi)容，就不得不左右翻滾，放在右邊，用戶就能夠直接向 下翻滾看具體內(nèi)容，需求看側(cè)邊欄的時(shí)分再左右翻滾。

小屏幕

前期的 Web 規(guī)劃師提起當(dāng)年的 800x600 屏幕就一肚子怨氣，好在現(xiàn)在的桌面屏幕都足夠大了，然后移動(dòng)設(shè)備的屏幕比這個(gè)更小。你所能做的，盡可能不要把網(wǎng)站的 Header 或 Logo 做得太大。

移動(dòng)站點(diǎn)合適你嗎？

許多公司花費(fèi)許多金錢布置專門的移動(dòng)站點(diǎn)，事實(shí)上，這并不必要，假如你有個(gè)電子商務(wù)站點(diǎn)，而手機(jī)用戶存在拜拜訪題，這種狀況，或許才值得專門布置一 個(gè)移動(dòng)站點(diǎn)。

單列布局

要想讓你的站點(diǎn)更好地支撐移動(dòng)閱覽器，你或許需求丟掉側(cè)邊欄，由于側(cè)邊欄對(duì)移動(dòng)用戶來說毫無疑義，F(xiàn)acebook 以及 Amazon 一類的站點(diǎn)運(yùn)用這種辦法改進(jìn)用戶體會(huì)。

圖片縮放

許多基于博客體系的站點(diǎn)都包括移動(dòng)版，完成更簡(jiǎn)略的導(dǎo)航，問題是，這些站點(diǎn)一起會(huì)像文字那樣縮放它們頁面上的圖片，那些被縮小的圖很難看清楚，更甚 的是，你沒有辦法改變圖片的顯現(xiàn)尺度。應(yīng)當(dāng)答應(yīng)用戶點(diǎn)擊一個(gè)圖片以顯現(xiàn)其完好尺度版。

簡(jiǎn)略導(dǎo)航

與其讓移動(dòng)用戶像在桌面上那樣顯現(xiàn)站點(diǎn)中的所有內(nèi)容，不如只為他們顯現(xiàn)最基本的內(nèi)容，免得處處翻滾，YouTube 在這方面做得最好，頁首的那些干凈，簡(jiǎn)略的按鈕非常好用。

廣告

去掉側(cè)邊欄之后，你的站點(diǎn)中的大部分廣告位就沒有了，一個(gè)不錯(cuò)的辦法是將廣告放到頁尾。

頁尾的完好站鏈接

盡管你擁有一個(gè)移動(dòng)版別的站點(diǎn)，但用戶可能期望看到完好的站點(diǎn)內(nèi)容，大都移動(dòng)站點(diǎn)的做法是在頁尾放上完好版站點(diǎn)的鏈接。

結(jié)論

以上敘述了現(xiàn)代移動(dòng) Web 站點(diǎn)規(guī)劃中的各種問題，下面是創(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è)試）