當從頭開(kāi)始您的網站或在線多年時，您在開(kāi)發網站時必須考慮很多事情。開(kāi)發人員(yuán)遇到的主要問題之一(yī)是針對不同的設備進行優化。

您的流量可能來自多個來源：

桌面電(diàn)腦

智能手機

平闆電(diàn)腦

智能手表

至關重要的是，您的網站在任何地方都提供相同的體(tǐ)驗。讓我(wǒ)(wǒ)們看看什麽是跨設備友好性！

什麽是跨設備友好性？

當您開(kāi)發網站時，您必須确保無論人們來自哪裏，他們都可以獲得完全相同的體(tǐ)驗（或幾乎），這就是跨設備友好性的全部意義所在。

當然，您必須考慮許多不同的方面，因爲每個方面都有自己不同的參數和功能，但是如果您可以巧妙地根據這些标準調整您的網站，則可以确保您的網站将是多設備浏覽的。

不同設備上要考慮的因素

當我(wǒ)(wǒ)們談論網站開(kāi)發時，跨設備優化變得越來越重要。移動設備的普及在過去(qù)幾年中(zhōng)飙升 - 全球有超過50億獨特的手機用戶。但是，當我(wǒ)(wǒ)們談論移動和桌面的網站優化時，應該考慮許多不同的方面。這可能是：

屏幕尺寸

跨平台旅程

内容放(fàng)置和互動

頁面加載時間

交通量

多年來，桌面主導的時代已經逐漸消失。當然，這并不意味着人們不會從PC上搜索網絡，但自2017年以來，超過一(yī)半的網站流量來自移動設備，并且還在不斷增加。

如今，線性的“僅桌面優化”思維模式是不夠的。如果您想爲訪客提供終極體(tǐ)驗，那麽移動友好性是不可避免的。另一(yī)方面，您不應該隻是着手使移動設備的一(yī)切變得實用，而忽略了您的桌面Web開(kāi)發。找到這兩種媒介之間的平衡

屏幕尺寸

當智能手機成爲人們關注的焦點時，每個網站都隻針對台式機進行了優化，這給移動用戶帶來了很多不便 - 一(yī)個全尺寸的網站被扔到移動用戶的小(xiǎo)屏幕上。用戶必須不斷放(fàng)大(dà) - 縮小(xiǎo)才能看到他們想要的内容，并且由于注意力持續時間和耐心的縮短，訪問者會感到沮喪（并且可能不會回來）提前離(lí)開(kāi)。

在這些情況下(xià)可能發生(shēng)的另一(yī)個問題與圖像有關。如果您将圖像優化到桌面顯示器屏幕，并且移動訪問者加載了您的頁面，他們将無法正常看到整個畫面。他們可能會放(fàng)大(dà)以正常查看内容，但随後整個圖像可能不可見，并且不斷調整大(dà)小(xiǎo)可能會非常不舒服。

跨設備旅程

從不同來源訪問您網站的訪問者并不一(yī)定意味着他們都是新的，獨特的用戶。人們傾向于在達到所需操作之前進行跨設備旅程，例如從您的網站購買産品。他們通常通過智能手機浏覽您的網站，如果他們發現一(yī)些有趣的東西或想要填寫表單，他們通常會換成筆記本電(diàn)腦或台式機以便于完成。

因此，如您所見，在轉化方面，将訪問者分(fēn)成單獨的組可能會産生(shēng)誤導。同步單一(yī)或跨設備的不同事件（例如結帳過程，會員(yuán)注冊）可能是使您的網站最适合您的受衆的關鍵點。

内容放(fàng)置和互動

可用空間因設備而異，因此擁有一(yī)個結構良好的網站至關重要。爲了反思我(wǒ)(wǒ)們之前的“屏幕尺寸”觀點，人們如何看到網站上的内容是典型的。例如，您可能有一(yī)篇文章可以從桌面的顯示器上完全閱讀，但是在手機上滾動，不斷調整大(dà)量大(dà)小(xiǎo)以使每個細節可讀可能會讓用戶感到煩惱。

另一(yī)個痛點來自用戶互動。如果交互式按鈕太小(xiǎo)或不清楚在何處按下(xià)它們，則可能很難執行某些操作，例如關閉彈出窗口或注冊用戶。按鈕可能發生(shēng)的另一(yī)個問題是将它們彼此相鄰放(fàng)置 - 如果您無法用邊框等清楚地分(fēn)隔它們，則可能導緻憤怒的點擊，從而錯過客戶。

頁面加載時間

在當今匆忙的世界中(zhōng)，每個人都希望立即訪問各種信息，如果他們必須等待幾秒鍾以上，他們就會離(lí)開(kāi)您的網站。與許多其他事情一(yī)樣，頁面加載時間也因設備而異。

雖然台式機可以通過以太網電(diàn)纜直接訪問互聯網，但手機隻有遠程連接。讓您的每個頁面在任何地方都保持最高速度非常重要 - 您可以想象，如果桌面上的内容在移動設備上展示，那麽網站加載速度會有多慢(màn)。

解決方案 - 優化用戶體(tǐ)驗

如果您想在每台設備上實現最終的客戶滿意度，那麽您應該專注于優化用戶體(tǐ)驗。

用戶體(tǐ)驗是用戶在您網站上的整體(tǐ)體(tǐ)驗 - 這可能意味着他們如何浏覽您的頁面，如何完成某些事件（例如訪問産品，然後将商(shāng)品放(fàng)入購物(wù)車(chē)并完成結帳），或者他們在您網站上的會話(huà)期間的感受。

前面提到的所有要點都會對網站的用戶體(tǐ)驗産生(shēng)影響。如果訪問者發現浏覽您的網站并不容易和清晰，客戶将從您的渠道中(zhōng)退出。好消息是，通過一(yī)些調整，您可以在每種渠道上創造奇迹。

移動優先感知(zhī)

首先通過移動開(kāi)發開(kāi)始您的Web開(kāi)發過程可以使您的生(shēng)活更加輕松。弄清楚然後定制所有與智能手機不兼容的功能會更耗時。移動設計通常需要更簡約的方法，因此針對較小(xiǎo)的屏幕進行設計，然後用内容填充較大(dà)的屏幕可能是一(yī)種節省時間的解決方案。

此外(wài)，适合移動設備的解決方案通常非常适合台式機。以著名的漢堡包菜單爲例 - 他們做得很好，越來越多的網站開(kāi)始将其實施到桌面顯示器上，但極簡主義也開(kāi)始征服不同類型的計算機屏幕。

加快頁面加載時間

正如我(wǒ)(wǒ)們之前提到的，在用戶體(tǐ)驗方面，快速加載頁面是重中(zhōng)之重。通過一(yī)些聰明的技巧，您可以在加載時間中(zhōng)節省一(yī)些額外(wài)的秒數。

首先，使用CSS媒體(tǐ)查詢，您可以設置網頁資(zī)産的加載順序。這樣，您可以通過先加載文本來節省時間，以便用戶可以在以後加載圖像時開(kāi)始閱讀重要内容。其次，爲移動設備壓縮圖像還可以節省一(yī)些質量時間，并且還可以保持圖像的相同質量。此外(wài)，通過定制代碼中(zhōng)不必要的部分(fēn)來優化HTML-CSS-Javascript代碼可以減少等待時間。

最後，保持您網站的插件，主題和其他附加組件的最新狀态是跟上步伐的另一(yī)種方法。這些工(gōng)具不斷開(kāi)發中(zhōng)，以提供更好，更用戶友好的體(tǐ)驗，因此定期更新它們也可以對您的網站産生(shēng)積極影響。

響應式網頁設計

對于最終的多設備成功，響應性是您網站的典型因素。響應式網頁設計意味着您的網站會自動适應不同的屏幕尺寸和平台。這涉及縮放(fàng)網站上的圖像和字體(tǐ)，但您也可以影響内容之間的空白(bái)。

您也可以在此處使用前面提到的 CSS 媒體(tǐ)查詢來實現整體(tǐ)設備響應。隻需一(yī)點知(zhī)識，您就可以輕松創建一(yī)個跨設備友好的網站。這不僅意味着它可以節省大(dà)量Web開(kāi)發時間，因爲您不必逐個針對每個不同的屏幕進行優化，還可以在所有平台上保持您的網站美觀。

鼓勵跨設備使用

有時，在不同設備上具有較少的功能并不一(yī)定是問題。我(wǒ)(wǒ)們通常出于不同的目的使用不同的平台。我(wǒ)(wǒ)們通常使用手機在桌面上浏覽和完成更大(dà)的任務。

找到這些不同的媒介如何相互補充是成功的關鍵。一(yī)個優化的移動界面可以設置以後的購買，當你的訪問者有更多的時間填寫結帳表格。不要争奪不同的設備，結盟不同的力量！

在不同的設備上組織您的内容

要在移動設備和桌面設備上提供幾乎相同的體(tǐ)驗，必須在不同的設備上重新組織相同的内容。在桌面上，按列組織的内容放(fàng)置效果非常完美。例如，頁面頂部有一(yī)個導航欄，在中(zhōng)間可以找到文章，在右側，有相關的主題，文章或其他小(xiǎo)部件。主要概念是清楚地區分(fēn)不同的内容。

對于手機來說，這有點棘手，因爲你有更小(xiǎo)的空間可以使用。将内容組織到一(yī)個集中(zhōng)的列中(zhōng)，交替放(fàng)置文本和圖像，而不是将圖片和字體(tǐ)放(fàng)在一(yī)起，這是一(yī)個更愉快的視圖。交互式按鈕（如導航欄或搜索字段）可以放(fàng)置在屏幕的每一(yī)側，以防止誤單擊。通過這種方式，您可以在不同的媒體(tǐ)上提供幾乎相同的體(tǐ)驗。

表單和彈出窗口位于同一(yī)界面中(zhōng)。盡管它們有時可能會感到煩人，但很好地優化它們會給用戶帶來更少的麻煩。将它們并排放(fàng)置并放(fàng)置易于訪問的号召性标語以進行不同的交互可以防止訪問者感到沮喪（例如縮小(xiǎo)和尋找關閉按鈕），并創建更流暢的用戶體(tǐ)驗。

結論

在跨設備開(kāi)發方面，有許多因素需要考慮。針對每種媒介優化您的網站是一(yī)個關鍵點 - 用戶從不同的來源訪問您的網站，但單個訪問者可以通過多種方式找到您。如果您的任何接口上都存在瓶頸，您可能無法充分(fēn)發揮平台的潛力。立即阻止流量流失，并在任何地方制作您網站的最佳版本！