你有一個“ 響應網站 ”？ 這是一個網站，其佈局根據訪客的設備和屏幕大小而變化。 響應式網頁設計現在是行業最佳實踐。 它由Google推薦並在遍布Web的數百萬個網站上找到。 然而，有一個簡單的“適合”不同屏幕尺寸的網站和一個真正具有響應能力的網站之間有很大的區別。
我經常會看到公司重新設計他們的網站，並推出新聞稿，讚揚他們新的移動設計的優點。 當我訪問這些網站時，我經常發現的是一種佈局，確實可以根據不同的屏幕進行縮放和變化，但就其響應性而言。 這還不夠。 真正具有響應能力的網站不僅僅是為了適應更小或更大的屏幕而進行縮放。 在這些網站上，您還會發現以下重要特徵。
1.優化性能
沒有人喜歡等待網站加載，並且當有人使用移動設備的連接可能不太理想時，快速加載網站的需求變得更加重要。
那麼如何優化網站的性能？ 如果您將新網站作為重新設計的一部分，那麼您應該在創建性能預算時作為該項目的一部分。 如果您正在使用現有網站，而不是從頭開始，第一步是測試您的網站的性能，以了解您今天的位置。
一旦你的網站站在性能方面的基準點，你就可以開始進行必要的改進以提高下載速度。 一個偉大的地方可能是與您的網站的圖像。 太大的圖片是緩慢加載網站的頭號罪魁禍首，因此，從性能的角度來看， 優化您的圖片以便進行網頁傳輸確實可以幫助您的網站。
現實情況是，提高網站性能和快速下載速度是所有訪問者都會喜歡的好處。 畢竟，從來沒有人抱怨過某個網站“加載速度太快”，但如果一個網站加載時間過長，無論它是否響應地“適合”在他們的屏幕上，它都絕對會讓人走開。
2.智能內容層次結構
當一個網站在大屏幕上顯示時，由於可用的大量屏幕空間，您可以以各種方式放置內容。 您通常可以一次將重要的信息和圖像，新聞更新，活動信息和網站導航全部放在屏幕上。 這使得訪問者能夠輕鬆快速地掃描整個頁面的內容並決定對他們重要的內容。
當您採用該網站設計並將其轉換為小屏幕設備（如手機）時，此場景會發生相當大的變化。 突然之間，你正在使用之前的屏幕房產的一小部分。 這意味著您需要確定網站上首先出現的內容，接下來會出現的內容等等。而不是立即看到所有內容，您可能只有空間顯示一兩件事（其中一種可能是導航）。 這意味著需要製定層次結構的決定。 不幸的是，往往會決定屏幕上的第一個內容，然後是第二個等等，就是頁面本身編碼的方式。 在構建響應式網站時，最簡單的方法是在屏幕上首先顯示代碼中的第一項，然後在代碼中顯示第二項，等等。 不幸的是，在一台設備上可能最重要的可能不是對另一台設備至關重要。 一個真正的響應網站理解，內容的層次結構應該根據不同的情況而改變，並且它應該聰明地顯示它在哪裡顯示。
CSS佈局技術（包括CSS網格佈局，Flexbox等）的改進使網頁設計師和開發人員能夠在智能地佈置內容時獲得更多選擇，而不是受HTML代碼中內容區域的確切順序的束縛。 隨著設備格局和我們網站用戶的需求不斷發展，利用這些新的佈局技術將變得更加重要。
3.考慮設備優勢和劣勢的經驗
堅持設備主題 - 有人可以用來訪問您的網站的每個設備都具有該平台固有的優點和缺點。 一個出色的響應網站了解不同設備的功能和限制，並使用它們創建最適合訪客可能在當時使用的任何設備的定制體驗。
例如，手機包含許多在傳統台式計算機中找不到的功能。 GPS是以移動為中心的功能的一個例子（是的，您也可以在桌面上獲得一般位置信息，但設備GPS更準確）。 您的網站可能會使用GPS信息，根據當時的確切位置，巧妙地向用戶發送非常詳細且具體的逐步方向信息或特殊優惠信息。
在實踐中這個委託人的另一個例子是一個能夠理解你正在使用什麼樣的屏幕顯示的網站，並發送最適合該顯示的圖像。 如果您的屏幕像素密度較高，則可以決定將更高質量的圖像發送到該屏幕。 但是，這些相同的圖像在功能較差的屏幕上毫無意義，而額外的文件大小會因為沒有實際的原因而下載，而額外的質量會丟失。
真正優秀的響應網站會考慮整個用戶體驗，並努力根據其屏幕的設備類型或尺寸以及硬件的其他重要方面來量身定制體驗。
4.內容與上下文
最初，響應式網頁設計因為網站佈局響應不同屏幕尺寸的想法而獲得其名稱，但您可以響應的不僅僅是屏幕尺寸。 基於以前使用設備優缺點的例子，您可以使用這些設備以及日期和時間等其他數據來真正定製網站體驗。
設想一個大型貿易展覽活動的網站。 儘管響應式網站會根據不同的屏幕來改變網站頁面的佈局，但您也可以使用日期來確定顯示哪些內容最重要。 如果是事件發生的時間段，您可能希望突出顯示註冊信息。 但是，如果事件實際發生在那一刻，註冊可能不是最重要的內容。 相反，您可能會認為當天的活動時間表更重要，因為它與用戶的緊急需求更相關。
更進一步，您可以利用設備的全球定位系統來確定它們在貿易展會上的實際位置。 您可以根據他們的位置為他們提供互動內容，向他們展示附近的展位或即將開始的會議。
5.可訪問性
我們將研究網站如何真正滿足訪問者需求的最後一個例子是考慮網站可訪問性 。 網站應該能夠被盡可能多的人使用，包括那些殘疾人。 您的網站應該能夠被需要屏幕閱讀器或其他輔助軟件訪問其內容的人使用。 通過這種方式，您的網站正在響應他們的需求，因為您已確保針對殘疾訪問者的體驗雖然不同，但仍然適用。
通過對盡可能多的數據點進行響應，而不僅僅是屏幕大小，網站可能不僅僅是“移動友好”，它可以在每個短語的意義上成為真正的響應式體驗。