移動(dòng)Web界面構(gòu)建最佳實(shí)踐
原創(chuàng)【51CTO譯文】自從智能手機(jī)問(wèn)世以來(lái)，移動(dòng)市場(chǎng)可謂是突飛猛進(jìn)，這是大家有目共睹的。大多數(shù)技術(shù)型的站長(zhǎng)都明白，沒(méi)有他們珍愛(ài)的iPhone或Android設(shè)備，他們就不會(huì)賺到錢。我們?cè)o大家介紹過(guò)如何設(shè)計(jì)一個(gè)簡(jiǎn)結(jié)的移動(dòng)互聯(lián)網(wǎng)站，Web站點(diǎn)需要按照這些規(guī)范不斷地進(jìn)行調(diào)整，才能滿足移動(dòng)市場(chǎng)的需要。
移動(dòng)互聯(lián)網(wǎng)的需求的增長(zhǎng)讓站長(zhǎng)們疲于奔命。為了滿足移動(dòng)設(shè)備的需要，移動(dòng)互聯(lián)網(wǎng)Web站點(diǎn)的布局不得不進(jìn)行更新，同時(shí)，樣式也需要做一定的調(diào)整菜可以。下面，我會(huì)談到一些***實(shí)踐，以及如何重構(gòu)你的站點(diǎn)，讓它對(duì)移動(dòng)設(shè)備來(lái)說(shuō)更加友好。
讓簡(jiǎn)單性貫穿始終
無(wú)論你使用什么設(shè)備，相對(duì)桌面平臺(tái)來(lái)說(shuō)，所有的移動(dòng)硬件都不是按照某些標(biāo)準(zhǔn)來(lái)制造的。簡(jiǎn)單性是至關(guān)重要的，它可以決定你是留住了你的移動(dòng)訪問(wèn)者，還是完全失去了這個(gè)市場(chǎng)。
Web站點(diǎn)想成功必須占領(lǐng)移動(dòng)互聯(lián)網(wǎng)
巨大的圖形，視頻，和過(guò)寬的頁(yè)面內(nèi)容一定會(huì)讓訪問(wèn)者們望而卻步的。當(dāng)本次任務(wù)可以獲得某些類型的信息的時(shí)候，訪問(wèn)者才會(huì)停留在你的移動(dòng)Web界面上。他們希望可以在干擾較少的情況下，盡快地找到他們需要的信息。
可以嘗試重新設(shè)計(jì)你的頁(yè)面菜單的結(jié)構(gòu)，然后為你的內(nèi)容設(shè)計(jì)一個(gè)不同的布局。通常，對(duì)于一個(gè)優(yōu)秀的移動(dòng)界面的布局來(lái)說(shuō)，一個(gè)單一的列就已經(jīng)足夠了。商標(biāo)和重要的鏈接應(yīng)該放在頁(yè)面的最頂部，因?yàn)檫@是最經(jīng)常訪問(wèn)的區(qū)域。
實(shí)現(xiàn)移動(dòng)樣式表
CSS是一門偉大的語(yǔ)言，主要用于編輯和添加新樣式。字幕“C”是“cascading”的縮寫，這意味著你可以在一個(gè)文件里應(yīng)用樣式，你也可以通過(guò)一個(gè)新文件導(dǎo)入或反復(fù)地更新一些屬性。這為詳細(xì)的定制提供了一個(gè)環(huán)境，同時(shí)，還提供了一些強(qiáng)大的模板。
手機(jī)上的CSS語(yǔ)言
設(shè)計(jì)新樣式規(guī)則的過(guò)程并不是很復(fù)雜。實(shí)際上，它只要和重新設(shè)計(jì)整個(gè)HTML結(jié)構(gòu)的任務(wù)配合的恰到好處就可以了，在這方面，無(wú)需花費(fèi)過(guò)多的精力。下面是一個(gè)CSS導(dǎo)入代碼的例子，它應(yīng)用了2個(gè)不同的樣式表。
- @import url("/css/styles.css");
- @import url("antiscreen.css") handheld;
如果你打算提供一個(gè)可以適用于所有設(shè)備的，完整的移動(dòng)頁(yè)面，那么這種方法可以很好地發(fā)揮作用。它支持Windows Mobile 和 Symbian 操作系統(tǒng) ，以及 iOS ，Android，BlackBerry和其他設(shè)備上的最古老的瀏覽器。雖然這種方法的向后兼容性很不錯(cuò)，但是，如果你希望獲得更多移動(dòng)用戶的青睞，***為特定的場(chǎng)合定義專用的CSS文件。
使用Media Queries
這個(gè)全新的功能集是和CSS3和HTML 5一起發(fā)布的，它已經(jīng)被添加到CSS庫(kù)中了。通過(guò)對(duì)嵌入外部樣式表的HTML代碼的仔細(xì)觀察，我們可以通過(guò)CSS選擇器來(lái)操作“Media”屬性。
使用Media Queries
這似乎有點(diǎn)令人困惑，因?yàn)檫@種方法從來(lái)沒(méi)有在語(yǔ)義網(wǎng)中使用過(guò)?？纯碈SS的語(yǔ)法，我們可以打破HTML中的media queries只能輸入數(shù)值參數(shù)的規(guī)定，這些參數(shù)通常用于確定如何顯示移動(dòng)Web界面的樣式。我通過(guò)下面的例子證明了這種可能性。
通過(guò)定義“max-width”屬性，解析引擎可以檢查用戶在其上顯示一組相應(yīng)的樣式表的那個(gè)設(shè)備的寬度。
- <link href="/css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 767px)" />
手機(jī)上的互聯(lián)網(wǎng)
上面的這個(gè)例子是一行代碼，你可以使用這行代碼來(lái)讓iOS設(shè)備（例如iPhone 和 iPod Touch）包含一個(gè)樣式表。“max-width”屬性會(huì)檢查整個(gè)屏幕的尺寸，只有當(dāng)條件滿足的時(shí)候，才會(huì)加載這個(gè)樣式。“767px”是iOS設(shè)備在橫向模式下的特定屏幕尺寸。這意味著我們可以把這些改變應(yīng)用到所有屏幕寬度小于或等于這個(gè)尺寸的設(shè)備上。
雖然不是必需的組件，但是，你可以考慮把下面這個(gè)“meta”標(biāo)簽添加到你的“header”中。
- <meta content="width=device-width" />
在iOS設(shè)備上，Safari有一個(gè)偉大的“縮放”功能，它會(huì)破壞大多數(shù)版本的樣式表。如果你想要設(shè)置動(dòng)態(tài)的頁(yè)面寬度，讓內(nèi)容動(dòng)態(tài)地進(jìn)行調(diào)整，這行代碼可以防止樣式被破壞。這行代碼可以告訴瀏覽器，全屏的時(shí)候，應(yīng)該一直在這個(gè)頁(yè)面上應(yīng)用我們的樣式表。
總是提供一個(gè)“正常”模式
經(jīng)過(guò)長(zhǎng)時(shí)間的使用，一些訪問(wèn)者會(huì)把一個(gè)移動(dòng)Web界面搞得混亂不堪。當(dāng)這種情況發(fā)生的時(shí)候，開發(fā)者總不能去拜托每個(gè)訪問(wèn)者，讓他們自己去整理這個(gè)界面吧！
手機(jī)訪問(wèn)FaceBook
***的解決方案是提供一個(gè)可以把頁(yè)面布局恢復(fù)到默認(rèn)狀態(tài)的鏈接。在大多數(shù)應(yīng)用程序中，這個(gè)鏈接位于頁(yè)面的最下方。放在那個(gè)地方不會(huì)產(chǎn)生不良的影響，而且，對(duì)于訪問(wèn)者來(lái)說(shuō)，可以更容易地找到那個(gè)鏈接。Facebook 和 Digg就是這樣做的。
很多Web服務(wù)都會(huì)實(shí)現(xiàn)的一種神秘的技術(shù)是把移動(dòng)設(shè)備重定向到一個(gè)子域名——其中包含可供選擇的各種版本的移動(dòng)Web界面布局。例如，在Web 2.0應(yīng)用程序中，“m.domain.com”是一個(gè)常見(jiàn)的域名。這樣做，可以帶來(lái)一些好處——例如：可以在獨(dú)立的目錄下存儲(chǔ)配置文件。這是一種清晰的隔離，可以讓W(xué)eb應(yīng)用程序的結(jié)構(gòu)更加清晰。
Web應(yīng)用程序
我們看到有越來(lái)越多的消費(fèi)者開始使用移動(dòng)數(shù)據(jù)和移動(dòng)電話了，實(shí)際上，這個(gè)時(shí)代才剛剛開始。iPhone和Adnroid的銷售額已經(jīng)直沖云霄了，而且，并沒(méi)有停下來(lái)的跡象。我們可以假設(shè)，在這個(gè)假期中，全球會(huì)賣出大量的移動(dòng)設(shè)備，隨之而來(lái)的就是移動(dòng)網(wǎng)絡(luò)的用戶數(shù)量的迅猛增加。
這些技巧是進(jìn)入移動(dòng)互聯(lián)網(wǎng)開發(fā)領(lǐng)域的“敲門磚”。如果你想繼續(xù)深入研究的話，還有很多其他的工具，可以用來(lái)檢查“移動(dòng)友好性”。隨著市場(chǎng)的變化，一些趨勢(shì)也會(huì)不斷地進(jìn)行變化，但是，個(gè)人用戶的核心價(jià)值通常是不會(huì)改變的。真正成功的站長(zhǎng)會(huì)按照這些核心價(jià)值來(lái)調(diào)整他們的運(yùn)營(yíng)方式，以適應(yīng)他們的用戶群。
原文名稱：Best Practices for Mobile Web Interfaces
原文地址：http://webdesignledger.com/tips/best-practices-for-mobile-web-interfaces
【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請(qǐng)注明原文出處、作者及51CTO譯稿和譯者！】
【編輯推薦】
- 如何設(shè)計(jì)一個(gè)簡(jiǎn)結(jié)的移動(dòng)互聯(lián)網(wǎng)站
- 百度移動(dòng)開放平臺(tái)上線 提供移動(dòng)搜索和轉(zhuǎn)碼方案
- 專訪火種通訊錄：移動(dòng)應(yīng)用由創(chuàng)意到產(chǎn)品
- 變革，本地開發(fā)技術(shù)的回歸
- 專訪最牛iPhone開發(fā)團(tuán)隊(duì)：走進(jìn)移動(dòng)開發(fā)
