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

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)( Responsive Web Design，通?？s寫(xiě)為RWD) 或響應(yīng)式設(shè)計(jì)是一種現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)方法，目標(biāo)是旨在使網(wǎng)頁(yè)在各種設(shè)備（例如手機(jī)、平板電腦或臺(tái)式機(jī)、甚至只能電視）和窗口或屏幕尺寸（從最小到最大顯示尺寸）上都能良好呈現(xiàn)，以確?？捎眯院蜐M意度。

因此，創(chuàng)建響應(yīng)式網(wǎng)站的過(guò)程包括使用各種旨在提高靈活性的網(wǎng)格和布局。如果一個(gè)人在 MacBook 上使用網(wǎng)站，然后轉(zhuǎn)到 iPhone 或使用 Android 設(shè)備向朋友發(fā)送消息，則該網(wǎng)站應(yīng)在所有平臺(tái)上以相同的方式運(yùn)行，從而創(chuàng)造相同的整體體驗(yàn)。

它是如何工作的？該方法使用層疊樣式表 (CSS)。網(wǎng)站的外觀取決于方向、屏幕尺寸和分辨率等因素，以及用戶設(shè)備的顏色功能等屬性，從而可以創(chuàng)建一個(gè)更加通用和靈活的網(wǎng)站。

響應(yīng)式設(shè)計(jì)通過(guò)使用基于流體比例的網(wǎng)格、靈活圖像和CSS3媒體查詢規(guī)則的擴(kuò)展等技術(shù)，使網(wǎng)頁(yè)布局適應(yīng)查看環(huán)境，具體方式如下：@media

• 流體網(wǎng)格概念要求頁(yè)面元素的大小采用百分比等相對(duì)單位，而不是像素或點(diǎn)等絕對(duì)單位。
• 彈性圖像也采用相對(duì)單位來(lái)調(diào)整大小，這樣可以防止它們顯示在其包含元素之外。
• 媒體查詢?cè)试S頁(yè)面根據(jù)網(wǎng)站顯示設(shè)備的特性使用不同的 CSS 樣式規(guī)則，例如渲染表面的寬度（瀏覽器窗口寬度或物理顯示尺寸）。
• 響應(yīng)式布局可以自動(dòng)調(diào)整并適應(yīng)任何設(shè)備屏幕尺寸，無(wú)論是臺(tái)式機(jī)、筆記本電腦、平板電腦還是手機(jī)。

隨著移動(dòng)設(shè)備用戶成為網(wǎng)站訪問(wèn)者的大多數(shù)，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)變得越來(lái)越重要。例如，2015 年，谷歌宣布了Mobilegeddon，并開(kāi)始提升通過(guò)移動(dòng)設(shè)備搜索時(shí)移動(dòng)友好型網(wǎng)站的頁(yè)面排名。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是用戶界面可塑性的一個(gè)例子。

歷史

W3C 的 HTML+ 規(guī)范規(guī)定，網(wǎng)站必須根據(jù)用戶偏好進(jìn)行呈現(xiàn)。但網(wǎng)頁(yè)布局的定制化卻不足。許多網(wǎng)頁(yè)開(kāi)發(fā)人員采用普通的 HTML 表格來(lái)定制布局，同時(shí)為其網(wǎng)站帶來(lái)一些基本的響應(yīng)能力。

第一個(gè)以非平凡方式適應(yīng)瀏覽器視口寬度的布局為特色的大型網(wǎng)站是Audi.com，于 2001 年底推出，由razorfish的一個(gè)團(tuán)隊(duì)創(chuàng)建，該團(tuán)隊(duì)由 Jürgen Spangl 和Jim Kalbach（信息架構(gòu)）、Ken Olling（設(shè)計(jì)）和 Jan Hoffmann（界面開(kāi)發(fā)）組成。瀏覽器功能有限，這意味著對(duì)于 Internet Explorer，布局可以在瀏覽器中動(dòng)態(tài)調(diào)整，而對(duì)于 Netscape，調(diào)整大小時(shí)必須從服務(wù)器重新加載頁(yè)面。

卡梅隆·亞當(dāng)斯 (Cameron Adams) 于 2004 年創(chuàng)建了一個(gè)演示。到 2008 年，許多相關(guān)術(shù)語(yǔ)（如“靈活”、“流動(dòng)”“流體”和“彈性”）被用于描述布局。CSS3 媒體查詢?cè)?2008 年末/2009 年初幾乎已準(zhǔn)備就緒。Ethan Marcotte 在 2010 年 5 月的A List Apart文章中創(chuàng)造了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)這個(gè)術(shù)語(yǔ)— 并將其定義為流體網(wǎng)格/靈活圖像/媒體查詢。他在 2011 年出版的簡(jiǎn)短著作《響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)》中描述了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的理論和實(shí)踐。響應(yīng)式設(shè)計(jì)在.net 雜志的 2012 年頂級(jí)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)中位居第二，而漸進(jìn)式增強(qiáng)則位居第一。

Mashable將 2013 年稱為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)年。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的 SEO 優(yōu)勢(shì)

為什么移動(dòng)響應(yīng)能力對(duì)SEO很重要？

作為管理合伙人，您可能對(duì)網(wǎng)頁(yè)的后臺(tái)功能、HTML或設(shè)計(jì)技術(shù)沒(méi)有太多經(jīng)驗(yàn)。重要的是了解響應(yīng)式網(wǎng)站如何為您當(dāng)前和潛在客戶創(chuàng)造更好的體驗(yàn)。

任何網(wǎng)站的主要目標(biāo)都是確保出色的用戶體驗(yàn)。這意味著您的理想客戶可以使用您的網(wǎng)站，獲取他們需要的信息并做出購(gòu)買決定。借助響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，無(wú)論您的客戶如何聯(lián)系您（例如通過(guò)移動(dòng)網(wǎng)站），我們都可以做到這一點(diǎn)。

移動(dòng)響應(yīng)對(duì) SEO 很重要的 8 個(gè)原因

讓我們來(lái)談?wù)勀臄?shù)字營(yíng)銷策略——您正在做的工作，以優(yōu)化您的網(wǎng)站，通過(guò)搜索引擎吸引客戶。搜索引擎優(yōu)化對(duì)于建立您的商業(yè)品牌、吸引客戶和留住回頭客至關(guān)重要。要出現(xiàn)在 Google 搜索中，您必須針對(duì)搜索引擎優(yōu)化您的網(wǎng)站。像 Google 這樣的搜索引擎將響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)視為排名因素，這意味著如果您的網(wǎng)站可用性較低或缺乏可用性，Google 不會(huì)在搜索引擎結(jié)果頁(yè)面 (SERP) 上給您較高的排名。

以下是移動(dòng)響應(yīng)能力對(duì)于 SEO 至關(guān)重要的八個(gè)原因。

1. 搜索引擎更喜歡響應(yīng)式網(wǎng)站

關(guān)注搜索引擎的喜好對(duì)于您在網(wǎng)上取得成功至關(guān)重要。百度、Google 顯然更青睞適合移動(dòng)設(shè)備的網(wǎng)站，因?yàn)樗鼈兊呐琶哂跊](méi)有響應(yīng)式框架的網(wǎng)站。因此，響應(yīng)式網(wǎng)站的目標(biāo)是吸引觀眾和搜索引擎。當(dāng)前，所有的主流搜索引擎（百度、bing、Google）的排名原則都是移動(dòng)優(yōu)先。

移動(dòng)用戶占該平臺(tái)上搜索的很大一部分。無(wú)響應(yīng)的網(wǎng)站通常速度較慢、難以使用且跳出率較高，這意味著使用手機(jī)的搜索者通常會(huì)點(diǎn)擊后退按鈕并嘗試其他網(wǎng)站。百度、Google 根據(jù)頁(yè)面速度和用戶在網(wǎng)站上的行為對(duì)網(wǎng)站進(jìn)行排名。如果您的網(wǎng)站不易于使用，百度不會(huì)對(duì)其進(jìn)行很好的排名。

由于消費(fèi)者傾向于信任排名較高的公司，因此通過(guò)響應(yīng)迅速的網(wǎng)站吸引移動(dòng)用戶（這些網(wǎng)站在在線搜索結(jié)果中更顯眼）應(yīng)成為優(yōu)先事項(xiàng)。讓潛在客戶無(wú)論身在何處或使用何種設(shè)備都能訪問(wèn)您的網(wǎng)站，這將贏得他們的青睞……以及他們的錢包。

2. 大部分在線流量來(lái)自手機(jī)

大多數(shù)消費(fèi)者通過(guò)移動(dòng)設(shè)備上網(wǎng)，因此，一個(gè)適合移動(dòng)設(shè)備的網(wǎng)站必不可少。事實(shí)上，美國(guó)71% 的數(shù)字時(shí)間都來(lái)自移動(dòng)設(shè)備。消費(fèi)者每周花在智能手機(jī)上進(jìn)行研??究的時(shí)間超過(guò)15 小時(shí)，48% 的消費(fèi)者從搜索引擎開(kāi)始研究。這就是為什么搜索引擎在確定搜索結(jié)果排名時(shí)會(huì)高度考慮移動(dòng)響應(yīng)能力的原因。

擁有一個(gè)移動(dòng)響應(yīng)式網(wǎng)站可以大大提升您在搜索引擎中的排名，但這也是每個(gè)企業(yè)都需要的，以保持與潛在客戶的相關(guān)性和實(shí)用性。

如果網(wǎng)站在用戶嘗試使用時(shí)跳來(lái)跳去，或者在不同設(shè)備上導(dǎo)航不方便，用戶體驗(yàn)就會(huì)很差，這令人沮喪。當(dāng)網(wǎng)站不響應(yīng)移動(dòng)設(shè)備時(shí)，用戶可能會(huì)轉(zhuǎn)到您競(jìng)爭(zhēng)對(duì)手的移動(dòng)友好型網(wǎng)站，從而增加您的跳出率。

想象一下，人們?cè)L問(wèn)您的網(wǎng)站，知道您有他們需要的東西，但您的移動(dòng)網(wǎng)頁(yè)很難使用，他們就會(huì)離開(kāi)。

大多數(shù)網(wǎng)站模板都設(shè)計(jì)為移動(dòng)響應(yīng)式；如果您不從這種類型的模板開(kāi)始，您將很難進(jìn)行必要的調(diào)整以優(yōu)化您的網(wǎng)站以適應(yīng)移動(dòng)設(shè)備。請(qǐng)記住，使用移動(dòng)響應(yīng)式模板構(gòu)建的網(wǎng)站可能仍需要添加少量CSS以在某些屏幕尺寸上隱藏或顯示元素。

使用Google 的移動(dòng)友好度測(cè)試確保您的網(wǎng)站在移動(dòng)設(shè)備上正確顯示。如果您的網(wǎng)站是比較古老的網(wǎng)站，沒(méi)有更新，那么是時(shí)候建立一個(gè)移動(dòng)響應(yīng)式網(wǎng)站了。

3. 降低跳出率

你知道人們?cè)趺丛u(píng)價(jià)千禧一代的：他們沒(méi)有耐心。不管這是否屬實(shí)，如果您的網(wǎng)站需要幾秒鐘才能加載，他們就會(huì)離開(kāi)，轉(zhuǎn)而選擇速度更快的競(jìng)爭(zhēng)對(duì)手的網(wǎng)站。這對(duì)老一代和年輕一代來(lái)說(shuō)也是如此。

如果公司沒(méi)有提供適合移動(dòng)設(shè)備且直觀的網(wǎng)站，人們很容易就會(huì)感到失望。您有多少次訪問(wèn)某個(gè)網(wǎng)站時(shí)，不得不捏合和放大內(nèi)容才能閱讀？您在網(wǎng)站上停留的時(shí)間長(zhǎng)嗎？可能不會(huì)。

可訪問(wèn)性是關(guān)鍵。您的網(wǎng)站訪問(wèn)者希望能夠點(diǎn)擊您的電話號(hào)碼撥打電話，點(diǎn)擊您的地址獲取前往您營(yíng)業(yè)地點(diǎn)的 GPS 路線。在我們這個(gè)技術(shù)驅(qū)動(dòng)的社會(huì)中，使用糟糕的設(shè)計(jì)會(huì)迅速削弱您網(wǎng)站的潛力。

缺乏響應(yīng)能力的網(wǎng)站也意味著您的企業(yè)不關(guān)心保持最新?tīng)顟B(tài)，從而給潛在客戶留下持久的負(fù)面印象。加載時(shí)間長(zhǎng)、功能差、JavaScript等功能不起作用或圖像太大而無(wú)法看清頁(yè)面上的文字的網(wǎng)頁(yè)會(huì)立即失去網(wǎng)站流量。

移動(dòng)端本身就是一種體驗(yàn)，毫無(wú)疑問(wèn)，它改變了人們的購(gòu)買決策方式。通過(guò)站在消費(fèi)者的角度，您可以了解過(guò)時(shí)的網(wǎng)站如何損害他們的在線體驗(yàn)，并最終導(dǎo)致流量減少。

隨著世界繼續(xù)“移動(dòng)化”，消費(fèi)者能夠隨時(shí)在任何設(shè)備上訪問(wèn)您的網(wǎng)站至關(guān)重要。如果您的網(wǎng)站可供使用各種設(shè)備的用戶即時(shí)訪問(wèn)，那么當(dāng)客戶在線與您的品牌互動(dòng)時(shí)，您將保持較低的跳出率和較高的客戶滿意度。

4.搜索引擎懲罰重復(fù)內(nèi)容

現(xiàn)在，這可能有點(diǎn)誤導(dǎo)。如果您一直在嘗試提高網(wǎng)站性能并涉足 SEO，您可能聽(tīng)說(shuō)過(guò) Google 會(huì)因重復(fù)內(nèi)容而對(duì)您進(jìn)行懲罰。這不一定是真的。Google 不會(huì)到處禁止在博客文章中包含類似信息的律師事務(wù)所網(wǎng)站。但是，Google 的抓取工具處理此問(wèn)題的方式有些微妙。

在響應(yīng)式設(shè)計(jì)出現(xiàn)之前，許多網(wǎng)站都允許用戶選擇點(diǎn)擊桌面版或移動(dòng)版，但點(diǎn)擊后會(huì)鏈接到不同的 URL。這意味著有兩個(gè)網(wǎng)站包含相同的內(nèi)容，但 URL 不同。重定向到兩個(gè)網(wǎng)站之一通常會(huì)讓用戶感到困惑。

如果整個(gè)網(wǎng)站上的內(nèi)容重復(fù)，Google 不會(huì)懲罰該網(wǎng)站，而是必須選擇對(duì)哪些內(nèi)容進(jìn)行排名，而且它通常會(huì)對(duì)網(wǎng)頁(yè)進(jìn)行錯(cuò)誤排名。更重要的是，如果 Google 將人們從桌面引導(dǎo)到您的移動(dòng)網(wǎng)站或反之亦然，這可能會(huì)造成用戶體驗(yàn)問(wèn)題。

從SEO角度來(lái)看，最好開(kāi)發(fā)一個(gè)響應(yīng)式網(wǎng)站，而不是將瀏覽者引導(dǎo)到移動(dòng)版網(wǎng)站的單獨(dú) URL。響應(yīng)式設(shè)計(jì)消除了同一網(wǎng)站需要兩個(gè)版本的需要。由于響應(yīng)式網(wǎng)站只使用一個(gè) URL，因此可以輕松地針對(duì)搜索引擎優(yōu)化網(wǎng)站，并且Google 機(jī)器人可以更輕松地抓取和索引其內(nèi)容。

5. 移動(dòng)網(wǎng)站加載速度更快，提升用戶體驗(yàn)

大多數(shù)搜索者都會(huì)時(shí)不時(shí)地遇到網(wǎng)站加載緩慢的情況。您實(shí)際上在一個(gè)網(wǎng)站上停留了多長(zhǎng)時(shí)間，才會(huì)感到沮喪，然后回到搜索結(jié)果嘗試另一個(gè)頁(yè)面？頁(yè)面速度對(duì)用戶體驗(yàn)的影響如此之大，以至于 Google 更新了其排名因素，將網(wǎng)頁(yè)加載速度納入其中。Google 將移動(dòng)網(wǎng)站速度作為移動(dòng)搜索的組成部分。

在努力使網(wǎng)站更適合 SEO時(shí)，您必須考慮更快加載的影響。即使您不將排名視為一個(gè)因素，當(dāng)人們因?yàn)榧虞d速度更快而停留在網(wǎng)站上的時(shí)間更長(zhǎng)時(shí)，您可能會(huì)看到轉(zhuǎn)化率的大幅提高。無(wú)法加載的移動(dòng)頁(yè)面不會(huì)讓人們停留很長(zhǎng)時(shí)間。

6. 增加社交分享

社交媒體在移動(dòng)友好設(shè)計(jì)中起著怎樣的作用？當(dāng)人們使用社交媒體應(yīng)用時(shí)，他們會(huì)在手機(jī)上大量使用它們。每個(gè)帖子上的分享按鈕對(duì)于打造您的品牌和影響力至關(guān)重要。

人們只會(huì)通過(guò)微信分享他們喜歡的內(nèi)容。響應(yīng)式設(shè)計(jì)讓瀏覽者更容易與您的網(wǎng)站互動(dòng)并從中受益。他們甚至可能將其分享到他們的社交網(wǎng)絡(luò)上，從而擴(kuò)大您的覆蓋范圍。

社交分享不會(huì)直接影響您的移動(dòng) SEO 工作，因?yàn)樗鼈儾粫?huì)影響直接排名。但是，Google 會(huì)將更多人引導(dǎo)到流量更大的網(wǎng)站，這可能意味著由于知名度的提高，會(huì)有更多的客戶。響應(yīng)式設(shè)計(jì)和SEO確實(shí)相互支持。

7. 讓建立反向鏈接變得更容易

如果您的網(wǎng)站和移動(dòng)網(wǎng)站位于兩個(gè)不同的鏈接上，反向鏈接就會(huì)成為問(wèn)題。反向鏈接是其他網(wǎng)站上的鏈接，用于將人們引導(dǎo)到您的網(wǎng)站。它們是穩(wěn)固的SEO排名的核心組成部分，并在搜索引擎使用的排名指標(biāo)中發(fā)揮作用。

如果您的網(wǎng)站有兩個(gè)不同版本，SEO 專業(yè)人員將更難建立反向鏈接，這會(huì)不必要地限制您的策略。營(yíng)銷人員將反向鏈接作為每個(gè)網(wǎng)站的SEO 策略的一部分，但大多數(shù)人不會(huì)費(fèi)心使用兩個(gè)單獨(dú)的 URL。只有一個(gè)網(wǎng)站既靈活又通用，而且有效。

8. 它提高了對(duì)話率

任何網(wǎng)站的最終好處都是將網(wǎng)站流量轉(zhuǎn)化為利潤(rùn)?？纯碐oogle Analytics。您是否注意到桌面用戶的轉(zhuǎn)化率高于移動(dòng)用戶？如果是這樣，您的移動(dòng)設(shè)計(jì)可能存在缺陷，并且會(huì)讓您損失金錢。當(dāng)您轉(zhuǎn)向響應(yīng)式網(wǎng)站設(shè)計(jì)時(shí)，您會(huì)獲得更好的用戶體驗(yàn)，從而轉(zhuǎn)化為更多的轉(zhuǎn)化。對(duì)大多數(shù)公司來(lái)說(shuō)，重新設(shè)計(jì)更具適應(yīng)性的網(wǎng)站是一項(xiàng)巨大的投資。

采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)登上搜索引擎頂部

盡管搜索引擎的變化需要不斷監(jiān)控您的SEO 策略，但維護(hù)一個(gè)移動(dòng)響應(yīng)的網(wǎng)站將始終有助于讓您的網(wǎng)站保持在結(jié)果頁(yè)面的頂部。

您是否厭倦了搜索您的業(yè)務(wù)并看到競(jìng)爭(zhēng)對(duì)手？磐龍升的 網(wǎng)站開(kāi)發(fā)專家可以幫助您的網(wǎng)站成為相關(guān)搜索詞的焦點(diǎn)。通過(guò)精美的網(wǎng)站展示您的專業(yè)知識(shí)。