在您創建的每個網站上遵循的移動友好清單

創建一個在移動設備上運行良好的網站並不容易，但可以做到。 只要您在發貨前徹底檢查您的網站，移動用戶就沒有理由不應該擁有出色的體驗。 但是，您可能想知道哪些元素最需要您注意。

在本文中，我們將為您提供一份簡單的清單，其中包含您的網站應滿足的七個標準。 如果是這樣，您的用戶可能會擁有出色的移動體驗，如果不是，我們會告訴您如何扭轉局面。 讓我們從第一點開始！

擁有適合移動設備的網站的重要性

如今，擁有一個適合移動設備的網站比以往任何時候都更加重要。

“移動友好”這個詞聽起來有點含糊。 簡而言之，如果您可以輕鬆地使用其內容並使用任何類型的移動設備與其交互，則可以認為該網站適合移動設備。

您可能知道，移動瀏覽正在興起，這意味著很多人將它們用作瀏覽網絡的主要方式。 如果您的網站不易於使用，用戶可能會尋求替代方案。 幸運的是，有幾種方法可以測試您的網站是否適合移動設備。 例如，Google 提供了一個測試，任何網站都可以通過粘貼其 URL 來使用該測試：

但請記住，沒有任何自動化測試是完美的——因此您還需要運用一些常識。 為此，這裡有一些技巧可以幫助您確保您的網站對移動用戶盡可能友好。

在您創建的每個網站上遵循的 7 步移動友好清單

鑑於移動流量的重要性，您構建的每個網站從一開始就適合移動設備，這一點至關重要。 該清單將幫助您確保每一步都符合要求。 讓我們來看看！

1. 以多種分辨率測試您的網站

使用正確的工具可以輕鬆地以多種分辨率測試您的網站。

對於移動網站，最重要的事情之一是您的網站看起來不像是從桌面版本縮小的。 這意味著您的每一個元素在多種分辨率下都應該看起來不錯。

另一方面，如果您的元素在移動設備上看起來都不好看，則可能會對您的跳出率產生負面影響。 明智的做法是事先以多種分辨率測試您的網站，看看是否出現任何問題。

幸運的是，這個過程並不像聽起來那麼複雜，而且你不需要擁有多個設備來完成。 有很多服務可以讓您快速測試不同分辨率下的任何網站，例如：

• Chrome 開發工具：這個內置的 Chrome 瀏覽器功能包括一個設備工具欄，您可以使用它以多種分辨率測試您的網站。
• Screenfly 和 BrowserStack 等服務：這些第三方服務使您能夠以更廣泛的分辨率測試您的網站。

我們提到的所有工具都是免費的，所以預算應該不是問題，沒有理由跳過這一步！

2. 確保您的菜單和導航在較小的屏幕上顯示良好

確保您的菜單在移動設備上顯示良好對於保持您的網站可用很重要。

在大多數情況下，菜單是人們瀏覽您網站的主要方式。 如果您的鏈接在較小的分辨率下難以點擊或閱讀，則會影響可用性。 此外，您還希望確保所有菜單項都可以輕鬆訪問，而不管用於瀏覽的設備如何。

考慮到這一點，讓我們通過幾個步驟來確保您在測試移動菜單時不會錯過任何內容：

1. 檢查所有菜單元素是否可見。 如果不能確定他們是否可以通過滾動到達。
2. 確保每個鏈接都對齊，並且子菜單是嵌套的。
3. 仔細檢查您是否可以閱讀每個菜單項以及單擊它。

大多數現代 WordPress 主題（例如 Divi）都會自動為您創建響應式菜單。 如果您在網站的這方面遇到問題，可能值得考慮更新到新主題。

3.檢查您的圖像在較小的分辨率下是否好看

無論分辨率如何，您網站的圖像都應該看起來同樣令人驚嘆。

圖像是任何網站的關鍵組成部分，但有時您的圖形在較低的分辨率下可能看起來不是最好的。 例如，如果有人通過移動設備訪問您的網站時您的徽標不可讀，這顯然會影響您的品牌。

在大多數情況下，人們更擔心“扭曲”他們的圖像，但縮小圖像也可能是一個問題。 並非每張圖像都可以調整為在每種分辨率下看起來都很完美，但您可以採取措施減少問題：

1. 將您的精力集中在對您的品牌很重要的圖像上。
2. 尋找流行圖像類型的可擴展替代品，例如 SVG。
3. 只要有可能，請選擇裁剪得更好的圖像，這樣它們在較小的尺寸下看起來會更好。

只要您牢記這些提示，就可以順利進行。 請記住，當涉及非常複雜的圖像（例如信息圖表）時，可能無法將它們完全適應低分辨率。

4. 測試您的內容的可讀性

小屏幕會影響可讀性，但很容易適應它們。

對移動設備可用性影響最大的一方面是可讀性。 當您使用較小的外形尺寸時，您需要通過確保您的文本仍然以可讀的大小顯示而不是簡單地縮小來進行補償。 這裡的目標很簡單——您的用戶不應該在您的網站上進行縮放和捏合操作。 畢竟，對於一個惱怒的訪客來說，這是一個完美的食譜。

幸運的是，可讀性是一個相對容易解決的方面：

• 為您的內容正文選擇一種高度可讀的基本字體。
• 盡可能使用副標題將您的內容分解為易於瀏覽的部分。
• 選擇一個可以讓您更好地控製文本顯示方式的主題。

關於我們的最後一點，許多現代主題應該為您提供您正在尋找的控件。 例如，Divi 使您可以微調桌面和移動設備的任何模塊文本的大小。

5. 確保您網站的元素易於交互

使用手指與元素交互可能很棘手，因此您必須調整設計。

這一步可能涉及很多方面，但請耐心等待。 到目前為止，我們已經介紹了讓您的菜單易於使用的重要性，但您網站的其他交互式元素也是如此。 按鈕、鏈接、表單等等——它們都需要在移動設備上保持可用。

當然，這裡的關鍵考慮因素是尺寸。 當我們降低分辨率時，我們討論過的大多數元素也會縮小。 您的工作是測試它們是否太難交互，因為這會影響您網站的可用性。

至於怎麼做，我們這裡推薦使用真實的移動設備，而不是我們之前提到的服務。 畢竟，您需要知道您的元素是否易於用手指而不是鼠標使用。 以下是您需要注意的事項：

• 確保您的號召性用語 (CTA)、表單和菜單項易於點擊。
• 檢查關鍵元素之間是否存在重疊，這可能會導致用戶點擊錯誤的元素。

一旦您知道哪些元素給您帶來了麻煩，只需根據需要調整它們的大小即可。 如果您使用的是 Divi 等主題，則可以從每個模塊的設置屏幕執行此操作。

6. 確保你沒有過度依賴彈出窗口

彈出窗口可能很有效，但它們也會影響您網站的可用性。

選擇在彈出窗口和轉換等通常會導致非常顯著上升。 然而，他們也傾向於惹惱至少與他們轉換的人一樣多。

如果您使用侵入性移動彈出窗口，很難準確確定您嚇跑了多少人，但我們可以告訴您，某些搜索引擎（例如 Google）會因此而懲罰您。 如果您使用任何隱藏您的主要內容的彈出窗口或強迫用戶在訪問之前先瀏覽它們，您的搜索引擎優化 (SEO) 將因此受到影響。

我們知道彈出窗口很有用，但也有較少侵入性的替代方案，例如：

• 時尚的選擇加入表格。
• 優化的 CTA。

這算不上是開創性的，但從長遠來看，優化您的表單和 CTA 可以為您帶來更大的回報，因為您會疏遠更少的用戶。 此外，您的搜索引擎排名也不會受到影響。

7. 測試您網站的加載時間

如果您的網站在不到一秒的時間內加載完畢，您會對結果感到非常滿意。

如果您是 Elegant Themes 的常客，您就會知道我們總是盡可能地強調性能。 快速加載的網站並不是很多人會注意到的，但當相反的情況發生時，他們肯定會注意到。

高加載時間通常會導致跳出率增加，並使您的網站可用性降低。 此外，它們對移動用戶尤其重要，因為他們中的一些人可能會使用不太理想的連接來瀏覽您的網站。

優化您的 WordPress 網站是一個可能需要整篇文章的主題，但這裡有一些快速提示：

• 如果可能，請嘗試針對移動設備優化的主題，例如 Divi。
• 優化您的圖像，使其占用更少的空間。
• 為您的網站實施緩存解決方案。

這些都是可靠的步驟，但它們並不是您可以保持低加載時間的全部。 有關更多信息，請查看我們不久前發布的有關如何優化 WordPress 設置的完整文章。

結論

確保您的網站對移動設備友好比以往任何時候都更加重要。 如果當前趨勢保持不變，您將在未來幾年看到大部分流量來自移動來源（如果還沒有）。 您現在可以做的最明智的事情是在桌面和移動設備上提供同樣豐富的體驗。

如果您不確定您的網站是否適合移動設備，這裡有一個簡單的清單，可幫助您找出答案：

1. 以多種分辨率測試您的網站。
2. 確保您的菜單和導航在較小的設備上顯示良好。
3. 檢查您的圖像在較低分辨率下是否看起來不錯。
4. 測試您的內容的可讀性。
5. 確保您網站的元素易於交互。
6. 確保您沒有過度依賴彈出窗口。
7. 測試您網站的加載時間。

您對如何確保您的網站適合移動設備有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！

32 像素/shutterstock.com 的文章縮略圖。