自從智能手機問世以來,移動市場可謂是突飛猛進,這是大家有目共睹的。大多數技術型的站長都明白,沒有他們珍愛的iPhone或Android設備,他們就不會賺到錢。我們曾給大家介紹過如何設計一個簡結的移動互聯網站,Web站點需要按照這些規范不斷地進行調整,才能滿足移動市場的需要。
移動風格的Web站點的需求的增長讓站長們疲于奔命。為了滿足移動設備的需要,Web站點的布局不得不進行更新,同時,樣式也需要做一定的調整菜可以。下面,我會談到一些最佳實踐,以及如何重構你的站點,讓它對移動設備來說更加友好。
讓簡單性貫穿始終
無論你使用什么設備,相對桌面平臺來說,所有的移動硬件都不是按照某些標準來制造的。簡單性是至關重要的,它可以決定你是留住了你的移動訪問者,還是完全失去了這個市場。
巨大的圖形,視頻,和過寬的頁面內容一定會讓訪問者們望而卻步的。當本次任務可以獲得某些類型的信息的時候,訪問者才會停留在你的Web站點上。他們希望可以在干擾較少的情況下,盡快地找到他們需要的信息。
可以嘗試重新設計你的頁面菜單的結構,然后為你的內容設計一個不同的布局。通常,對于一個優秀的移動界面的布局來說,一個單一的列就已經足夠了。商標和重要的鏈接應該放在頁面的最頂部,因為這是最經常訪問的區域。
實現移動樣式表
設計新樣式規則的過程并不是很復雜。實際上,它只要和重新設計整個HTML結構的任務配合的恰到好處就可以了,在這方面,無需花費過多的精力。下面是一個CSS導入代碼的例子,它應用了2個不同的樣式表。
使用Media Queries
這個全新的功能集是和CSS3和HTML5一起發布的,它已經被添加到CSS庫中了。通過對嵌入外部樣式表的HTML代碼的仔細觀察,我們可以通過CSS選擇器來操作“Media”屬性。
通過定義“max-width”屬性,解析引擎可以檢查用戶在其上顯示一組相應的樣式表的那個設備的寬度。
雖然不是必需的組件,但是,你可以考慮把下面這個“meta”標簽添加到你的“header”中。
總是提供一個“正常”模式
經過長時間的使用,一些訪問者會把一個移動界面搞得混亂不堪。當這種情況發生的時候,開發者總不能去拜托每個訪問者,讓他們自己去整理這個界面吧!