在網頁設計中，建立出色的響應式或自適應網站的訣竅是關注您網站的各個元素，并考慮網站更改可能如何影響它們。

在規劃適合行動裝置的設計時，嘗試專注于包含或優化這些主要組件：

1. 標題內容

標題可以告訴訪問者很多關于網站的訊息：

品牌是什么

它提供什么

采取哪些行動

如何搜尋所有內容

桌面布局有足夠的空間在其網站標題上顯示所有這些訊息。在行動裝置上則更少——您的響應式或自適應設計需要考慮到這一點。

問問自己哪些元素應該在您的行動網站導航中可見。例如，一個標志應該在那里培養強大和一致的品牌標識。其他常見項目包括導航菜單，或者如果您正在構建電子商務網站，包括購物車圖標。

2. 文字易讀性

網站文本可能是一個難以處理的元素：您希望它看起來不錯并反映您的品牌風格，但您必須確保您的設計選擇不會影響易讀性。

在針對不同設備進行設計時，您還必須考慮尺寸和樣式可能不會隨著螢幕尺寸的上下移動而縮放。不用說，在啟動網站之前測試這一點很重要。

3.漢堡圖標

導航對于每個網站都起著至關重要的作用，因此考慮用戶如何根據他們的設備進行不同的互動非常重要。對于初學者，請考慮使用漢堡菜單。

漢堡菜單是指通常位于網站右上角或左上角的三行圖標。在這一點上，大多數人都知道那些堆疊的水平線是做什么的，并且是瀏覽行動網頁設計的值得信賴的選擇。

4.導航放置

行動應用程式的日益普及影響了網站所有者構建行動導航的方式。我們比以往任何時候都看到設計超出了我們已經推薦的漢堡菜單。

對于一組較小的頂級導航連結（不超過三個或四個），一些品牌會考慮將它們作為粘性水平菜單添加到螢幕底部，或在網站標題中。另一種流行的導航方法是使用燈箱建立全螢幕彈出菜單。

5. 粘性標題

在自適應設計中，您可以使您的行動頁面相對較短。然而，在響應式設計中，除非另有修改，否則所有桌面內容都會流入行動網頁。

如果您盡了最大的努力，您的移動網頁仍然運行很長時間，請考慮將頁首設置為粘性。這樣，用戶可以隨時訪問您的導航。

6.視覺層次

網站的視覺層次是指訪問者的眼睛在頁面上所遵循的路徑。雜亂的網站布局使訪問者很難知道要關注哪些細節或下一步該去哪里，尤其是在行動網站上。

您可以向網頁添加標題和子標題、圖像塊、空白、導航工具等，以便：

分解大量內容和復雜的主題

為頁面上的訊息建立架構

確保您有一個平衡良好的設計

建立不同部分之間的關系

當您繪制每個版本的視覺細節時，您可以在自適應設計中考慮這一點。在響應式設計中，您必須小心，因為隨著螢幕縮小，元素可能會調整大小或重新設置樣式。

最好的辦法是為桌上型電腦、平板電腦和行動裝置設置全局樣式 - 確保響應式重組過程不會干擾您內容的完整性。

7.頁長

關于您網站內容的最后一個問題是它的長度。手頭的導航可能會使長頁面更容易在行動裝置上滾動瀏覽——但在手機上瀏覽時，更少的滾動也會有所幫助。

通過自適應設計，您可以刪除行動布局上的文本或圖像部分。這樣，您可以允許在桌面上閱讀更多內容，同時保持行動版本的可讀性。

8. 圖像

網站圖像在設計、品牌推廣、講故事和銷售方面是非常有用的工具。在響應式和自適應設計中，請注意這些圖像對頁面性能的影響。雖然圖像的重量對于自適應網站來說往往不是問題，但只使用您需要的圖像仍然是一個好主意，這樣它們就不會減慢您的頁面速度。

9. 嵌入內容

使用嵌入式社群媒體小部件、影片或橫幅廣告等外部內容并不少見。在自適應設計中，您可以將這些外部元素放置在它們出現的容器的邊界內。在響應式設計中，您應該確保自定義嵌入原始碼以使其在容器的范圍內。

10. 互動

互動設計元素應該是：

易于識別為交互式

在頁面上可以找到

互動無誤

考慮訪問者期望與您的網站進行的各種微互動，這些交互的方式可能會有所不同。例如，假設您已將電話號碼放在您的網站標題中。桌面用戶可能會將其撥入手機。另一方面，行動用戶希望點擊通話。

平臺之間的互動手勢或設計繼續存在差異。例如，一個圖像滑塊對于所有用戶來說可能看起來都一樣。但是，只有移動訪問者可以點擊以向左或向右滑動滑塊。桌面訪問者將使用滑鼠。

因此，無論您選擇使用響應式網頁設計還是自適應網頁設計，都不要只關注如何在不同平臺上重新定位、調整大小或表示您的內容。還要考慮上下文如何影響內容互動。