移動網(wǎng)頁設(shè)計最佳技巧和實踐
深圳網(wǎng)站制作據(jù)預(yù)測，到2013年底，全球?qū)⒂谐^17億的移動互聯(lián)網(wǎng)用戶。有了這些數(shù)字，Web設(shè)計者和開發(fā)人員就必須學(xué)習(xí)移動設(shè)備的最佳開發(fā)和設(shè)計實踐。

在大多數(shù)情況下，你不需要學(xué)習(xí)任何新的移動網(wǎng)站設(shè)計技術(shù)。但您需要以一種新的方式來看待站點設(shè)計，這一點比標(biāo)準(zhǔn)瀏覽器的設(shè)計要嚴(yán)格得多。為了解決移動站點設(shè)計帶來的問題，并獲得與您的標(biāo)準(zhǔn)站點一樣方便和有用的結(jié)果，需要一些創(chuàng)造性的解決問題的技巧。

移動網(wǎng)頁設(shè)計最佳技巧和實踐熟悉可用的硬件和軟件

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

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

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

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

移動網(wǎng)頁設(shè)計最佳技巧和實踐簡化！

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

使用有效的標(biāo)記

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

給用戶訪問網(wǎng)站的選擇標(biāo)準(zhǔn)

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

使用單獨的移動主題

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

限制滾動到一個方向

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

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

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

移動網(wǎng)頁設(shè)計最佳技巧和實踐盡量減少圖像的使用

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

優(yōu)化你的導(dǎo)航

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

不要依賴Flash或JavaScript

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

從你的標(biāo)準(zhǔn)站點中包含盡可能多的內(nèi)容。

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

移動網(wǎng)頁設(shè)計最佳技巧和實踐確保將正確的工作

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