世界規(guī)模內(nèi)移動設(shè)備的使用數(shù)目在一日千里。面臨在跨越多個分歧設(shè)備上建樹精采web體驗的挑戰(zhàn)，此刻已經(jīng)存在多種解決方案。可是對于任何一個給定的項目，這些解決方案中哪個是最合適的?為了回覆這個問題，《移動優(yōu)先》作者Luke以Bagcheck應(yīng)用作為案例(注：Bagcheck是一家年夜事搜索與發(fā)現(xiàn)營業(yè)的立異型企業(yè))，詮釋了選擇分袂設(shè)計移動版和桌面版背后的原因，并經(jīng)由過程對比提煉出四個優(yōu)化移動Web產(chǎn)物的建議。全文如下：
本人是響應(yīng)式Web設(shè)計(Responsive Web Design)理念的擁護者和粉絲。但經(jīng)常有人這樣問我：為侍趵硪們還要為Bagcheck零丁構(gòu)建一個自力的移動版本，而不使用流體網(wǎng)格(fluid grids)，彈性圖片(flexible images)和媒體發(fā)芽(media queries)等體例來為我們的移動用戶供給一個響應(yīng)式Web解決方案?
對于我們的Bagcheck站點來講，網(wǎng)站機能以及網(wǎng)站開發(fā)速度是兩個至關(guān)主要的問題。我們所做的抉擇中，良多都是為了使網(wǎng)站機能和開發(fā)速度兩者都盡可能的快(事實?下場我們是一家新成立的企業(yè))。作為我們關(guān)注網(wǎng)站機能的一部門，我們也很注重“什么才是必需的”這樣的理念。這意味著我們需要向分歧設(shè)備或者用戶呈現(xiàn)一些他們需要的工具。我們樂于做一些優(yōu)化工作。使用雙重模板系統(tǒng)(dual template system)我們就可以年夜以下多個方面進行優(yōu)化，好比資本挨次(source order)，媒體(media)，URL結(jié)構(gòu)以及應(yīng)用軌范設(shè)計。
最初我們以呼吁行接口(command-line interface)的形式構(gòu)建Bagcheck，在此基本之上我們建樹了一個移動Web體驗版的Bagcheck，接著很快就開發(fā)出了一個桌面Web體驗版的Bagcheck。這樣的過程很可能也影響到了我們所使用的開發(fā)體例。
此外值得一提的是，雖然自己能夠勝任編碼工作，但我主若是一個設(shè)計師。因為我關(guān)注的焦點是設(shè)計要素，所以在這篇文章里會盡量多的包含一些手藝層面的資本鏈接，如不美觀你有更多的資本和實現(xiàn)設(shè)法，概縵悝發(fā)給我吧!
資本挨次(Source Order)
響應(yīng)式Web設(shè)計(Responsive Web Design)最為焦點的部門是,將不異的HTML代碼應(yīng)用到分歧的設(shè)備膳縵沔來，而且按照具體設(shè)備自身的機能來動態(tài)調(diào)整(主若是經(jīng)由過程CSS)外不美觀顯示。HTML標識表記標幟有一個資本挨次，這個資本挨次凡是劃定Web頁面若何被瀏覽器襯著。盡管可以使用JavaScript和CSS手藝來改變HTML元素的位置結(jié)構(gòu)，但想以一種靠得住的體例在多種分歧設(shè)備膳縵沔進行HTML元素重定位則很是具有挑戰(zhàn)性。
就拿網(wǎng)站導(dǎo)航菜單這個簡單的例子來說吧，對于那些擁有較年夜屏幕以及鼠標/鍵盤等輸入的設(shè)備來說，將導(dǎo)航菜單放置到網(wǎng)頁的頂部是很常見的做法，其原因有以下幾個方面：
設(shè)備屏幕擁有足夠多的空白區(qū)，頁面現(xiàn)實內(nèi)容不成能被擠出屏幕之外。
凡是需要經(jīng)由過程一些關(guān)頭的類別和動作集結(jié)來抉擇在網(wǎng)站上顯示什么內(nèi)容
當這些關(guān)頭的分類和動作集結(jié)與屏幕/瀏覽器的邊緣對齊時，訪謁他們的速度可能會更快一些。將網(wǎng)站的整體導(dǎo)航放在在網(wǎng)頁頂部是很有意義的，所以標識表記標幟資本挨次就成為首先得考慮的問題。
然而在那些有著校小屏幕而且觸摸作為輸入的設(shè)備，將網(wǎng)站的整體導(dǎo)航放在網(wǎng)頁底部會加倍合理一些，這是因為：
小屏幕設(shè)備沒有足夠多的空白區(qū)域，導(dǎo)致網(wǎng)頁的現(xiàn)實內(nèi)容被網(wǎng)站的整體導(dǎo)航按鈕擠出屏幕之外。
對于小屏幕和低帶寬的設(shè)備來說，相對于網(wǎng)站的導(dǎo)航功能，用戶更關(guān)注的是網(wǎng)站內(nèi)容的當即訪謁。
人類工程學的身分使得用戶更輕易在屏幕底部點擊到他們感樂趣的方針。
所以對于移動設(shè)備來講，將網(wǎng)站的整體導(dǎo)航按鈕放置在網(wǎng)頁的底部長短常合理的做法，這樣做就意味著菜單標識表記標幟(menu markup)在資本挨次中很可能是排在最后面的。當在分歧設(shè)備上使用不異的HTML代碼時，資本挨次不成能被改變。使用雙重模板系統(tǒng)，我們在構(gòu)建Bagcheck的時辰就可以供給分歧的標識表記標幟，是以在移動設(shè)備上就會有分歧的資本挨次。下圖展示的是我們?yōu)橐苿釉O(shè)備和桌面設(shè)備生成的兩種分歧的UI界面。
當然你也可以使用其他解決方案，不用供給分歧的HTML代碼也可以達到相似的效不美觀。Box-direction能夠反轉(zhuǎn)條目列表的挨次而不會影響到資本標識表記標幟挨次。你也可以考試考試使用display：table的體例來按照設(shè)備屏幕的現(xiàn)實巨細年夜頭生成內(nèi)容顯示和網(wǎng)站導(dǎo)航。這些體例可能會更適合你，就看你的需求了。
媒體(Media)
響應(yīng)式Web設(shè)計此吐矣閩體例是使用彈性圖片(flexible images)和視頻。當被設(shè)置為填充他們?nèi)萜骶藜毜拿康臅r辰，彈性圖像能夠按照瀏覽器視圖中的可用空白區(qū)來動態(tài)調(diào)整自己的巨細。
在較年夜的瀏覽器視圖中，彈性圖片可以經(jīng)由過程顯示自身的原始巨細來填充更多的空白區(qū)域。在較小的瀏覽器視圖中，不異的圖片可以縮放自身巨細年夜而占用較少的空白區(qū)域。為了實現(xiàn)這樣的效不美觀，瀏覽器需要一些較年夜的圖片，這些圖片不管是在放年夜或者縮小的時辰看起來都要有不錯的效不美觀。
此刻的問題是，圖像越年夜，文件的巨細就越年夜。雖然并不是所有的Web瀏覽器都以他們的原始巨細來顯示圖像，但瀏覽器需要下載整個圖片文件，這樣會很快導(dǎo)致低機能，除非這樣做：
連系使用CSS Media Queries ,布景圖片不顯示，以及不要加載僅僅為較年夜瀏覽器視圖籌備的年夜圖等體例。這種體例對于指定圖片標簽(image tags)的那些圖片是無效的，僅僅對使用CSS圖片布景的那些圖片有用不美觀，這樣就限制了此體例的合用性。
你可以使用像響應(yīng)式圖片(Responsive Images)這樣的解決方案，這種體例依靠Javascript說話來將HTML標識表記標幟的小圖片按照瀏覽器視圖巨細的增添替代成較年夜的圖片。禁用Javascript和cookie功能的瀏覽器只能夠顯示響應(yīng)的小圖片。
考試考試近似noscript tag這樣的體例，來阻止不需要的圖片加載。
使用處事器端的解決方案來檢測訪謁你的站點的設(shè)備，而且只傳遞一些需要的工具。
推薦閱讀
<b>優(yōu)質(zhì)人脈資源匱乏瓶頸 中小網(wǎng)站如何突破</b>
無能否認，此刻優(yōu)質(zhì)人脈資本對網(wǎng)站成長影響越來越年夜可能一個不知名的新網(wǎng)站，如不美觀站長熟識一些可以登高一呼，應(yīng)者云集的行業(yè)內(nèi)知名年夜佬，只要網(wǎng)站內(nèi)容(處事)還行，經(jīng)由過程這些年夜佬發(fā)話介紹，立馬就能讓自>>>詳細閱讀
本文標題：<b>案例學習：優(yōu)化移動Web產(chǎn)品的四個要點</b>
地址：http://www.brh9h.cn/a/22/20120326/44748.html
網(wǎng)友點評
精彩導(dǎo)讀
科技快報
品牌展示