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