“一個網絡”，兩種口味：響應性對適應性

　　來源：GBin1.com

　　編者的話：這是Mobify的CEO，Igor Faletski發表的一篇博文，Mobify，電子商務優化平台，為智能手機和平板電腦提供了適應網站的工具。

　　你可能聽人說過，“我們生活在後電腦時代”。這對網絡開發者而言意味什麼?它意味著你的網站，有30%到50%的流量來自於移動電子設備。它同時意味著，不久之後，桌面用戶或者筆記本電腦用戶將會成為網絡的少數派。

　　面對這樣用戶模式構建的轉變，我們又要如何應對呢?我們已經跨越了m-dot或是t-dot時代，步入了一個由響應和自適應設計技術統治的時期 - W3C將它稱為“一個網絡途徑”。W3C最主要的建議是：“所謂的‘一個網絡’是指，就合理性而言，網絡應該為用戶提供同樣的信息以及服務，無論這個用戶使用的是什麼終端設備。”

　　對於開發者而言，使用“一個網絡”不僅是讓網站今時今日在智能手機或者平板電腦上暢行工作，更可以在今時今日，我們不能想象的，面向未來的終端上工作無誤。

　　當前我們有三種最為普遍的，開發“一個網絡”網站的方式：使用響應式設計;客戶端適應性設計和服務器端適應性設計。

　　這三種開發設計模式，並沒有誰最好或者誰最差之分，每一個都各有千秋，有優點，也有缺點，而聰明的開發者會在開發前，考慮到這三種方法的優缺點，從而選擇一個最為合適的途徑。

　　響應式設計

　　響應式網絡設計是最為大眾的“一個網絡”的設計方式。這種方式使用了CSS媒體查詢，用於根據不同終端顯示器的大小而改變網站的顯示。從波士頓環球報，到迪斯尼，再到Indochino，響應式網站的數量正在迅速增加。

　　這種方式一個最為主要的優點是，對於所有的終端設備，設計者只需要使用一個模板，在CSS中定義不同屏幕大小如何顯示內容就可以了。而且，這些設計者可以繼續使用他們所熟悉的技術，例如CSS，HTML。另外，現在有更多的，友好響應的開源工具，例如Bootstrap或是Foundation，這些開源工具簡化了搭建響應網站的過程。

　　另一方面，完整的響應式設計很少有快捷便利的方式。要做到響應，組織者往往需要承擔一個完整的網站重建。

　　設 計和測試會非常的繁瑣，因為要針對每一種可能設備的用戶體驗做出設計是非常困難的。我們看到響應式網站的布局看起來像是一塊塊拼圖，並不是契合的一體。響 應式網站設計最好是應用在移動設備優先的開發上，即移動設備用例在開發中作為最優先考慮。漸進增強處理，在將設計延伸至平板電腦和桌面用例上。

　　性能也是響應式網站的一大棘手難題。在Mobify，我們最近完成的對於15個流行的電子商務網站的分析指出，在這些網站中，主頁加載平均是87個資源和1.9MB的數據，一些響應網頁竟然有15MB大小。

　　加 載的數據之所以這麼大，是因為響應式網站需要覆蓋所有的設備。你的用戶只用一種設備，他卻需要等待所有的界面元素和資源全部加載完全，才可以浏覽使用。簡 單地說，性能問題已經觸及了你的底線。在智能手機上，用戶等待一秒鐘的時間，轉換率會下降3.5%。只需要3秒，用戶就會選擇完全離開你的頁面了。

　　當響應網站很快的成為約定俗成的標准，它同時為在線商務帶來了新的挑戰，其中包括如何處理圖片，如何優化移動設備的性能，以及當網站轉變為移動設備優先時，不得不面臨著重頭構建的問題。

　　客戶端適應網站

　　適應性設計是在特定的設備和環境的基礎上，依據響應式設計的本質，提供具有針對性的用戶體驗。它使用JavaScript提供的先進功能和強大的可定制性來 豐富網站。例如，自適應網站可以只對Retina顯示屏(如新iPad，iPad mini)提供Retina素質的圖片，而標准的顯示器只能接收低像素的圖片。

　　適應性設計有兩種，一種是在客戶端的，即在用戶的浏覽器上應 用適應性，另一種是服務器端的，需要繁重的檢測大量的設備然後加載適當的模板。客戶端適應性網站的用例如Threadless和ideeli。適應模板方 式最給力的一點是，在不同的設備之間，重復使用一套HTML和JavaScript，如此大大簡化了管理和測試的工作。

　　客 戶端適應網站意味 著你不需要重新構建你的網站。取而代之的是，你可以在傳輸移動響應布局的同時，構建現有的內容。對於一個專家級的開發者而言，這個方法還可以專門針對特定 的設備或屏幕分辨率。例如，對許多Mobify的在線時裝零售客戶，他們的移動流量95%來自於iPhones。客戶端適應意味著他們可以專門對 Apple智能手機進行優化。

　　不同於相應設計，適應模板確保了在用戶的終端上，只有必須的資源被加載。因為設備檢測被移到了移動終端自行檢測，CDN網絡，例如Akamai和Edgecast，就可以使用大部分的緩存功能而不破壞用戶體驗。

　　客戶端適應方法比起響應設計，在使用上有著更高的門檻。開發人員需要扎實的JavaScript基礎才能使用這項技術。同時它還需要依靠網站已存在的模板作為基礎。最後，因為客戶端適應性是在你已有的底層代碼上添加一層代碼，你必須保持你的網站作為一個整體而發展。

　　服務器適應網站

　　我們可以用多種方法，通過服務器端插件和用戶代理檢測來完成服務器端適應性網站的開發。用服務器端適應性開發的網站包括Etsy，One Lings Lane和OnlineShoes.com。

　　我們為什麼要選擇服務器端適應來開發網站呢?通常它為每一個設備提供一個獨有的模板，使得網站具有更強的定制性，並且它在服務器端保留著設備檢測邏輯，使較小的移動頁面加載的更快。另外，現在還有許多服務器端插件提供給大部分CMS系統和電子商務系統。

　　這 種方式並不適合膽小者 - 它通常要求你的後台系統做出重大變化，這可能會需要一個漫長的(以及昂貴的)實現過程。管理多個模板的要求增加了日常維護的成本。最終，這種方式還會在服 務器重負載的情況下，遇到性能問題。當移動用戶代理檢測工作在服務器端，像Akamai這樣的CDN部署的共用緩存機制則需要關閉。否則它將導致桌面用戶 和移動用戶的體驗變慢。

　　當然，多數公司仍舊在與響應方式做搏斗，他們還沒有准備好面對更復雜的口味-適應性。然而，越來越多的競爭和移動通信，將會推動越來越多的組織在三種方式中不斷試驗，最終找到一個最為適合他們用戶的方法。

　　文章來源：http://www.gbin1.com/tools/design/20130516-responsive-vs-adaptive/