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