天下規模內挪動裝備的應用數目在一日千裡。面臨在超過多個分歧裝備上創立優越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如許的辦法，來阻攔沒必要要的圖片加載。

　　應用辦事器真個辦理計劃來檢測拜訪你的站點的裝備，而且隻通報一些需要的器械。

　　隱蔽在這些辦理計劃上面的雷同理念是，應用media queries，配景圖片，JavaScript大概辦事器真個辦理計劃等辦法來僅向裝備出現需要的器械。這類辦法能夠明顯地削減文件傳輸巨細而且進步網站機能。

　　舉個例子來說， Bagcheck的挪動優化模板為每一個列表上的項目供給50×50像素巨細的緊縮圖片(均勻巨細為3KB)，而Bagcheck桌面優化模板則為響應的列表項目供給200×125像素巨細的圖片(均勻巨細為15KB)。具有20個表項也就是300KB巨細的差別外加少於20個http要求的頁面臨於網站機能有異常大的影響。我們具有自力的挪動模板，以是就隻須要在挪動裝備上表現列表的前10個表項，如許便可以別的削減30KB的負載。

　　桌面裝備上一個分類頁面統共有360KB巨細的圖片，而響應地頁面在挪動裝備上隻要30KB巨細，這確切是個異常大的差別。

　　然則優化圖片不但僅是文件巨細的優化，你也能夠為小屏幕裝備經心計劃一些表現圖片，而沒有是經由過程縮放來順應屏幕的巨細。當圖片中的內容很主要的話，如許子做就顯得特別主要。

　　一樣的體系能夠用來優化視頻表現。在全部裝備上，我們願望經由過程簡略的單擊操縱就可以夠完成視頻回放。以是我們的桌面模板將視頻文件間接嵌入到頁面中，而挪動模板僅僅表現一個縮略圖，二者都隻須要經由過程簡略的單擊操縱便可以開端播放視頻。在挪動裝備上面應用縮略圖可使得視頻加載速率更快，而且可以或許更好地掌握頁面結構/像素尺寸。

　　URL構造(URL structure)

　　我們不但僅隻從資本次序(Source order)和媒體(Media)兩個方面來優化挪動版本的Bagcheck。在某些情形下，奇特的URL構造將會對站點機能和小屏幕低速銜接的裝備的用戶體驗發生龐大的影響。

　　比方，桌面版的Bagcheck在一個URL上面表現全部的內容列表，批評，更新和偏好。我們將這些部門大概模塊綁縛在一個單一文件中，然後在不必革新頁面的情形下靜態加載每一個模塊。如許做能夠在桌面體驗上發生一個膩滑過渡，但在挪動體驗方面就會增長很多帶寬累贅。

　　以是挪動Web版本的Bagcheck應用分歧的URL構造。雷同的URL加載雷同的初始內容，然則每一個子模塊都具有一個獨一的URL和一個自力的頁面，以下圖所示：

在這個模子裡，

　　bagcheck.com/bag/7811

　　在挪動裝備和桌面裝備上加載雷同的內容，然則以下這些

　　bagcheck.com/mobile/bag/7811/updates

　　bagcheck.com/mobile/bag/7811/comments

　　bagcheck.com/mobile/bag/7811/likes

　　都是挪動裝備上才有的URL。應用如許的構造，我們經由過程將較大的文件分紅小塊便可以更進一步地優化機能。別的值得留意的是，我們將這些挪動裝備獨有的URL設置為nofollow，如許搜刮引擎就沒有會對他們舉行索引。

　　運用法式計劃(Application Design)

　　URL構造也能夠贊助優化挪動裝備上的擴大交互。將更長的義務大概多步/多模塊的運用法式構造在分歧的頁面上，可讓用戶一次隻處置一種交互。在較大屏幕上，經由過程模態對話框大概模塊/面板舉行的交互，平日也能夠到達在較小屏幕上應用自力頁面的後果。

　　當代智妙手機和桌面/手提電腦之間的裝備機能千差萬別。比方在挪動裝備上能夠得到10-50m規模內的準確地位信息，而在桌面/手提電腦上卻隻能得到更小規模的信息。這類信息的獵取可以或許明顯地轉變運用法式接口的計劃。

　　我們構建Bagcheck時應用的兩重模板體系使得我們可以或許優化更長的交互，而且可以或許在我們的運用法式內部應用裝備功效。在挪動裝備上我們啟動瞭條形碼掃描功效，如許子用戶便可以應用手機內置的攝像機來辨認物品。我們也從新構造瞭非線性列表創立對象(non-linear list creation tool)，使其成為手機上一系列更加專註和短小的義務。

　　源文作者：Luke Wroblewski 2011年9月1日

　　Luke Wroblewski 國際著名的數字產物專傢，小我簡介： /about

　　文章起源：webapptrend.com