全球近49%的網(wǎng)絡(luò)流量來(lái)自移動(dòng)設(shè)備（不包括平板電腦）。如果你不設(shè)計(jì)適合移動(dòng)設(shè)備的網(wǎng)站，你可能會(huì)失去大量的目標(biāo)用戶(hù)。此外，如果你希望提高你的搜索引擎優(yōu)化，你不能忽視智能手機(jī)；百度優(yōu)先使用移動(dòng)優(yōu)先索引。

所有這些都需要響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)，通過(guò)這種設(shè)計(jì)，您的網(wǎng)站的元素可以根據(jù)屏幕尺寸進(jìn)行調(diào)整。在創(chuàng)建響應(yīng)式設(shè)計(jì)時(shí)，您可能會(huì)犯一些常見(jiàn)的錯(cuò)誤。為了幫助您避免這些問(wèn)題，我們?cè)谙旅媪谐隽艘恍┛赡艿捻憫?yīng)式設(shè)計(jì)陷阱及其解決方案。

1、使用設(shè)備大小作為斷點(diǎn)

根據(jù)OpenSignal的數(shù)據(jù)，2015年有超過(guò)24000種不同的AndROId設(shè)備；這個(gè)數(shù)字在過(guò)去五年中有所增加。由于有這么多種類(lèi)的設(shè)備，屏幕尺寸也有很大的不同。為了確保您的網(wǎng)站在所有設(shè)備上提供無(wú)縫的瀏覽體驗(yàn)，您需要正確設(shè)置斷點(diǎn)。

如果您在響應(yīng)式設(shè)計(jì)中只關(guān)注設(shè)備大小的斷點(diǎn)，則您的網(wǎng)站可能無(wú)法在新設(shè)備上正確顯示。不要將自己限制在當(dāng)前斷點(diǎn)設(shè)備的維度上。相反，選擇真正的響應(yīng)式設(shè)計(jì)，可以在任何大小的屏幕上調(diào)整。

一個(gè)很好的想法是采用移動(dòng)優(yōu)先的方法，即您為最小的屏幕構(gòu)建網(wǎng)站，然后慢慢地將其擴(kuò)展到更大的屏幕。如果可穿戴設(shè)備對(duì)你的網(wǎng)站很重要，你應(yīng)該從這些設(shè)備開(kāi)始設(shè)計(jì)。

隨著規(guī)模的擴(kuò)大，您的網(wǎng)站設(shè)計(jì)可能會(huì)開(kāi)始感到緊張。在這種情況下，可以向其中添加媒體查詢(xún)，以便進(jìn)行必要的更改。這將幫助你的設(shè)計(jì)在每一步都保持舒適。你需要繼續(xù)這個(gè)過(guò)程，直到你達(dá)到最大的屏幕尺寸。理想情況下，這將是2800像素，因?yàn)榇蠖鄶?shù)用戶(hù)的分辨率低于這個(gè)。

使用這種方法，您的斷點(diǎn)只在需要時(shí)才會(huì)被引入，而不是根據(jù)設(shè)備大小。這可以幫助你提供一個(gè)無(wú)縫的瀏覽體驗(yàn)，你的訪客跨所有設(shè)備。你可以使用LambdaTest或BrowserStack等工具來(lái)檢查你的網(wǎng)站在新設(shè)備上的表現(xiàn)是否良好。

2、不考慮文件大小

視覺(jué)元素可以讓你的網(wǎng)站對(duì)用戶(hù)更有吸引力，然而，你必須小心當(dāng)你添加到你的網(wǎng)站。它們通常比文本文件大，會(huì)降低頁(yè)面加載速度。隨著頁(yè)面加載時(shí)間的增加，跳出率也會(huì)增加。事實(shí)上，Akamai表示，在2017年的假期期間，網(wǎng)頁(yè)加載時(shí)間增加了1.5秒，而回彈率增加了6%。

因此，有必要優(yōu)化您的圖像和視頻，以減少其大小。您可以使用TinyPNG或壓縮JPEG等工具來(lái)實(shí)現(xiàn)這一點(diǎn)。如果你是WordPress用戶(hù)，你可以安裝Smush插件來(lái)完成這項(xiàng)工作。

縮小CSS、Html和Javascript文件也會(huì)有所幫助。您還應(yīng)該考慮瀏覽器緩存，它可以提高返回訪問(wèn)者的頁(yè)面加載速度。最后，刪除所有不必要的第三方工具和JavaScript依賴(lài)。要檢查當(dāng)前頁(yè)面加載速度并找到可能的解決方案，可以使用百度PageSpeed Insights。你也可以使用百度的移動(dòng)網(wǎng)站速度工具來(lái)查看你的網(wǎng)站在移動(dòng)設(shè)備上的加載速度。

3、沒(méi)有使用自適應(yīng)圖像管理

雖然圖像的文件大小很重要，但它的尺寸也很重要。你可能不用擔(dān)心在傳統(tǒng)的網(wǎng)站設(shè)計(jì)中使用不同尺寸的圖像。然而，當(dāng)涉及到響應(yīng)式設(shè)計(jì)時(shí)，錯(cuò)過(guò)圖像管理可能會(huì)給您的用戶(hù)體驗(yàn)帶來(lái)災(zāi)難性的后果。你最不希望你的訪客看到的是在小屏幕上顯示的巨大圖像。

為了避免這個(gè)陷阱，您應(yīng)該使用自適應(yīng)圖像管理技術(shù)。你可以采取以下方法來(lái)實(shí)現(xiàn)這一點(diǎn)：

基于分辨率的選擇：提供具有不同分辨率的相同圖像；

基于設(shè)備像素比率的選擇：使圖像看起來(lái)清晰，并根據(jù)屏幕大小減少可感知的人為影響；

基于視圖的選擇：根據(jù)使用的設(shè)備及其方向改變圖像；

藝術(shù)指導(dǎo)：根據(jù)顯示改變或裁剪圖像，以改善其觀看體驗(yàn)。

4、隱藏的內(nèi)容

在創(chuàng)建響應(yīng)式網(wǎng)站設(shè)計(jì)時(shí)，您可能犯的最大錯(cuò)誤之一是隱藏內(nèi)容。您可以這樣做，以適合您的網(wǎng)站在一個(gè)較小的屏幕或增加您的頁(yè)面加載速度。然而，你必須不惜一切代價(jià)避免它。記住，人們?cè)L問(wèn)你的網(wǎng)站不是為了尋找一個(gè)小的樣本。他們想要和在臺(tái)式機(jī)上一樣的瀏覽體驗(yàn)。

你的目標(biāo)應(yīng)該是為他們提供這種全方位的體驗(yàn)。這是必要的，因?yàn)樗麄冎械脑S多人可能在一天內(nèi)從多個(gè)設(shè)備訪問(wèn)您的網(wǎng)站。這就是為什么您必須確保在響應(yīng)式設(shè)計(jì)中保持內(nèi)容的一致性。當(dāng)然，您可以通過(guò)漸進(jìn)增強(qiáng)在不同設(shè)備之間對(duì)內(nèi)容進(jìn)行不同的優(yōu)先級(jí)排序。

5、保持一致的導(dǎo)航

在所有設(shè)備上為訪問(wèn)者提供一致的瀏覽體驗(yàn)是最重要的。然而，絕對(duì)的一致性也不好。在嘗試這樣做時(shí)，您可能犯的最大錯(cuò)誤之一是在所有屏幕大小之間保持一致的導(dǎo)航。

當(dāng)你的屏幕變小時(shí)，一個(gè)一致的導(dǎo)航條可能會(huì)占據(jù)一半的屏幕，并可能完全破壞瀏覽體驗(yàn)。您應(yīng)該考慮使用屏幕大小縮小導(dǎo)航，并可以將其更改為一個(gè)漢堡包菜單。

除了導(dǎo)航之外，按鈕大小和視覺(jué)布局也不應(yīng)該保持一致。然而，字體、鏈接和顏色處理應(yīng)該是一致的。

總結(jié)

如果你想接觸到所有的目標(biāo)受眾，你就不能避免響應(yīng)式設(shè)計(jì)。但是，在實(shí)現(xiàn)它時(shí)必須小心，避免所有可能的錯(cuò)誤。讓你的訪客在所有設(shè)備上都有一致的瀏覽體驗(yàn)，不向他們隱藏任何信息。優(yōu)化您的文件大小，以提高您的頁(yè)面加載速度。此外，使用自適應(yīng)圖像管理技術(shù)來(lái)根據(jù)屏幕大小減少或增加圖像尺寸。

不要讓你的導(dǎo)航保持一致，因?yàn)樗赡軙?huì)破壞瀏覽體驗(yàn)。同樣的規(guī)則也適用于按鈕和視覺(jué)布局。最后，進(jìn)行真正的響應(yīng)式設(shè)計(jì)，不要局限于基于當(dāng)前設(shè)備設(shè)計(jì)斷點(diǎn)。當(dāng)你在設(shè)計(jì)你的網(wǎng)站時(shí)，關(guān)鍵是要以移動(dòng)為先。