來源：GBin1.com

　　編者的話：這是Mobify的CEO，Igor Faletski發(fā)表的一篇博文，Mobify，電子商務(wù)優(yōu)化平臺，為智能手機(jī)和平板電腦提供了適應(yīng)網(wǎng)站的工具。

　　你可能聽人說過，“我們生活在后電腦時(shí)代”。這對網(wǎng)絡(luò)開發(fā)者而言意味什么?它意味著你的網(wǎng)站，有30%到50%的流量來自于移動電子設(shè)備。它同時(shí)意味著，不久之后，桌面用戶或者筆記本電腦用戶將會成為網(wǎng)絡(luò)的少數(shù)派。

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

　　對于開發(fā)者而言，使用“一個(gè)網(wǎng)絡(luò)”不僅是讓網(wǎng)站今時(shí)今日在智能手機(jī)或者平板電腦上暢行工作，更可以在今時(shí)今日，我們不能想象的，面向未來的終端上工作無誤。

　　當(dāng)前我們有三種最為普遍的，開發(fā)“一個(gè)網(wǎng)絡(luò)”網(wǎng)站的方式：使用響應(yīng)式設(shè)計(jì);客戶端適應(yīng)性設(shè)計(jì)和服務(wù)器端適應(yīng)性設(shè)計(jì)。

　　這三種開發(fā)設(shè)計(jì)模式，并沒有誰最好或者誰最差之分，每一個(gè)都各有千秋，有優(yōu)點(diǎn)，也有缺點(diǎn)，而聰明的開發(fā)者會在開發(fā)前，考慮到這三種方法的優(yōu)缺點(diǎn)，從而選擇一個(gè)最為合適的途徑。

　　響應(yīng)式設(shè)計(jì)

　　響應(yīng)式網(wǎng)絡(luò)設(shè)計(jì)是最為大眾的“一個(gè)網(wǎng)絡(luò)”的設(shè)計(jì)方式。這種方式使用了CSS媒體查詢，用于根據(jù)不同終端顯示器的大小而改變網(wǎng)站的顯示。從波士頓環(huán)球報(bào)，到迪斯尼，再到Indochino，響應(yīng)式網(wǎng)站的數(shù)量正在迅速增加。

　　這種方式一個(gè)最為主要的優(yōu)點(diǎn)是，對于所有的終端設(shè)備，設(shè)計(jì)者只需要使用一個(gè)模板，在CSS中定義不同屏幕大小如何顯示內(nèi)容就可以了。而且，這些設(shè)計(jì)者可以繼續(xù)使用他們所熟悉的技術(shù)，例如CSS，HTML。另外，現(xiàn)在有更多的，友好響應(yīng)的開源工具，例如Bootstrap或是Foundation，這些開源工具簡化了搭建響應(yīng)網(wǎng)站的過程。

　　另一方面，完整的響應(yīng)式設(shè)計(jì)很少有快捷便利的方式。要做到響應(yīng)，組織者往往需要承擔(dān)一個(gè)完整的網(wǎng)站重建。

　　設(shè) 計(jì)和測試會非常的繁瑣，因?yàn)橐槍γ恳环N可能設(shè)備的用戶體驗(yàn)做出設(shè)計(jì)是非常困難的。我們看到響應(yīng)式網(wǎng)站的布局看起來像是一塊塊拼圖，并不是契合的一體。響 應(yīng)式網(wǎng)站設(shè)計(jì)最好是應(yīng)用在移動設(shè)備優(yōu)先的開發(fā)上，即移動設(shè)備用例在開發(fā)中作為最優(yōu)先考慮。漸進(jìn)增強(qiáng)處理，在將設(shè)計(jì)延伸至平板電腦和桌面用例上。

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

　　加 載的數(shù)據(jù)之所以這么大，是因?yàn)轫憫?yīng)式網(wǎng)站需要覆蓋所有的設(shè)備。你的用戶只用一種設(shè)備，他卻需要等待所有的界面元素和資源全部加載完全，才可以瀏覽使用。簡 單地說，性能問題已經(jīng)觸及了你的底線。在智能手機(jī)上，用戶等待一秒鐘的時(shí)間，轉(zhuǎn)換率會下降3.5%。只需要3秒，用戶就會選擇完全離開你的頁面了。

　　當(dāng)響應(yīng)網(wǎng)站很快的成為約定俗成的標(biāo)準(zhǔn)，它同時(shí)為在線商務(wù)帶來了新的挑戰(zhàn)，其中包括如何處理圖片，如何優(yōu)化移動設(shè)備的性能，以及當(dāng)網(wǎng)站轉(zhuǎn)變?yōu)橐苿釉O(shè)備優(yōu)先時(shí)，不得不面臨著重頭構(gòu)建的問題。

　　客戶端適應(yīng)網(wǎng)站

　　適應(yīng)性設(shè)計(jì)是在特定的設(shè)備和環(huán)境的基礎(chǔ)上，依據(jù)響應(yīng)式設(shè)計(jì)的本質(zhì)，提供具有針對性的用戶體驗(yàn)。它使用JavaScript提供的先進(jìn)功能和強(qiáng)大的可定制性來 豐富網(wǎng)站。例如，自適應(yīng)網(wǎng)站可以只對Retina顯示屏(如新iPad，iPad mini)提供Retina素質(zhì)的圖片，而標(biāo)準(zhǔn)的顯示器只能接收低像素的圖片。

　　適應(yīng)性設(shè)計(jì)有兩種，一種是在客戶端的，即在用戶的瀏覽器上應(yīng) 用適應(yīng)性，另一種是服務(wù)器端的，需要繁重的檢測大量的設(shè)備然后加載適當(dāng)?shù)哪０?。客戶端適應(yīng)性網(wǎng)站的用例如Threadless和ideeli。適應(yīng)模板方 式最給力的一點(diǎn)是，在不同的設(shè)備之間，重復(fù)使用一套HTML和JavaScript，如此大大簡化了管理和測試的工作。

　　客 戶端適應(yīng)網(wǎng)站意味 著你不需要重新構(gòu)建你的網(wǎng)站。取而代之的是，你可以在傳輸移動響應(yīng)布局的同時(shí)，構(gòu)建現(xiàn)有的內(nèi)容。對于一個(gè)專家級的開發(fā)者而言，這個(gè)方法還可以專門針對特定 的設(shè)備或屏幕分辨率。例如，對許多Mobify的在線時(shí)裝零售客戶，他們的移動流量95%來自于iPhones?？蛻舳诉m應(yīng)意味著他們可以專門對 Apple智能手機(jī)進(jìn)行優(yōu)化。

　　不同于相應(yīng)設(shè)計(jì)，適應(yīng)模板確保了在用戶的終端上，只有必須的資源被加載。因?yàn)樵O(shè)備檢測被移到了移動終端自行檢測，CDN網(wǎng)絡(luò)，例如Akamai和Edgecast，就可以使用大部分的緩存功能而不破壞用戶體驗(yàn)。

　　客戶端適應(yīng)方法比起響應(yīng)設(shè)計(jì)，在使用上有著更高的門檻。開發(fā)人員需要扎實(shí)的JavaScript基礎(chǔ)才能使用這項(xiàng)技術(shù)。同時(shí)它還需要依靠網(wǎng)站已存在的模板作為基礎(chǔ)。最后，因?yàn)榭蛻舳诉m應(yīng)性是在你已有的底層代碼上添加一層代碼，你必須保持你的網(wǎng)站作為一個(gè)整體而發(fā)展。

　　服務(wù)器適應(yīng)網(wǎng)站

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

　　我們?yōu)槭裁匆x擇服務(wù)器端適應(yīng)來開發(fā)網(wǎng)站呢?通常它為每一個(gè)設(shè)備提供一個(gè)獨(dú)有的模板，使得網(wǎng)站具有更強(qiáng)的定制性，并且它在服務(wù)器端保留著設(shè)備檢測邏輯，使較小的移動頁面加載的更快。另外，現(xiàn)在還有許多服務(wù)器端插件提供給大部分CMS系統(tǒng)和電子商務(wù)系統(tǒng)。

　　這 種方式并不適合膽小者 - 它通常要求你的后臺系統(tǒng)做出重大變化，這可能會需要一個(gè)漫長的(以及昂貴的)實(shí)現(xiàn)過程。管理多個(gè)模板的要求增加了日常維護(hù)的成本。最終，這種方式還會在服 務(wù)器重負(fù)載的情況下，遇到性能問題。當(dāng)移動用戶代理檢測工作在服務(wù)器端，像Akamai這樣的CDN部署的共用緩存機(jī)制則需要關(guān)閉。否則它將導(dǎo)致桌面用戶 和移動用戶的體驗(yàn)變慢。

　　當(dāng)然，多數(shù)公司仍舊在與響應(yīng)方式做搏斗，他們還沒有準(zhǔn)備好面對更復(fù)雜的口味-適應(yīng)性。然而，越來越多的競爭和移動通信，將會推動越來越多的組織在三種方式中不斷試驗(yàn)，最終找到一個(gè)最為適合他們用戶的方法。

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