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