移動網頁設計最佳技巧和實踐
深圳網站制作據預測，到2013年底，全球將有超過17億的移動互聯網用戶。有了這些數字，Web設計者和開發人員就必須學習移動設備的最佳開發和設計實踐。

在大多數情況下，你不需要學習任何新的移動網站設計技術。但您需要以一種新的方式來看待站點設計，這一點比標準瀏覽器的設計要嚴格得多。為了解決移動站點設計帶來的問題，并獲得與您的標準站點一樣方便和有用的結果，需要一些創造性的解決問題的技巧。

移動網頁設計最佳技巧和實踐熟悉可用的硬件和軟件

移動電話和移動設備平臺在操作系統、屏幕尺寸、分辨率和用戶界面方面差別很大。為了決定你想要優化你的站點的哪個平臺，熟悉不同的可用選項是很有幫助的。

最常見的操作系統是Windows Mobile、iPhone平臺、Palm OS、移動Linux、Symbian操作系統、黑莓平臺和安卓（由于Verizon和谷歌最近達成的協議，Android將變得更大）。還有其他專用于特定手機的專有系統，比如一些Verizon手機和特定品牌的手機。您可以根據站點的受眾類型來估計，您的用戶最有可能使用哪些OSS。如果訪問者大多是業務用戶，則需要優化Windows Mobile和黑莓設備的站點。如果你的用戶是年輕的，時尚的，或更多的技術知識，你想讓你的網站為iPhone和Android設備優化。不管怎樣，確保你的站點至少在大多數移動平臺上都是可用的。

移動瀏覽器是另一個需要考慮的因素。一些常見的瀏覽器，包括Safari瀏覽器為iPhone，Android的瀏覽器，Opera移動，WebOS browser（掌上設備），黑莓瀏覽器和Internet Explorer移動（Windows移動設備）。在諾基亞和其他手機品牌上也有更多的瀏覽器。有些瀏覽器是基于專有的代碼，而其他人都是建立在WebKit（Android，Safari），壁虎（Fennec，Mozilla瀏覽器）或其他常見的平臺。

最后，您需要考慮站點訪問者最常見的屏幕大小和分辨率。你的站點應該工作在你的訪客可能使用的最廣泛的移動設備上。標準手機常見分辨率包括101×80像素（索愛手機），128×128像素（三星手機），和120×160像素（摩托羅拉手機）。對于智能手機來說，還有很多工作要做。iPhone 320×480像素屏幕；HTC Touch Pro有480×640像素屏幕；Palm Pre有320×480像素屏幕的黑莓風暴；有360的×480像素的屏幕；和HTC的金星已經高達800×480像素屏幕。許多這些屏幕可以輕松地顯示一個標準的網站。

移動網頁設計最佳技巧和實踐簡化！

在大多數情況下，您的移動站點應該比您的標準站點更簡單。唯一的例外是，如果你的標準站點已經很簡約了。從站點中刪除圖形元素通常是優化其在移動設備上顯示的有效方法。尋找簡化站點設計和功能的方法。這可能意味著重新調整你的菜單，消除圖像，打破了文字在多個頁面，或重新工作網站的布局和功能。

使用有效的標記

考慮到潛在的操作系統和瀏覽器可能會訪問您的站點的多樣性，Web標準變得更加重要。標準瀏覽器在很大程度上是非常寬容的壞代碼，但與移動瀏覽器，你往往不會得到這樣的余地。確保代碼驗證盡可能的簡潔和簡潔。

給用戶訪問網站的選擇標準

根據訪問者使用什么樣的設備，他們可能只想使用你的標準網站。對于很多更好的智能手機和iPhone來說，情況尤其如此，后者在出色地發布標準網站方面沒有問題。給你的移動訪問者訪問標準站點的選項，即使它只是通過頁腳的鏈接（我們大多數人都傾向于看）。您還可以給他們選擇返回到移動站點，而不必使用他們的后退按鈕。

使用單獨的移動主題

同時優化您的手機使用的主要網站有時是有道理的，它往往是更容易使用一個單獨的手機主題，可以做的最下移動設備改變CSS。一個專用的移動主題意味著您可以真正考慮到訪問者將如何看待您的站點，并為其優化它。有些網站有一個針對常規移動設備和iPhone用戶的優化設計。

限制滾動到一個方向

當使用標準瀏覽器時，在網頁上滾動多個方向真的很煩人。當你從移動設備訪問時，這種情況不會改變；事實上，情況更糟。使用觸摸屏時，很容易意外地滾動錯誤的方式（水平方向而不是垂直方向，反之亦然）。如果你的站點只滾動一種方式，那么你就消除了這種麻煩的可能性。

不要使用彈出窗口或打開新窗口。

根據特定的平臺，彈出新窗口可以影響瀏覽體驗的，所以不要使用它們。如果您絕對需要在新窗口中打開某個東西，請確保提醒移動訪問者它會這樣做。

移動網頁設計最佳技巧和實踐盡量減少圖像的使用

只使用你需要的圖片來傳達你的信息。標志是好的，就像大多數圖標一樣。與網站內容無關的圖片也很好。但要消除那些除了好看以外沒有別的用途的形象。他們一般不會在移動設備上看起來漂亮，所以為什么要麻煩呢？有時候，它們只會讓你的站點看起來更糟，或者導致奇怪的滾動或布局問題。

優化你的導航

許多移動設備都有觸摸屏接口，所以請記住這一點。這意味著在你的鏈接的可點擊區域較大，使得按鈕更大，把更多的空間之間的聯系。試圖點擊微小的、幾乎看不見的鏈接是一件非常痛苦的事，每次你想點擊某些東西時都要放大，這并不能使它更好。為了改善這些導航問題，許多網站使用一個完全獨立的移動導航的設計，對觸摸屏或非鼠標輸入設備優化。

不要依賴Flash或JavaScript

并非所有的手機和移動設備都支持Flash或JavaScript。即使他們這樣做，也不能保證它將是最新版本。如果訪問者使用iPhone，就忘了Flash。確保移動站點上的所有重要信息和功能都在普通（x）html / CSS中。否則，您就有很大一部分訪問者無法訪問重要內容。

從你的標準站點中包含盡可能多的內容。

有多少次你從你的手機到一個最喜歡的網站，然后意識到你不能到達你想要訪問的部分？這種事總是發生。在移動站點上盡可能多地包含原始站點內容。除了使它可用，確保導航路線到達它也保持相對不變。

移動網頁設計最佳技巧和實踐確保將正確的工作

不要只發送移動用戶主頁。沒有什么比點擊一個鏈接更令人討厭的了，無論是在搜索引擎結果中還是在另一個網站上，如果你在移動設備上，它都會重定向到主頁。如果你的站點自動檢測到一個訪問者是否來自一個移動瀏覽器，請確保它已經設置好將訪問者發送到他們試圖訪問的鏈接，否則他們很可能會離開，再也不會回來了。