? ? ? ?

自適應(yīng)網(wǎng)站建設(shè)原則

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