后移動年代的 Web 規劃準則淺析

還記得 Wap 嗎，現在還有多少人運用 Wap？后移動年代，跟著閱覽器技能的前進，為移動設備設置特殊站點現已不再必要。作為 Web 規劃師，假如你能遵循一些基本的規劃與布局準則，你的站點將能被大都移動設備更輕松地拜訪。本文敘述的是后移動年代的 Web 規劃準則。

移動閱覽技能現狀

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

Flash

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

Silverlight

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

JavaScript

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

CSS 3

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

規劃感與易用性之爭

流行的 Web 技能并非都是你的最佳選擇，你需求對運用的各種技能進行測試，事實證明，在移動閱覽領域，比如 Lightbox，視頻，鼠標回旋扭轉一類的技能存在問題，需求避開，咱們將在這一節中對各種 Web 規劃元素進行敘述。

為什么視頻不能播映？

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

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

文字縮放

期望你的文字最多運用的是相對方位而不是絕對方位，不然，Android 渠道的閱覽器會將你頁面的文字扔到屏幕之外的某個當地。

在小屏幕上的顯現清晰度問題

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

Lightbox 技能

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

閱覽器勘探

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

鼠標回旋扭轉

許多站點的導航運用鼠標回旋扭轉并下拉子菜單的辦法，但是移動閱覽器沒有鼠標回旋扭轉一說，盡管有的手機支撐這一操作，但和桌面辦法有很大的差異。應該避免 將重要的信息放到需求鼠標回旋扭轉才干顯現的狀況。

下拉菜單導航

下拉菜單需求鼠標回旋扭轉才干翻開，前面說過，在手機上，這無法完成，另外，下拉菜單的尺度往往超越手機屏幕尺度，即時用戶翻開了下拉菜單，也很有可能 無法徹底拜訪。你應當始終在側邊欄保留子菜單，不管是針對手機站點還是桌面站點。

緩慢的加載速度

手機閱覽器加載速度非常慢，你需求壓縮自己的數據，乃至運用 CDN 加快網絡。在 WordPress 一類的 CMS 中能夠啟用數據壓縮，你可在在這個站點測試你的數 據是否經過了壓縮，假如你運用靜態規劃的頁面，能夠運用 Minify 對你規劃的網頁代碼進行凈化。

加載進展提示

你應當運用加載進展圖標，告訴用戶現在正在加載，關于手機閱覽器這種 Internet 銜接不很穩定的情形特別重要，在一些 Ajax 應用場合，假如不顯現加載進展，用戶會認為你的站點現已失去反應。

回憶用戶的數據

手機用戶打字很不便利，應該盡可能運用 Cookie 回憶用戶的數據。

側邊欄放在左邊還是右邊？

應該是右邊，由于手機屏幕很小，用戶閱覽你的網頁的時分，假如左邊顯現側邊欄，他們要看真正的內容，就不得不左右翻滾，放在右邊，用戶就能夠直接向 下翻滾看具體內容，需求看側邊欄的時分再左右翻滾。

小屏幕

前期的 Web 規劃師提起當年的 800x600 屏幕就一肚子怨氣，好在現在的桌面屏幕都足夠大了，然后移動設備的屏幕比這個更小。你所能做的，盡可能不要把網站的 Header 或 Logo 做得太大。

移動站點合適你嗎？

許多公司花費許多金錢布置專門的移動站點，事實上，這并不必要，假如你有個電子商務站點，而手機用戶存在拜拜訪題，這種狀況，或許才值得專門布置一 個移動站點。

單列布局

要想讓你的站點更好地支撐移動閱覽器，你或許需求丟掉側邊欄，由于側邊欄對移動用戶來說毫無疑義，Facebook 以及 Amazon 一類的站點運用這種辦法改進用戶體會。

圖片縮放

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

簡略導航

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

廣告

去掉側邊欄之后，你的站點中的大部分廣告位就沒有了，一個不錯的辦法是將廣告放到頁尾。

頁尾的完好站鏈接

盡管你擁有一個移動版別的站點，但用戶可能期望看到完好的站點內容，大都移動站點的做法是在頁尾放上完好版站點的鏈接。

結論

以上敘述了現代移動 Web 站點規劃中的各種問題，下面是創立移動 Web 站點的一些資源和工具：

Tools

W3c Mobile Checker （W3C 移動站點驗證）

JavaScript Support for Phones （手機閱覽器的 JavaScript 支撐）

Mobile Site Converter （移動站點轉化）

Simple Mobile Site Testing （簡略移動站點測試）