優(yōu)化移動Web產(chǎn)品的四個要點

世界范圍內(nèi)移動設備的使用數(shù)量在與日俱增。面對在跨越多個不同設備上創(chuàng)建良好web體驗的挑戰(zhàn)，現(xiàn)在已經(jīng)存在多種解決方案。但是對于任何一個給定的項目，這些解決方案中哪個是最合適的？為了回答這個問題，《移動優(yōu)先》作者Luke以Bagcheck應用作為案例（注：Bagcheck是一家從事搜索與發(fā)現(xiàn)業(yè)務的創(chuàng)新型企業(yè)），解釋了選擇分別設計移動版和桌面版背后的原因，并通過對比提煉出四個優(yōu)化移動Web產(chǎn)品的建議。全文如下：

本人是響應式Web設計（Responsive Web Design）理念的擁護者和粉絲。但經(jīng)常有人這樣問我：為什么我們還要為Bagcheck單獨構(gòu)建一個獨立的移動版本，而不使用流體網(wǎng)格（fluid grids），彈性圖片（flexible images）和媒體查詢（media queries）等方法來為我們的移動用戶提供一個響應式Web解決方案？

對于我們的Bagcheck站點來講，網(wǎng)站性能以及網(wǎng)站開發(fā)速度是兩個至關(guān)重要的問題。我們所做的決定中，很多都是為了使網(wǎng)站性能和開發(fā)速度兩者都盡可能的快（畢竟我們是一家新成立的企業(yè)）。作為我們關(guān)注網(wǎng)站性能的一部分，我們也很注重“什么才是必須的”這樣的理念。這意味著我們需要向不同設備或者用戶呈現(xiàn)一些他們需要的東西。我們樂于做一些優(yōu)化工作。使用雙重模板系統(tǒng)（dual template system）我們就可以從以下多個方面進行優(yōu)化，比如資源順序（source order），媒體（media），URL結(jié)構(gòu)以及應用程序設計。

最初我們以命令行接口（command-line interface）的形式構(gòu)建Bagcheck，在此基礎之上我們創(chuàng)建了一個移動Web體驗版的Bagcheck，接著很快就開發(fā)出了一個桌面Web體驗版的Bagcheck。這樣的過程很可能也影響到了我們所使用的開發(fā)方法。

另外值得一提的是，雖然自己能夠勝任編碼工作，但我主要是一個設計師。因為我關(guān)注的焦點是設計要素，所以在這篇文章里會盡量多的包含一些技術(shù)層面的資源鏈接，如果你有更多的資源和實現(xiàn)想法，趕快發(fā)給我吧！

資源順序（Source Order）

響應式Web設計(Responsive Web Design)最為核心的部分是,將相同的HTML代碼應用到不同的設備上面來，并且根據(jù)具體設備自身的性能來動態(tài)調(diào)整（主要是通過CSS）外觀顯示。HTML標記有一個資源順序，這個資源順序通常規(guī)定Web頁面如何被瀏覽器渲染。盡管可以使用JavaScript和CSS技術(shù)來改變HTML元素的位置布局，但想以一種可靠的方式在多種不同設備上面進行HTML元素重定位則非常具有挑戰(zhàn)性。

就拿網(wǎng)站導航菜單這個簡單的例子來說吧，對于那些擁有較大屏幕以及鼠標/鍵盤等輸入的設備來說，將導航菜單放置到網(wǎng)頁的頂部是很常見的做法，其原因有以下幾個方面：

• 設備屏幕擁有足夠多的空白區(qū)，頁面實際內(nèi)容不可能被擠出屏幕之外。
• 通常需要通過一些關(guān)鍵的類別和動作集合來決定在網(wǎng)站上顯示什么內(nèi)容
• 當這些關(guān)鍵的分類和動作集合與屏幕/瀏覽器的邊緣對齊時，訪問他們的速度可能會更快一些。將網(wǎng)站的整體導航放在在網(wǎng)頁頂部是很有意義的，所以標記資源順序就成為首先得考慮的問題。

然而在那些有著校小屏幕并且觸摸作為輸入的設備，將網(wǎng)站的整體導航放在網(wǎng)頁底部會更加合理一些，這是因為：

• 小屏幕設備沒有足夠多的空白區(qū)域，導致網(wǎng)頁的實際內(nèi)容被網(wǎng)站的整體導航按鈕擠出屏幕之外。
• 對于小屏幕和低帶寬的設備來說，相對于網(wǎng)站的導航功能，用戶更關(guān)注的是網(wǎng)站內(nèi)容的立即訪問。
• 人類工程學的因素使得用戶更容易在屏幕底部點擊到他們感興趣的目標。

所以對于移動設備來講，將網(wǎng)站的整體導航按鈕放置在網(wǎng)頁的底部是非常合理的做法，這樣做就意味著菜單標記（menu markup）在資源順序中很可能是排在最后面的。當在不同設備上使用相同的HTML代碼時，資源順序不可能被改變。使用雙重模板系統(tǒng)，我們在構(gòu)建Bagcheck的時候就可以提供不同的標記，因此在移動設備上就會有不同的資源順序。下圖展示的是我們?yōu)橐苿釉O備和桌面設備生成的兩種不同的UI界面。

當然你也可以使用其他解決方案，不用提供不同的HTML代碼也可以達到相似的效果。Box-direction能夠反轉(zhuǎn)條目列表的順序而不會影響到資源標記順序。你也可以嘗試使用display：table的方法來根據(jù)設備屏幕的實際大小重新生成內(nèi)容顯示和網(wǎng)站導航。這些方法可能會更適合你，就看你的需求了。

媒體（Media）

響應式Web設計另外一個方法是使用彈性圖片（flexible images）和視頻。當被設置為填充他們?nèi)萜鞔笮〉母袷降臅r候，彈性圖像能夠根據(jù)瀏覽器視圖中的可用空白區(qū)來動態(tài)調(diào)整自己的大小。

在較大的瀏覽器視圖中，彈性圖片可以通過顯示自身的原始大小來填充更多的空白區(qū)域。在較小的瀏覽器視圖中，相同的圖片可以縮放自身大小從而占用較少的空白區(qū)域。為了實現(xiàn)這樣的效果，瀏覽器需要一些較大的圖片，這些圖片不管是在放大或者縮小的時候看起來都要有不錯的效果。

現(xiàn)在的問題是，圖像越大，文件的大小就越大。雖然并不是所有的Web瀏覽器都以他們的原始大小來顯示圖像，但瀏覽器需要下載整個圖片文件，這樣會很快導致低性能，除非這樣做：

• 結(jié)合使用CSS Media Queries ,背景圖片不顯示，以及不要加載僅僅為較大瀏覽器視圖準備的大圖等方法。這種方法對于指定圖片標簽（image tags）的那些圖片是無效的，僅僅對使用CSS圖片背景的那些圖片有效果，這樣就限制了此方法的適用性。
• 你可以使用像響應式圖片（Responsive Images）這樣的解決方案，這種方法依賴Javascript語言來將HTML標記的小圖片根據(jù)瀏覽器視圖大小的增加替換成較大的圖片。禁用Javascript和cookie功能的瀏覽器只能夠顯示相應的小圖片。
• 嘗試類似noscript tag這樣的方法，來阻止不必要的圖片加載。
• 使用服務器端的解決方案來檢測訪問你的站點的設備，并且只傳遞一些必要的東西。

隱藏在這些解決方案下面的相同理念是，使用media queries，背景圖片，JavaScript或者服務器端的解決方案等方法來僅向設備呈現(xiàn)必要的東西。這種方法可以顯著

當前標題：優(yōu)化移動Web產(chǎn)品的四個要點
瀏覽地址：http://muchs.cn/news48/159848.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、做網(wǎng)站、App設計、網(wǎng)站設計、外貿(mào)建站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)