為什么在建設(shè)網(wǎng)站時(shí)針對(duì)不同設(shè)備進(jìn)行優(yōu)化?
時(shí)間:2024-05-10 06:30:01 | 來(lái)源:建站知識(shí)
時(shí)間:2024-05-10 06:30:01 來(lái)源:建站知識(shí)
當(dāng)從頭開(kāi)始您的網(wǎng)站或在線多年時(shí),您在開(kāi)發(fā)網(wǎng)站時(shí)必須考慮很多事情。開(kāi)發(fā)人員遇到的主要問(wèn)題之一是針對(duì)不同的設(shè)備進(jìn)行優(yōu)化。
您的流量可能來(lái)自多個(gè)來(lái)源:
至關(guān)重要的是,您的網(wǎng)站在任何地方都提供相同的體驗(yàn)。讓我們看看什么是跨設(shè)備友好性!
什么是跨設(shè)備友好性?
當(dāng)您開(kāi)發(fā)網(wǎng)站時(shí),您必須確保無(wú)論人們來(lái)自哪里,他們都可以獲得完全相同的體驗(yàn)(或幾乎),這就是跨設(shè)備友好性的全部意義所在。
當(dāng)然,您必須考慮許多不同的方面,因?yàn)槊總€(gè)方面都有自己不同的參數(shù)和功能,但是如果您可以巧妙地根據(jù)這些標(biāo)準(zhǔn)調(diào)整您的網(wǎng)站,則可以確保您的網(wǎng)站將是多設(shè)備瀏覽的。
不同設(shè)備上要考慮的因素
當(dāng)我們談?wù)摼W(wǎng)站開(kāi)發(fā)時(shí),跨設(shè)備優(yōu)化變得越來(lái)越重要。移動(dòng)設(shè)備的普及在過(guò)去幾年中飆升 - 全球有超過(guò)50億獨(dú)特的手機(jī)用戶(hù)。但是,當(dāng)我們談?wù)撘苿?dòng)和桌面的網(wǎng)站優(yōu)化時(shí),應(yīng)該考慮許多不同的方面。這可能是:
- 屏幕尺寸
- 跨平臺(tái)旅程
- 內(nèi)容放置和互動(dòng)
- 頁(yè)面加載時(shí)間
交通量
多年來(lái),桌面主導(dǎo)的時(shí)代已經(jīng)逐漸消失。當(dāng)然,這并不意味著人們不會(huì)從PC上搜索網(wǎng)絡(luò),但自2017年以來(lái),超過(guò)一半的網(wǎng)站流量來(lái)自移動(dòng)設(shè)備,并且還在不斷增加。
如今,線性的“僅桌面優(yōu)化”思維模式是不夠的。如果您想為訪客提供終極體驗(yàn),那么移動(dòng)友好性是不可避免的。另一方面,您不應(yīng)該只是著手使移動(dòng)設(shè)備的一切變得實(shí)用,而忽略了您的桌面Web開(kāi)發(fā)。找到這兩種媒介之間的平衡
屏幕尺寸
當(dāng)智能手機(jī)成為人們關(guān)注的焦點(diǎn)時(shí),每個(gè)網(wǎng)站都只針對(duì)臺(tái)式機(jī)進(jìn)行了優(yōu)化,這給移動(dòng)用戶(hù)帶來(lái)了很多不便 - 一個(gè)全尺寸的網(wǎng)站被扔到移動(dòng)用戶(hù)的小屏幕上。用戶(hù)必須不斷放大 - 縮小才能看到他們想要的內(nèi)容,并且由于注意力持續(xù)時(shí)間和耐心的縮短,訪問(wèn)者會(huì)感到沮喪(并且可能不會(huì)回來(lái))提前離開(kāi)。
在這些情況下可能發(fā)生的另一個(gè)問(wèn)題與圖像有關(guān)。如果您將圖像優(yōu)化到桌面顯示器屏幕,并且移動(dòng)訪問(wèn)者加載了您的頁(yè)面,他們將無(wú)法正常看到整個(gè)畫(huà)面。他們可能會(huì)放大以正常查看內(nèi)容,但隨后整個(gè)圖像可能不可見(jiàn),并且不斷調(diào)整大小可能會(huì)非常不舒服。
跨設(shè)備旅程
從不同來(lái)源訪問(wèn)您網(wǎng)站的訪問(wèn)者并不一定意味著他們都是新的,獨(dú)特的用戶(hù)。人們傾向于在達(dá)到所需操作之前進(jìn)行跨設(shè)備旅程,例如從您的網(wǎng)站購(gòu)買(mǎi)產(chǎn)品。他們通常通過(guò)智能手機(jī)瀏覽您的網(wǎng)站,如果他們發(fā)現(xiàn)一些有趣的東西或想要填寫(xiě)表單,他們通常會(huì)換成筆記本電腦或臺(tái)式機(jī)以便于完成。
因此,如您所見(jiàn),在轉(zhuǎn)化方面,將訪問(wèn)者分成單獨(dú)的組可能會(huì)產(chǎn)生誤導(dǎo)。同步單一或跨設(shè)備的不同事件(例如結(jié)帳過(guò)程,會(huì)員注冊(cè))可能是使您的網(wǎng)站最適合您的受眾的關(guān)鍵點(diǎn)。
內(nèi)容放置和互動(dòng)
可用空間因設(shè)備而異,因此擁有一個(gè)結(jié)構(gòu)良好的網(wǎng)站至關(guān)重要。為了反思我們之前的“屏幕尺寸”觀點(diǎn),人們?nèi)绾慰吹骄W(wǎng)站上的內(nèi)容是典型的。例如,您可能有一篇文章可以從桌面的顯示器上完全閱讀,但是在手機(jī)上滾動(dòng),不斷調(diào)整大量大小以使每個(gè)細(xì)節(jié)可讀可能會(huì)讓用戶(hù)感到煩惱。
另一個(gè)痛點(diǎn)來(lái)自用戶(hù)互動(dòng)。如果交互式按鈕太小或不清楚在何處按下它們,則可能很難執(zhí)行某些操作,例如關(guān)閉彈出窗口或注冊(cè)用戶(hù)。按鈕可能發(fā)生的另一個(gè)問(wèn)題是將它們彼此相鄰放置 - 如果您無(wú)法用邊框等清楚地分隔它們,則可能導(dǎo)致憤怒的點(diǎn)擊,從而錯(cuò)過(guò)客戶(hù)。
頁(yè)面加載時(shí)間
在當(dāng)今匆忙的世界中,每個(gè)人都希望立即訪問(wèn)各種信息,如果他們必須等待幾秒鐘以上,他們就會(huì)離開(kāi)您的網(wǎng)站。與許多其他事情一樣,頁(yè)面加載時(shí)間也因設(shè)備而異。
雖然臺(tái)式機(jī)可以通過(guò)以太網(wǎng)電纜直接訪問(wèn)互聯(lián)網(wǎng),但手機(jī)只有遠(yuǎn)程連接。讓您的每個(gè)頁(yè)面在任何地方都保持最高速度非常重要 - 您可以想象,如果桌面上的內(nèi)容在移動(dòng)設(shè)備上展示,那么網(wǎng)站加載速度會(huì)有多慢。
解決方案 - 優(yōu)化用戶(hù)體驗(yàn)
如果您想在每臺(tái)設(shè)備上實(shí)現(xiàn)最終的客戶(hù)滿意度,那么您應(yīng)該專(zhuān)注于優(yōu)化用戶(hù)體驗(yàn)。
用戶(hù)體驗(yàn)是用戶(hù)在您網(wǎng)站上的整體體驗(yàn) - 這可能意味著他們?nèi)绾螢g覽您的頁(yè)面,如何完成某些事件(例如訪問(wèn)產(chǎn)品,然后將商品放入購(gòu)物車(chē)并完成結(jié)帳),或者他們?cè)谀W(wǎng)站上的會(huì)話期間的感受。
前面提到的所有要點(diǎn)都會(huì)對(duì)網(wǎng)站的用戶(hù)體驗(yàn)產(chǎn)生影響。如果訪問(wèn)者發(fā)現(xiàn)瀏覽您的網(wǎng)站并不容易和清晰,客戶(hù)將從您的渠道中退出。好消息是,通過(guò)一些調(diào)整,您可以在每種渠道上創(chuàng)造奇跡。
移動(dòng)優(yōu)先感知
首先通過(guò)移動(dòng)開(kāi)發(fā)開(kāi)始您的Web開(kāi)發(fā)過(guò)程可以使您的生活更加輕松。弄清楚然后定制所有與智能手機(jī)不兼容的功能會(huì)更耗時(shí)。移動(dòng)設(shè)計(jì)通常需要更簡(jiǎn)約的方法,因此針對(duì)較小的屏幕進(jìn)行設(shè)計(jì),然后用內(nèi)容填充較大的屏幕可能是一種節(jié)省時(shí)間的解決方案。
此外,適合移動(dòng)設(shè)備的解決方案通常非常適合臺(tái)式機(jī)。以著名的漢堡包菜單為例 - 他們做得很好,越來(lái)越多的網(wǎng)站開(kāi)始將其實(shí)施到桌面顯示器上,但極簡(jiǎn)主義也開(kāi)始征服不同類(lèi)型的計(jì)算機(jī)屏幕。
加快頁(yè)面加載時(shí)間
正如我們之前提到的,在用戶(hù)體驗(yàn)方面,快速加載頁(yè)面是重中之重。通過(guò)一些聰明的技巧,您可以在加載時(shí)間中節(jié)省一些額外的秒數(shù)。
首先,使用CSS媒體查詢(xún),您可以設(shè)置網(wǎng)頁(yè)資產(chǎn)的加載順序。這樣,您可以通過(guò)先加載文本來(lái)節(jié)省時(shí)間,以便用戶(hù)可以在以后加載圖像時(shí)開(kāi)始閱讀重要內(nèi)容。其次,為移動(dòng)設(shè)備壓縮圖像還可以節(jié)省一些質(zhì)量時(shí)間,并且還可以保持圖像的相同質(zhì)量。此外,通過(guò)定制代碼中不必要的部分來(lái)優(yōu)化HTML-CSS-Javascript代碼可以減少等待時(shí)間。
最后,保持您網(wǎng)站的插件,主題和其他附加組件的最新?tīng)顟B(tài)是跟上步伐的另一種方法。這些工具不斷開(kāi)發(fā)中,以提供更好,更用戶(hù)友好的體驗(yàn),因此定期更新它們也可以對(duì)您的網(wǎng)站產(chǎn)生積極影響。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
對(duì)于最終的多設(shè)備成功,響應(yīng)性是您網(wǎng)站的典型因素。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)意味著您的網(wǎng)站會(huì)自動(dòng)適應(yīng)不同的屏幕尺寸和平臺(tái)。這涉及縮放網(wǎng)站上的圖像和字體,但您也可以影響內(nèi)容之間的空白。
您也可以在此處使用前面提到的 CSS 媒體查詢(xún)來(lái)實(shí)現(xiàn)整體設(shè)備響應(yīng)。只需一點(diǎn)知識(shí),您就可以輕松創(chuàng)建一個(gè)跨設(shè)備友好的網(wǎng)站。這不僅意味著它可以節(jié)省大量Web開(kāi)發(fā)時(shí)間,因?yàn)槟槐刂饌€(gè)針對(duì)每個(gè)不同的屏幕進(jìn)行優(yōu)化,還可以在所有平臺(tái)上保持您的網(wǎng)站美觀。
鼓勵(lì)跨設(shè)備使用
有時(shí),在不同設(shè)備上具有較少的功能并不一定是問(wèn)題。我們通常出于不同的目的使用不同的平臺(tái)。我們通常使用手機(jī)在桌面上瀏覽和完成更大的任務(wù)。
找到這些不同的媒介如何相互補(bǔ)充是成功的關(guān)鍵。一個(gè)優(yōu)化的移動(dòng)界面可以設(shè)置以后的購(gòu)買(mǎi),當(dāng)你的訪問(wèn)者有更多的時(shí)間填寫(xiě)結(jié)帳表格。不要爭(zhēng)奪不同的設(shè)備,結(jié)盟不同的力量!
在不同的設(shè)備上組織您的內(nèi)容
要在移動(dòng)設(shè)備和桌面設(shè)備上提供幾乎相同的體驗(yàn),必須在不同的設(shè)備上重新組織相同的內(nèi)容。在桌面上,按列組織的內(nèi)容放置效果非常完美。例如,頁(yè)面頂部有一個(gè)導(dǎo)航欄,在中間可以找到文章,在右側(cè),有相關(guān)的主題,文章或其他小部件。主要概念是清楚地區(qū)分不同的內(nèi)容。
對(duì)于手機(jī)來(lái)說(shuō),這有點(diǎn)棘手,因?yàn)槟阌懈〉目臻g可以使用。將內(nèi)容組織到一個(gè)集中的列中,交替放置文本和圖像,而不是將圖片和字體放在一起,這是一個(gè)更愉快的視圖。交互式按鈕(如導(dǎo)航欄或搜索字段)可以放置在屏幕的每一側(cè),以防止誤單擊。通過(guò)這種方式,您可以在不同的媒體上提供幾乎相同的體驗(yàn)。
表單和彈出窗口位于同一界面中。盡管它們有時(shí)可能會(huì)感到煩人,但很好地優(yōu)化它們會(huì)給用戶(hù)帶來(lái)更少的麻煩。將它們并排放置并放置易于訪問(wèn)的號(hào)召性標(biāo)語(yǔ)以進(jìn)行不同的交互可以防止訪問(wèn)者感到沮喪(例如縮小和尋找關(guān)閉按鈕),并創(chuàng)建更流暢的用戶(hù)體驗(yàn)。
結(jié)論
在跨設(shè)備開(kāi)發(fā)方面,有許多因素需要考慮。針對(duì)每種媒介優(yōu)化您的網(wǎng)站是一個(gè)關(guān)鍵點(diǎn) - 用戶(hù)從不同的來(lái)源訪問(wèn)您的網(wǎng)站,但單個(gè)訪問(wèn)者可以通過(guò)多種方式找到您。如果您的任何接口上都存在瓶頸,您可能無(wú)法充分發(fā)揮平臺(tái)的潛力。立即阻止流量流失,并在任何地方制作您網(wǎng)站的最佳版本!