到2020年，全球智能手機用戶數量預計將達到54億，比2019年增長9.3％。
現在有96％的美國人擁有某種類型的手機，其中81％是智能手機。
人們越來越不方便地瀏覽手機上的網絡，而不是坐在臺式機或筆記本電腦上，并且有數據在備份。
在2019年第三季度，移動設備（不包括平板電腦）產生了全球網站流量的51.5％。這是巨大的。
我們大多數人已經在對網站進行移動優化，但這并不一定意味著您所擁有的能夠滿足用戶的需求。
為確保您的網站符合標準，以下是七個必不可少的響應式設計良好實踐，這些優秀實踐將幫助您確保您的網站在2020年為所有設備提供良好的體驗！
1.最小化和優先
受尺寸限制，移動設備在內容和圖像方面根本無法提供最多的支持。
當您想到桌面網站頁面時，自然會希望將我們需要顯示的信息分解為“小節”。將這些部分視為新聞文章中的段落。這樣，您就可以輕松分解并閱讀頁面的各個部分，而不會引起混亂。
以Slack為例，我概述了他們主頁的不同部分，以說明其外觀。
這些部分的確使內容在桌面設備上顯得井井有條，但是在移動設備上，您需要確保以不會過度增加頁面長度的方式重新組織這些部分。
如果您的小塊彼此相鄰，例如Wistia的主頁下方，則可以將四個塊堆疊在一起。
資料來源：Wista
這種技術適用于像這樣的交互性較小或詳細的部分。但是，如果此部分有15個塊，或者僅在您懸停時發生特定的交互作用，該怎么辦？
如果您嘗試像上一個示例一樣按比例縮小頁面，則頁面將明顯更長，并且那些“懸?！毙Ч麑⒉辉倨鹱饔茫ㄒ驗槟赐耆褂檬髽嗽谑謾C上導航）。
正是這種情況促使人們以移動優先的思維方式訪問他們的網站。這意味著您將移動用戶的需求放在首位。
您不是要創建桌面網站，也不是要刪除使網站在移動設備上不那么直觀的功能。您首先要確定優秀的移動體驗，然后將其調整為桌面布局，以便在桌面上布局，因為您在空間方面具有優勢，因此可以確定是否要增強體驗。
盡管這是理想的方案，但是您可能無法進行完整的網站重新設計并遵循這種方法。同時，請嘗試通過優化桌面到移動設備的形式來提供良好體驗。
查看一些重要或效果好的頁面-可以是您的主頁，服務頁面或產品頁面。然后，比較它們在移動設備和臺式機上的性能（使用Google Analytics（分析）之類的工具）；查看頁面上的時間，用于滾動和點擊的熱圖，轉換率等。這將有助于提供一些基準數據，以說明它們當前的表現。然后，花一些時間查看您選擇的頁面，然后嘗試回答“是”或“否”，以幫助評估是否需要一點TLC：
- 某些部分占用的空間是臺式機的四倍多嗎？
- 某些互動在移動設備上無法像在臺式機上那樣有效嗎？
- 字體大小難于在手機上閱讀嗎？你發現自己斜眼了嗎？
- 根據您的熱圖，與臺式機相比，用戶是否滾動相同或相似的距離？
- 用戶是否被卡在某個地方，導致他們的頁面停留時間大大減少了？
一旦確定了問題區域，就可以開始提出解決方案。您應該隱藏某些部分嗎？是否需要縮短部分以更好地適合移動屏幕？您還可以通過其他方式安排版面，使它們仍然實現相同的目標嗎？
要集體討論特定的解決方案，請與您的設計師一起研究這些問題，以幫助您正確地調整網站的移動布局。
一旦確定了需要做什么，就可以在網站上一些受歡迎的部分中開發這些解決方案。這使您有機會測試它們是否改善了您的指標。
一旦感到有足夠的數據，就可以在站點的盡可能多的區域中實施這些解決方案。
誰做得很好：ESPN
由于ESPN是體育新聞網站，因此該網站在首頁上會提供大量信息。
在臺式機網站上，可以進行這種修飾，但在移動網站上則沒有那么多。
在移動設備（上方，右側）上，您會注意到*眼看到的是桌面中心部分?，F在，主標題下方的四個視頻是滑塊的一部分，而不是彼此疊加。
那些到站點其他部分的“快速鏈接”位于左列，不再可見。他們選擇合并某些部分以使頁面更短。
向下滾動時，您會注意到它們開始根據用戶可能想要的內容以更特定的順序排列信息。例如，在視頻下方，他們會插入熱門新聞列表，而不是直接進入較大的特色文章區域。
這樣的策略將幫助您策略性地組織移動層次結構，從而首先為用戶提供有價值的信息。
2.輕松找到程序底部的號召性用語（CTA）
您的企業網站可能具有您希望用戶完成的特定主要號召性用語。也許是購買軟件，安排咨詢或注冊您的應用程序。
為了促使人們完成此目標，您可能在導航中以及整個網站（尤其是臺式機）中都有一個主要的號召性用語。
如果要跟蹤CTAs，您可能會注意到導航按鈕是人們將其轉換到將轉換的網關頁面的主要方法之一。因此，自然而然地，始終保持該按鈕很關鍵。
人們忽視的機會之一就是確保其主要的號召性用語清晰易讀。讓我們以Brightedge為例。
Brightedge擁有一個非常出色的網站，可以非常清楚地闡明其產品的功能以及為用戶提供的價值。不過，在仔細檢查他們在移動設備上的網站時，請注意導航中不再有大型的“請求演示” CTA。
建議您謹慎刪除移動設備上的導航CTA。這樣做自然會使您的移動訪問者更難找到該頁面。
我建議在移動設備上保持一致并為其騰出空間。如果您*不能這樣做，則至少應嘗試使該按鈕進入漢堡導航，并使其在屏幕上盡可能可見而不需要滾動。
這樣，該按鈕仍然是您網站上經常訪問的區域。
誰做得很好：Salesforce
Salesforce在所有設備的導航欄中保留其“免費試用”按鈕，但僅更改其位置和顏色。
他們還在屏幕底部有兩個附加的CTA，可以打電話給他們或與他們聊天。
但是，如果您是一家不需要“聊天”和“致電” CTA的企業，但需要一種方法來推廣您網站的主要CTA（因為您無法將其放入導航區域），則可以實施類似的底部欄布局，您可以在其中放置該主要CTA。
對于CTA的互動，我還必須給Salesforce獎勵積分。表單不會將訪問者帶到帶有表單的單獨頁面（在桌面上也是如此），而是從移動設備屏幕的右側滑出，類似于問候欄，從而將訪問者留在頁面上。
這是有好處的，因為用戶不會被迫等待加載一個完全獨立的頁面，而在移動設備上，由于帶寬或互聯網速度，這可能會帶來問題。它只是幫助用戶更快地完成所需的操作。
3.使用可縮放矢量圖形（SVG）
SVG或可伸縮矢量圖形是任何利用插圖或圖標的響應式設計的必備條件。與圖像文件（JPG / PNG）不同，SVG可以無限擴展。
您可以放心地知道任何圖標或圖形在所有體驗中都將保持超清晰度，而無需擔心分辨率或像素化。
無論如何查看網站，都可以產生始終如一的優美外觀。
此外，SVG的文件大小通常較小，這可以幫助您更快地加載網站。沒有人愿意坐在手機上觀看圖像緩沖區，因為它太大了。
（左側為SVG，右側為PNG）
需要說明的是，該文件類型不是普通攝影的選項，它僅適用于計算機生成的圖形。
誰做得很好：HubSpot
HubSpot的網站幾乎在每個頁面上都依賴復雜的插圖。
如果將這些另存為PNG，由于細節量，使用的顏色數量以及所需的大尺寸尺寸，它們的大小很容易是其五倍。
最重要的是，無論您是在臺式機還是移動設備上查看這些圖像，這些圖像都看起來清晰。
4.標準化可點擊區域和按鈕
在移動設備上，將用人的手指輕敲按鈕和鏈接，而不是通過精確的鼠標單擊來輕敲，因此交互式區域需要具有較大的區域以適應這種差異。
他們需要多大？嗯，這取決于用戶，但是平均而言，建議移動設備上的任何可點擊元素的高度至少為48像素。
這意味著您需要優化按鈕，表單輸入，博客上的內聯鏈接，卡片布局，導航鏈接等。
您可能會發現，難以遵守內聯鏈接（例如博客文章中的鏈接）上的此規則。如果您發現用戶難以使用鏈接，則可以嘗試使用這種技術來增加鏈接周圍的可點擊區域（注意：此解決方案確實需要開發人員來提供幫助）。
這將有助于確保通過您的網站進行導航時出現的錯誤更少，從而大程度地減少潛在的挫敗感，并使觀眾保持參與。
誰做得很好：Vidyard
Vidyard做得很好，可以將任何重要的可點擊區域保持足夠大，以免拇指摸索。
在圖像中，您會注意到Vidyard實際上在英雄部分增加了兩個按鈕的大小，而不是使它們保持相同的大小。英雄正下方的三個方塊也是完全可點擊的，而不是僅使帶有箭頭的不同顏色的文字可點擊。
此類類似的有目的的元素將應用到整個網站的大多數地方，從而使瀏覽變得容易。
5.響應式圖像
不同的設備具有不同的圖像大小需求。
桌面頁面在全分辨率下可能需要1200px寬的圖像，而該頁面的移動版本可能只需要400px寬的圖像。
這實際上是物理大小的三分之一，也大致相當于文件大小的三分之一。要牢記這一點很重要。
過去的處理方式是加載高分辨率（1200px）圖像，然后在所有設備平臺上僅使用相同的文件-但是這些大文件會大大降低網站加載時間。
為了獲得良好的響應體驗，*在移動設備和臺式機上使用同一圖像的兩個不同版本。
例如，在移動設備上，我們僅使用（或“調用”）所需的400px圖像，而不是較大的1200px圖像，一旦加載，該圖像將縮小為400px。
在頁面上將其與幾個圖像混合使用，您將獲得明顯更快的加載體驗，尤其是在將移動網站加載到單元服務而非wifi上的情況下。
有一些非常深入的文章介紹了如何完成此操作，因此您可以指定要在特定屏幕尺寸下顯示的圖像。
如果您使用帶有HubSpot的網站頁面來構建網站，那么您會很幸運！實際上，默認情況下， HubSpot 允許對內容自動調整圖像大小。
誰做得很好：Adobe
與其他示例不同，此示例的視覺效果將更加注重代碼，因此您可以看到此技術的示例。
以下是用于在Adobe網站上生成圖像的代碼。您會注意到有幾個“ .jpg”文件分隔在不同的行上。
這些JPG各自代表兩個以不同屏幕尺寸顯示的圖像。您可以通過與每個“源”對象相關聯的“媒體”標簽來分辨。
結果是，不同尺寸的圖像將以不同的指定設備尺寸顯示。根據您的網頁，您可能會發現需要更多或更少的圖像變體。
6.思考排版
重要的是要考慮網站在所有平臺和設備上的可讀性，但是在移動設備上，您需要更加注意用戶的可讀性需求。
如果人們無法閱讀您的價值主張或您的任何內容，那么他們很可能不會留下來。
您想確保內容易于閱讀并且針對設備大小進行了真正的優化，以確保訪問者不會眼花亂。
這也意味著要記下要在網站上使用的字體，以及它們在小屏幕上的可讀性好壞。
請記住，還要在設備尺寸的標題和正文字體大小之間取得平衡。您不希望您的字體大小彼此感覺完全不同，以至于閱讀時感覺很尷尬和不自然。
我還寫了整篇博客文章，介紹如何發現適用于臺式機和移動設備的正確字體大小，建議您深入研究以幫助更具體地了解字體大小規則。
誰做得很好：北京永燦
我知道，我知道。。。有些不合常規的例子，但我們一直在根據訪問者的來信不斷測試和調整字體大小，所以我無能為力！
標題在文字占據主導的頁面上創建了一個很大的層次結構。在博客列表頁面上，為博客標題提供了頂層層次結構，因此訪問者可以在瀏覽內容時快速瀏覽它們。
內部文章的字體大小也足夠大，可以容納相當數量的內容，同時仍然可讀。
盡管我們可以將字體大小設置為14px，以適應更多內容，但很大一部分讀者將無法清晰閱讀文章。較大的字體和較寬的行高也意味著您無需費力查找下一行。
7.利用設備功能
在智能手機上，您可以執行各種不同的任務。您可以直接從瀏覽器撥打電話，發送消息和打開應用程序。
利用您網站上的這些功能，不僅可以增強用戶的移動體驗，還可以增加轉化次數并鼓勵采取行動。
例如，在桌面站點上，您可以列出電話號碼。在該網站的移動版本上，您可能希望在按鈕或可單擊區域內列出電話號碼，單擊該按鈕或可單擊區域將自動提示呼叫。
這個想法也可以應用于電子郵件地址，在電子郵件應用程序中單擊時使用自動填充的收件人打開新消息。
社交媒體圖標還可以通過以下方式進行編碼：單擊后，它們將直接在應用程序中打開，而不是移動瀏覽器。
所有這些都可以極大地簡化訪問者與您之間的聯系和溝通。
誰做得很好：聯合衛理公會
有時，當您想獲取信息時，立即與某人打個電話和交談感覺很好。UMH（我們的客戶）意識到了這一點，并利用移動設備功能為其移動站點帶來了便利。
他們所做的就是拿走他們的電話號碼，將其放在一個可點擊的按鈕內，然后將其放在移動設備上的導航下方。
通過添加少量的簡單代碼，現在在移動設備上輕按該代碼時，它將詢問用戶是否可以撥打該號碼。接受后，設備會自動開始通話。無需擺弄筆和紙，或試圖記住要撥入的號碼。
當今的響應式設計
在2020年，如果您想為用戶提供一個經過優化的網站，則所有這些都是強制性的。您的網站訪問量中有一半可能來自移動設備；不能通過給他們低于標準的移動體驗來疏遠他們。
通過考慮這些響應式設計*實踐來審核您的網站，您將能夠確定您的網站是否真正適合我們所居住的現代移動優先時代，或者是否需要進行一些更改。
也許是經過全面的重新設計才能使您的網站成為響應迅速的超級巨星。還不確定嗎？聊聊吧！我們很樂意幫助您弄清楚今年及以后的情況。