1、什么是響應(yīng)式網(wǎng)站設(shè)計(jì)

概念：伊桑·馬科特在2010年首先提出了響應(yīng)式網(wǎng)頁設(shè)計(jì)（RWD,Responsive Web Design）這個(gè)術(shù)語。 簡(jiǎn)而言之是指網(wǎng)頁能自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)。

原理：主要是css根據(jù)屏幕寬度，自動(dòng)調(diào)整網(wǎng)頁div顯示和布局，以適應(yīng)不同尺寸屏幕優(yōu)化瀏覽體驗(yàn)。

價(jià)值：隨著越來越多的智能移動(dòng)設(shè)備（mobile, tablet device）加入到互聯(lián)網(wǎng)中來，移動(dòng)互聯(lián)網(wǎng)不再是獨(dú)立的小網(wǎng)絡(luò)，而是成為了 Internet 的重要組成部分。響應(yīng)式網(wǎng)頁設(shè)計(jì)（ RWD / AWD）的出現(xiàn)，目的是為移動(dòng)設(shè)備提供更好的體驗(yàn)，并且整合從PC端到手機(jī)的各種屏幕尺寸和分辨率，用技術(shù)來使網(wǎng)頁適應(yīng)不同分辨率的屏幕。

響應(yīng)式設(shè)計(jì)可以為電腦、手機(jī)、平板等不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，已成為大勢(shì)所趨。

2、為什么響應(yīng)式網(wǎng)站重要

因?yàn)楫?dāng)下屏幕分辨率不同的設(shè)備數(shù)量正在增加，從電腦、平板到智能手機(jī)，響應(yīng)式設(shè)計(jì)讓你的網(wǎng)站在任何設(shè)備上都有超贊的體驗(yàn)！48%的移動(dòng)用戶在流量一個(gè)沒有對(duì)移動(dòng)端優(yōu)化的網(wǎng)站時(shí)感到出挫敗和心煩。52%的用戶說，如果一個(gè)公司的網(wǎng)站在移動(dòng)設(shè)備上的體驗(yàn)很糟糕，就不太想和它打交道了。因?yàn)橛脩?、訪客在乎，可見響應(yīng)式網(wǎng)站設(shè)計(jì)的重要程度！

3、搭建響應(yīng)式網(wǎng)站的9個(gè)理由

作為一種能夠縮放適應(yīng)不同大小的屏幕的網(wǎng)頁設(shè)計(jì)做法，響應(yīng)式設(shè)計(jì)(Responsive Design)正日益成為最受推崇的移動(dòng)網(wǎng)頁優(yōu)化方式。在谷歌公司于2012年中期指出，響應(yīng)式設(shè)計(jì)是優(yōu)化移動(dòng)網(wǎng)站的最佳方式之后，這種設(shè)計(jì)做法的地位得到了進(jìn)一步鞏固。

隨著iPhone、iPad和Android手機(jī)的普及，網(wǎng)站主辦方發(fā)現(xiàn)，網(wǎng)站在移動(dòng)端應(yīng)當(dāng)帶來與桌面端類似的體驗(yàn)。否則，網(wǎng)站在移動(dòng)設(shè)備上看起來就只有細(xì)小的文字和鏈接，網(wǎng)頁布局也會(huì)一團(tuán)糟。這就意味著損失流量和銷售額的風(fēng)險(xiǎn)。如果你還對(duì)網(wǎng)站是否需要實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)存在質(zhì)疑的話，看看下面的網(wǎng)絡(luò)調(diào)查數(shù)據(jù)，相信你會(huì)更加認(rèn)可網(wǎng)站實(shí)現(xiàn)響應(yīng)式布局的重要性。

    · 85%的用戶認(rèn)為企業(yè)的移動(dòng)站點(diǎn)必須做的能夠媲美PC端網(wǎng)頁。

    · 移動(dòng)設(shè)備用戶的數(shù)量將在2014年末超過PC端的用戶數(shù)量。

    · 72%的用戶會(huì)同時(shí)使用多種設(shè)備。（數(shù)據(jù)整理自互聯(lián)網(wǎng)，為平均值）

    · 48%的用戶稱：如果企業(yè)的移動(dòng)網(wǎng)站做的不夠好，往往會(huì)給人不注重用戶的“錯(cuò)覺”。

    · 73%的互聯(lián)網(wǎng)用戶使用手機(jī)作為和互聯(lián)網(wǎng)互動(dòng)的主要的或是唯一的設(shè)備。

    · 48%的智能機(jī)及平板用戶表示很少企業(yè)會(huì)在移動(dòng)站點(diǎn)的優(yōu)化工作上下功夫。

    · 據(jù)統(tǒng)計(jì)目前有16%的網(wǎng)絡(luò)流量都來自于移動(dòng)端。

    · 67%的網(wǎng)民表示，更喜歡用手機(jī)在那些用戶友好度高的電商網(wǎng)站平臺(tái)上進(jìn)行購物。

    · 66%的移動(dòng)設(shè)備用戶反應(yīng)移動(dòng)網(wǎng)站的加載速度有待提高，響應(yīng)式設(shè)計(jì)的普及迫在眉睫。

4、與搜索引擎優(yōu)化的關(guān)系

在搜索引擎（尤其是百度、谷歌）中排名靠前是每個(gè)網(wǎng)站的終極目標(biāo)，具有響應(yīng)式設(shè)計(jì)布局的網(wǎng)站有助于達(dá)成這個(gè)目標(biāo)，Google已經(jīng)表明對(duì)響應(yīng)式設(shè)計(jì)的青睞。在不同的設(shè)備上，網(wǎng)站的 URL 和 HTML 都可以保持一致。這些都能簡(jiǎn)化搜索引擎對(duì)網(wǎng)站的爬行、收錄和整理，從而改善網(wǎng)站的搜索引擎可見度，有助于搜索引擎的排名，帶來更高的曝光度和客戶流量。毫無疑問，SEO 營(yíng)銷活動(dòng)既昂貴又耗時(shí)，但響應(yīng)式網(wǎng)頁開發(fā)讓你集中精力維護(hù)管理一個(gè)兼容所有設(shè)備的網(wǎng)站，從而節(jié)省大量時(shí)間和資金的投入。

5、響應(yīng)式網(wǎng)站的制作難點(diǎn)

既然響應(yīng)式設(shè)計(jì)已成為大勢(shì)所趨，為什么國(guó)內(nèi)99.9999%的網(wǎng)站都還不是響應(yīng)式的？

   1）設(shè)計(jì)原型多、兼容測(cè)試多

    制作前期，需要對(duì)用戶調(diào)研，確定制作多個(gè)尺寸線框原型界面，還需要設(shè)計(jì)師和前端開發(fā)人員保持密切的溝通。

   2）視覺設(shè)計(jì)要求高、細(xì)節(jié)多

   移動(dòng)設(shè)備的屏幕像素密度與傳統(tǒng)電腦屏幕不一樣，在設(shè)計(jì)的時(shí)候需要保證內(nèi)容文字的可讀性、控件可點(diǎn)擊區(qū)域的面積等，都將對(duì)設(shè)計(jì)師有高要求。

   3）前端實(shí)現(xiàn)難、跨技術(shù)合作

   與傳統(tǒng)的web開發(fā)相比，響應(yīng)式設(shè)計(jì)的頁面由于頁面布局、內(nèi)容尺寸發(fā)生了變化，所以最終的產(chǎn)出更有可能與設(shè)計(jì)稿出入較大，需要前端開發(fā)人員和設(shè)計(jì)師多溝通。

   4）參與人員多、耗費(fèi)精力大

   因?yàn)轫憫?yīng)式設(shè)計(jì)需要對(duì)多個(gè)界面兼容、功能調(diào)試，導(dǎo)致整個(gè)制作過程需要UI設(shè)計(jì)師和前端工程師不斷磨合制作。

6、如何搭建響應(yīng)式網(wǎng)站？

   1）自行組建團(tuán)隊(duì)開發(fā)

    優(yōu)點(diǎn)：方便溝通和管理，修改容易

    缺點(diǎn)：響應(yīng)式設(shè)計(jì)人才稀缺，團(tuán)隊(duì)建設(shè)難，耗費(fèi)高，周期長(zhǎng)

   2）外包給第三方專業(yè)團(tuán)隊(duì)

   優(yōu)點(diǎn)：現(xiàn)成團(tuán)隊(duì)，建設(shè)時(shí)間較快

   缺點(diǎn)：目前能做好響應(yīng)式網(wǎng)站的團(tuán)隊(duì)還非常少，要價(jià)高，修改升級(jí)麻煩

   3）使用自助建設(shè)平臺(tái)創(chuàng)建

   優(yōu)點(diǎn)：模板創(chuàng)建，個(gè)性化設(shè)置，時(shí)間快，費(fèi)用低

   缺點(diǎn)：不能百分百實(shí)現(xiàn)自己的功能要求