移動Web界面構建最佳實踐

來源: 51CTO 發布時間: 2010-11-28 21:26 閱讀: 859 次推薦: 0 原文鏈接 [收藏]

摘要：移動風格的Web站點的需求的增長讓站長們疲于奔命。為了滿足移動設備的需要，Web站點的布局不得不進行更新，同時，樣式也需要做一定的調整菜可以。下面，我會談到一些最佳實踐，以及如何重構你的站點，讓它對移動設備來說更加友好。

　　自從智能手機問世以來，移動市場可謂是突飛猛進，這是大家有目共睹的。大多數技術型的站長都明白，沒有他們珍愛的iPhone或Android設備，他們就不會賺到錢。我們曾給大家介紹過如何設計一個簡結的移動互聯網站，Web站點需要按照這些規范不斷地進行調整，才能滿足移動市場的需要。

　　移動風格的Web站點的需求的增長讓站長們疲于奔命。為了滿足移動設備的需要，Web站點的布局不得不進行更新，同時，樣式也需要做一定的調整菜可以。下面，我會談到一些最佳實踐，以及如何重構你的站點，讓它對移動設備來說更加友好。

　　讓簡單性貫穿始終

　　無論你使用什么設備，相對桌面平臺來說，所有的移動硬件都不是按照某些標準來制造的。簡單性是至關重要的，它可以決定你是留住了你的移動訪問者，還是完全失去了這個市場。

Web站點想成功必須占領移動互聯網

　　巨大的圖形，視頻，和過寬的頁面內容一定會讓訪問者們望而卻步的。當本次任務可以獲得某些類型的信息的時候，訪問者才會停留在你的Web站點上。他們希望可以在干擾較少的情況下，盡快地找到他們需要的信息。

可以嘗試重新設計你的頁面菜單的結構，然后為你的內容設計一個不同的布局。通常，對于一個優秀的移動界面的布局來說，一個單一的列就已經足夠了。商標和重要的鏈接應該放在頁面的最頂部，因為這是最經常訪問的區域。

　　實現移動樣式表

　　CSS是一門偉大的語言，主要用于編輯和添加新樣式。字幕“C”是“cascading”的縮寫，這意味著你可以在一個文件里應用樣式，你也可以通過一個新文件導入或反復地更新一些屬性。這為詳細的定制提供了一個環境，同時，還提供了一些強大的模板。

手機上的CSS語言

　　設計新樣式規則的過程并不是很復雜。實際上，它只要和重新設計整個HTML結構的任務配合的恰到好處就可以了，在這方面，無需花費過多的精力。下面是一個CSS導入代碼的例子，它應用了2個不同的樣式表。

1. @import url("/css/styles.css");
2. @import url("antiscreen.css") handheld;

　　如果你打算提供一個可以適用于所有設備的，完整的移動頁面，那么這種方法可以很好地發揮作用。它支持Windows Mobile 和 Symbian 操作系統，以及 iOS ，Android，BlackBerry和其他設備上的最古老的瀏覽器。雖然這種方法的向后兼容性很不錯，但是，如果你希望獲得更多移動用戶的青睞，最好為特定的場合定義專用的CSS文件。

　　使用Media Queries

　　這個全新的功能集是和CSS3和HTML5一起發布的，它已經被添加到CSS庫中了。通過對嵌入外部樣式表的HTML代碼的仔細觀察，我們可以通過CSS選擇器來操作“Media”屬性。

使用Media Queries

　　這似乎有點令人困惑，因為這種方法從來沒有在語義網中使用過。看看CSS的語法，我們可以打破HTML中的media queries只能輸入數值參數的規定，這些參數通常用于確定如何顯示頁面的樣式。我通過下面的例子證明了這種可能性。

　　通過定義“max-width”屬性，解析引擎可以檢查用戶在其上顯示一組相應的樣式表的那個設備的寬度。

1. <link href="/css/mobile.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 767px)" />

手機上的互聯網

　　上面的這個例子是一行代碼，你可以使用這行代碼來讓iOS設備（例如iPhone 和 iPod Touch）包含一個樣式表。“max-width”屬性會檢查整個屏幕的尺寸，只有當條件滿足的時候，才會加載這個樣式。“767px”是iOS設備在橫向模式下的特定屏幕尺寸。這意味著我們可以把這些改變應用到所有屏幕寬度小于或等于這個尺寸的設備上。

　　雖然不是必需的組件，但是，你可以考慮把下面這個“meta”標簽添加到你的“header”中。

1. <meta content="width=device-width" />

　　在iOS設備上，Safari有一個偉大的“縮放”功能，它會破壞大多數版本的樣式表。如果你想要設置動態的頁面寬度，讓內容動態地進行調整，這行代碼可以防止樣式被破壞。這行代碼可以告訴瀏覽器，全屏的時候，應該一直在這個頁面上應用我們的樣式表。

　　總是提供一個“正常”模式

　　經過長時間的使用，一些訪問者會把一個移動界面搞得混亂不堪。當這種情況發生的時候，開發者總不能去拜托每個訪問者，讓他們自己去整理這個界面吧！

手機訪問FaceBook

　　最好的解決方案是提供一個可以把頁面布局恢復到默認狀態的鏈接。在大多數應用程序中，這個鏈接位于頁面的最下方。放在那個地方不會產生不良的影響，而且，對于訪問者來說，可以更容易地找到那個鏈接。Facebook 和 Digg就是這樣做的。

　　很多Web服務都會實現的一種神秘的技術是把移動設備重定向到一個子域名——其中包含可供選擇的各種版本的移動頁面布局。例如，在Web 2.0應用程序中，“m.domain.com”是一個常見的域名。這樣做，可以帶來一些好處——例如：可以在獨立的目錄下存儲配置文件。這是一種清晰的隔離，可以讓Web應用程序的結構更加清晰。

Web應用程序