“一個(gè)網(wǎng)絡(luò)”,兩種口味:響應(yīng)性對(duì)適應(yīng)性_建站經(jīng)驗(yàn)教程
推薦:網(wǎng)站運(yùn)營(yíng):蘑菇街網(wǎng)站高轉(zhuǎn)化率之運(yùn)營(yíng)策略提到國(guó)內(nèi)女性購(gòu)物社區(qū),人們很容易想到蘑菇街和美麗說(shuō)的火爆。有人說(shuō)是微博成就了這兩家網(wǎng)站,也有人說(shuō)是創(chuàng)新的營(yíng)銷模式打開了市場(chǎng),尤其是美麗說(shuō)和蘑菇街的微博營(yíng)銷,被很
來(lái)源:GBin1.com

編者的話:這是Mobify的CEO,Igor Faletski發(fā)表的一篇博文,Mobify,電子商務(wù)優(yōu)化平臺(tái),為智能手機(jī)和平板電腦提供了適應(yīng)網(wǎng)站的工具。
你可能聽人說(shuō)過(guò),“我們生活在后電腦時(shí)代”。這對(duì)網(wǎng)絡(luò)開發(fā)者而言意味什么?它意味著你的網(wǎng)站,有30%到50%的流量來(lái)自于移動(dòng)電子設(shè)備。它同時(shí)意味著,不久之后,桌面用戶或者筆記本電腦用戶將會(huì)成為網(wǎng)絡(luò)的少數(shù)派。
面對(duì)這樣用戶模式構(gòu)建的轉(zhuǎn)變,我們又要如何應(yīng)對(duì)呢?我們已經(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ù),無(wú)論這個(gè)用戶使用的是什么終端設(shè)備。”
對(duì)于開發(fā)者而言,使用“一個(gè)網(wǎng)絡(luò)”不僅是讓網(wǎng)站今時(shí)今日在智能手機(jī)或者平板電腦上暢行工作,更可以在今時(shí)今日,我們不能想象的,面向未來(lái)的終端上工作無(wú)誤。
當(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ì)模式,并沒有誰(shuí)最好或者誰(shuí)最差之分,每一個(gè)都各有千秋,有優(yōu)點(diǎn),也有缺點(diǎn),而聰明的開發(fā)者會(huì)在開發(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)是,對(duì)于所有的終端設(shè)備,設(shè)計(jì)者只需要使用一個(gè)模板,在CSS中定義不同屏幕大小如何顯示內(nèi)容就可以了。而且,這些設(shè)計(jì)者可以繼續(xù)使用他們所熟悉的技術(shù),例如CSS,HTML。另外,現(xiàn)在有更多的,友好響應(yīng)的開源工具,例如Bootstrap或是Foundation,這些開源工具簡(jiǎn)化了搭建響應(yīng)網(wǎng)站的過(guò)程。
另一方面,完整的響應(yīng)式設(shè)計(jì)很少有快捷便利的方式。要做到響應(yīng),組織者往往需要承擔(dān)一個(gè)完整的網(wǎng)站重建。
設(shè) 計(jì)和測(cè)試會(huì)非常的繁瑣,因?yàn)橐槍?duì)每一種可能設(shè)備的用戶體驗(yàn)做出設(shè)計(jì)是非常困難的。我們看到響應(yīng)式網(wǎng)站的布局看起來(lái)像是一塊塊拼圖,并不是契合的一體。響 應(yīng)式網(wǎng)站設(shè)計(jì)最好是應(yīng)用在移動(dòng)設(shè)備優(yōu)先的開發(fā)上,即移動(dòng)設(shè)備用例在開發(fā)中作為最優(yōu)先考慮。漸進(jìn)增強(qiáng)處理,在將設(shè)計(jì)延伸至平板電腦和桌面用例上。
性能也是響應(yīng)式網(wǎng)站的一大棘手難題。在Mobify,我們最近完成的對(duì)于15個(gè)流行的電子商務(wù)網(wǎng)站的分析指出,在這些網(wǎng)站中,主頁(yè)加載平均是87個(gè)資源和1.9MB的數(shù)據(jù),一些響應(yīng)網(wǎng)頁(yè)竟然有15MB大小。
加 載的數(shù)據(jù)之所以這么大,是因?yàn)轫憫?yīng)式網(wǎng)站需要覆蓋所有的設(shè)備。你的用戶只用一種設(shè)備,他卻需要等待所有的界面元素和資源全部加載完全,才可以瀏覽使用。簡(jiǎn) 單地說(shuō),性能問題已經(jīng)觸及了你的底線。在智能手機(jī)上,用戶等待一秒鐘的時(shí)間,轉(zhuǎn)換率會(huì)下降3.5%。只需要3秒,用戶就會(huì)選擇完全離開你的頁(yè)面了。
當(dāng)響應(yīng)網(wǎng)站很快的成為約定俗成的標(biāo)準(zhǔn),它同時(shí)為在線商務(wù)帶來(lái)了新的挑戰(zhàn),其中包括如何處理圖片,如何優(yōu)化移動(dòng)設(shè)備的性能,以及當(dāng)網(wǎng)站轉(zhuǎn)變?yōu)橐苿?dòng)設(shè)備優(yōu)先時(shí),不得不面臨著重頭構(gòu)建的問題。
客戶端適應(yīng)網(wǎng)站
適應(yīng)性設(shè)計(jì)是在特定的設(shè)備和環(huán)境的基礎(chǔ)上,依據(jù)響應(yīng)式設(shè)計(jì)的本質(zhì),提供具有針對(duì)性的用戶體驗(yàn)。它使用JavaScript提供的先進(jìn)功能和強(qiáng)大的可定制性來(lái) 豐富網(wǎng)站。例如,自適應(yīng)網(wǎng)站可以只對(duì)Retina顯示屏(如新iPad,iPad mini)提供Retina素質(zhì)的圖片,而標(biāo)準(zhǔn)的顯示器只能接收低像素的圖片。
適應(yīng)性設(shè)計(jì)有兩種,一種是在客戶端的,即在用戶的瀏覽器上應(yīng) 用適應(yīng)性,另一種是服務(wù)器端的,需要繁重的檢測(cè)大量的設(shè)備然后加載適當(dāng)?shù)哪0濉?蛻舳诉m應(yīng)性網(wǎng)站的用例如Threadless和ideeli。適應(yīng)模板方 式最給力的一點(diǎn)是,在不同的設(shè)備之間,重復(fù)使用一套HTML和JavaScript,如此大大簡(jiǎn)化了管理和測(cè)試的工作。
客 戶端適應(yīng)網(wǎng)站意味 著你不需要重新構(gòu)建你的網(wǎng)站。取而代之的是,你可以在傳輸移動(dòng)響應(yīng)布局的同時(shí),構(gòu)建現(xiàn)有的內(nèi)容。對(duì)于一個(gè)專家級(jí)的開發(fā)者而言,這個(gè)方法還可以專門針對(duì)特定 的設(shè)備或屏幕分辨率。例如,對(duì)許多Mobify的在線時(shí)裝零售客戶,他們的移動(dòng)流量95%來(lái)自于iPhones�?蛻舳诉m應(yīng)意味著他們可以專門對(duì) Apple智能手機(jī)進(jìn)行優(yōu)化。
不同于相應(yīng)設(shè)計(jì),適應(yīng)模板確保了在用戶的終端上,只有必須的資源被加載。因?yàn)樵O(shè)備檢測(cè)被移到了移動(dòng)終端自行檢測(cè),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)站
我們可以用多種方法,通過(guò)服務(wù)器端插件和用戶代理檢測(cè)來(lái)完成服務(wù)器端適應(yīng)性網(wǎng)站的開發(fā)。用服務(wù)器端適應(yīng)性開發(fā)的網(wǎng)站包括Etsy,One Lings Lane和OnlineShoes.com。
我們?yōu)槭裁匆x擇服務(wù)器端適應(yīng)來(lái)開發(fā)網(wǎng)站呢?通常它為每一個(gè)設(shè)備提供一個(gè)獨(dú)有的模板,使得網(wǎng)站具有更強(qiáng)的定制性,并且它在服務(wù)器端保留著設(shè)備檢測(cè)邏輯,使較小的移動(dòng)頁(yè)面加載的更快。另外,現(xiàn)在還有許多服務(wù)器端插件提供給大部分CMS系統(tǒng)和電子商務(wù)系統(tǒng)。
這 種方式并不適合膽小者 - 它通常要求你的后臺(tái)系統(tǒng)做出重大變化,這可能會(huì)需要一個(gè)漫長(zhǎng)的(以及昂貴的)實(shí)現(xiàn)過(guò)程。管理多個(gè)模板的要求增加了日常維護(hù)的成本。最終,這種方式還會(huì)在服 務(wù)器重負(fù)載的情況下,遇到性能問題。當(dāng)移動(dòng)用戶代理檢測(cè)工作在服務(wù)器端,像Akamai這樣的CDN部署的共用緩存機(jī)制則需要關(guān)閉。否則它將導(dǎo)致桌面用戶 和移動(dòng)用戶的體驗(yàn)變慢。
當(dāng)然,多數(shù)公司仍舊在與響應(yīng)方式做搏斗,他們還沒有準(zhǔn)備好面對(duì)更復(fù)雜的口味-適應(yīng)性。然而,越來(lái)越多的競(jìng)爭(zhēng)和移動(dòng)通信,將會(huì)推動(dòng)越來(lái)越多的組織在三種方式中不斷試驗(yàn),最終找到一個(gè)最為適合他們用戶的方法。
文章來(lái)源:http://www.gbin1.com/tools/design/20130516-responsive-vs-adaptive/
分享:從一場(chǎng)大雨淺談如何進(jìn)行微博O2O營(yíng)銷微博是把眾多 自媒體聚合在一起的平臺(tái),當(dāng)我們通過(guò)微博平臺(tái)獲得自媒體人第一時(shí)間發(fā)布的本地相關(guān)信息時(shí),應(yīng)該思考,如何把這種最接地氣的本地信息變成本地用戶所在乎的熱 點(diǎn)
- 雙十二電商促銷思路淺析
- Matt Cutts:不要把注意力放在PR上
- 百度要革自己的命?移動(dòng)搜索或取消PC網(wǎng)頁(yè)收錄
- Google adsense帳戶被封到解封全過(guò)程
- 菜鳥如何通過(guò)競(jìng)價(jià)賺取第一桶金?
- 不接電話會(huì)讓你的備案號(hào)注銷
- 盧松松:搜搜已停止收錄網(wǎng)頁(yè)
- 你懂得:百度文庫(kù)也玩?zhèn)人+V認(rèn)證了
- 頭腦風(fēng)暴:為什么搜索引擎不在乎我們?
- 搜狗聯(lián)盟:360 X 300的廣告位變現(xiàn)能力強(qiáng)
- 盧松松:做這樣的資源站,長(zhǎng)不了
- 盧松松:一個(gè)小學(xué)教師建站的不惑與困惑
建站經(jīng)驗(yàn)教程Rss訂閱網(wǎng)站運(yùn)營(yíng)教程搜索
建站經(jīng)驗(yàn)教程推薦
- 一個(gè)大學(xué)生做站辛苦網(wǎng)賺成長(zhǎng)經(jīng)歷
- Godaddy新手攻略:10分鐘幫你搞定一個(gè)網(wǎng)站
- 一個(gè)小小草根的艱辛建站之路
- 談?wù)勎易稣臼〉膸讉(gè)原因
- 設(shè)計(jì)好盈利模式后再運(yùn)營(yíng)網(wǎng)站
- 盈利模式探索:販賣虛擬道具和商業(yè)廣告
- 淺談運(yùn)營(yíng)SNS的一些經(jīng)驗(yàn)
- 如何運(yùn)營(yíng)好電影主題的微信公眾號(hào)
- 不懂網(wǎng)站的人,靠網(wǎng)站月賺20萬(wàn)
- 淺析四大門戶網(wǎng)站的評(píng)論網(wǎng)頁(yè)設(shè)計(jì)
猜你也喜歡看這些
- 周維:新人如何學(xué)習(xí)網(wǎng)絡(luò)營(yíng)銷?
- 經(jīng)驗(yàn)之談:用戶如何對(duì)服務(wù)器供應(yīng)商進(jìn)行考核
- 我的論壇建設(shè)歷程與各位共同分享
- 地方網(wǎng)站經(jīng)營(yíng)之認(rèn)知度 計(jì)劃性與執(zhí)行力
- 細(xì)讀HiShop5.0促銷功能 做好網(wǎng)絡(luò)營(yíng)銷
- 下載模板需注意的幾個(gè)問題
- 晉江原創(chuàng)網(wǎng):給予女性用戶的特色溫柔
- google中文網(wǎng)站站長(zhǎng)博客:關(guān)于垃圾留言鏈接
- 網(wǎng)站快速成功的九個(gè)步驟
- 登陸頁(yè)高效優(yōu)化思路是簡(jiǎn)單再簡(jiǎn)單!
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索“一個(gè)網(wǎng)絡(luò)”,兩種口味:響應(yīng)性對(duì)適應(yīng)性
- 教程說(shuō)明:
建站經(jīng)驗(yàn)教程-“一個(gè)網(wǎng)絡(luò)”,兩種口味:響應(yīng)性對(duì)適應(yīng)性
。