> 什么是可持續(xù)網(wǎng)頁(yè)設(shè)計(jì)？

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)與策劃設(shè)計(jì),濟(jì)陽(yáng)網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:濟(jì)陽(yáng)等地區(qū)。濟(jì)陽(yáng)做網(wǎng)站價(jià)格咨詢:18980820575

> 可持續(xù)網(wǎng)站有什么好處？

> 你如何創(chuàng)建一個(gè)可持續(xù)的網(wǎng)站？

1）優(yōu)化視覺(jué)內(nèi)容和延遲加載

2) CSS 精靈

3) 減少電子郵件

4) 優(yōu)化設(shè)計(jì)工作流程

5) 移動(dòng)優(yōu)先設(shè)計(jì)

6) 縮小 HTML 和 CSS 資源

7) 托管

8）明智地選擇字體

9) 層次結(jié)構(gòu)、導(dǎo)航和鏈接

10) 使用更少的網(wǎng)頁(yè)

隨著組織尋找每一個(gè)減少排放和最小化碳足跡的機(jī)會(huì)，可持續(xù)網(wǎng)頁(yè)設(shè)計(jì)是一項(xiàng)不斷發(fā)展的運(yùn)動(dòng)。如果您遵循響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)和移動(dòng)優(yōu)先實(shí)踐，那么您已經(jīng)在使用更環(huán)保的數(shù)字產(chǎn)品減少對(duì)環(huán)境的影響。

根據(jù)BBC 的一篇文章，為什么你的上網(wǎng)習(xí)慣沒(méi)有你想象的那么干凈，互聯(lián)網(wǎng)占“全球溫室氣體排放量的 3.7%”。– 包括設(shè)備、網(wǎng)站、應(yīng)用程序、數(shù)據(jù)中心和所有支持基礎(chǔ)設(shè)施。

本文著眼于設(shè)計(jì)師、工程師和企業(yè)如何通過(guò)為客戶制作環(huán)保數(shù)字產(chǎn)品和網(wǎng)站來(lái)減少排放。

什么是可持續(xù)網(wǎng)頁(yè)設(shè)計(jì)？

可持續(xù)網(wǎng)頁(yè)設(shè)計(jì)是優(yōu)化數(shù)字產(chǎn)品和網(wǎng)站以減少帶寬和功耗的過(guò)程。組織必須使用幾個(gè)關(guān)鍵的減排策略，包括：

> 設(shè)計(jì)

> Web開(kāi)發(fā)

> 內(nèi)容與營(yíng)銷

> 托管

> 項(xiàng)目管理

> 商業(yè)運(yùn)作

如您所見(jiàn)，可持續(xù)網(wǎng)頁(yè)設(shè)計(jì)超越了設(shè)計(jì)和開(kāi)發(fā)，以進(jìn)行整體影響評(píng)估，以減少溫室氣體排放。

可持續(xù)網(wǎng)站有什么好處？

設(shè)計(jì)一個(gè)可持續(xù)的網(wǎng)站或數(shù)字產(chǎn)品不僅有利于氣候變化；它還可以創(chuàng)造商業(yè)價(jià)值并降低成本。最顯著的節(jié)省之一是托管。

大多數(shù)托管計(jì)劃向您收取服務(wù)器空間量以及每月用戶數(shù)或帶寬的費(fèi)用。減小網(wǎng)站的大小可以節(jié)省服務(wù)器空間，同時(shí)降低帶寬和請(qǐng)求。自托管的公司需要更小的數(shù)據(jù)中心并節(jié)省能源費(fèi)用。

網(wǎng)站性能也與轉(zhuǎn)化率增加相關(guān)，頁(yè)面速度是谷歌排名因素之一。

因此，優(yōu)化網(wǎng)站和應(yīng)用程序性能的企業(yè)可以從成本節(jié)約和更高的收入中受益，從而形成更可持續(xù)的商業(yè)模式。

你如何創(chuàng)建一個(gè)可持續(xù)的網(wǎng)站？

這里有 10 個(gè)可持續(xù)的網(wǎng)頁(yè)設(shè)計(jì)技巧，它們可以提高性能、節(jié)省資金、增加用戶體驗(yàn)并減少網(wǎng)站對(duì)環(huán)境的影響。

1）優(yōu)化視覺(jué)內(nèi)容和延遲加載

根據(jù)HTTP Archive的說(shuō)法，“圖像是網(wǎng)絡(luò)上最流行的資源類型”，占平均網(wǎng)頁(yè)大小的 50%。WebP 代替 JPEG 或 PNG 可以將文件大小減少 25-35%，同時(shí)提高頁(yè)面速度性能。將圖標(biāo)和徽標(biāo)切換為 SVG 格式也可以顯著減少頁(yè)面重量。

對(duì)于視頻內(nèi)容，設(shè)計(jì)師應(yīng)該使用WebM而不是 MP4 和 GIF。WebM 更小并且針對(duì)網(wǎng)絡(luò)進(jìn)行了優(yōu)化。

延遲加載是設(shè)計(jì)師優(yōu)化圖像和視頻內(nèi)容的另一種方式。瀏覽器不會(huì)同時(shí)加載所有這些資源，而是僅加載首屏內(nèi)容，然后在用戶滾動(dòng)時(shí)獲取其他圖像和縮略圖。

2) CSS 精靈

CSS sprites是一種古老的視頻游戲技巧，僅通過(guò)一個(gè) HTTP 請(qǐng)求即可加載多個(gè)圖像。您無(wú)需單獨(dú)上傳每個(gè)文件，而是垂直堆疊圖像并將它們與每個(gè)文件之間的裝訂線組合在一起。

開(kāi)發(fā)人員使用 CSS 設(shè)置位置和尺寸，隱藏堆棧的其余部分，使其看起來(lái)像單頁(yè)圖像。CSS Tricks 有一篇關(guān)于如何使用 CSS sprites的信息豐富的文章，包括用于自動(dòng)化流程的包管理器。

3) 減少電子郵件

根據(jù)BBC 的一篇文章，“如果英國(guó)每個(gè)成年人少發(fā)一封‘謝謝’電子郵件，每年可以減少 16,433 噸碳排放——相當(dāng)于減少 3,334 輛柴油車上路。”

組織應(yīng)審核信件并消除浪費(fèi)的電子郵件。例如，客戶完成銷售后會(huì)收到多少封電子郵件？你能把這些合二為一嗎？

根據(jù)營(yíng)銷大師尼爾帕特爾的說(shuō)法，營(yíng)銷人員應(yīng)該定期清除電子郵件列表。如果您向不活躍的帳戶或不打開(kāi)或不參與您的內(nèi)容的客戶發(fā)送電子郵件，那么您就是在浪費(fèi)金錢并增加不必要的碳排放。

另外，請(qǐng)考慮是否有必要在您的電子郵件中包含圖片。普通的文本電子郵件是 4 克二氧化碳，而帶有照片的電子郵件是 50 克二氧化碳。

4) 優(yōu)化設(shè)計(jì)工作流程

優(yōu)化設(shè)計(jì)工作流程可以減少返工、錯(cuò)誤和可用性問(wèn)題。這些問(wèn)題通常會(huì)對(duì)影響 UX 以外的部門的資源造成壓力。

DesignOps可以幫助組織優(yōu)化 UX 工作流程并提高設(shè)計(jì)效率。構(gòu)建設(shè)計(jì)系統(tǒng)還可以幫助減少錯(cuò)誤并縮短上市時(shí)間，同時(shí)通過(guò)加載更快的更簡(jiǎn)潔的用戶界面改善用戶體驗(yàn)。

5) 移動(dòng)優(yōu)先設(shè)計(jì)

適合移動(dòng)設(shè)備的網(wǎng)站必須更輕，才能在智能手機(jī)上更快地加載。因此，采用移動(dòng)優(yōu)先的設(shè)計(jì)策略意味著設(shè)計(jì)師在保護(hù)環(huán)境的同時(shí)為用戶創(chuàng)造價(jià)值。

6) 縮小 HTML 和 CSS 資源

縮小代碼會(huì)刪除不必要的空白，減小文件大小并提高頁(yè)面速度。開(kāi)發(fā)者還可以組合資源文件，讓瀏覽器的請(qǐng)求更少。

有大量免費(fèi)工具可用于縮小 HTML 和 CSS，包括用于代碼編輯器和包管理器的插件。縮小 Javascript 稍微復(fù)雜一些，因此請(qǐng)讓合格的開(kāi)發(fā)人員來(lái)處理。

7) 托管

根據(jù)美國(guó)能源效率和可再生能源辦公室的數(shù)據(jù)，數(shù)據(jù)中心占美國(guó)用電量的 2%。因此，切換到綠色網(wǎng)絡(luò)主機(jī)提供商可以幫助減少能源消耗。

綠色網(wǎng)絡(luò)基金會(huì)擁有 26 個(gè)國(guó)家/地區(qū)的 342 家綠色托管服務(wù)提供商的托管目錄（截至 2021 年 12 月的數(shù)據(jù)正確）。綠色房東使用風(fēng)能、太陽(yáng)能和水力等可再生能源。在某些情況下，托管服務(wù)提供商會(huì)產(chǎn)生比他們需要的更多的綠色電力，并將其反饋到電網(wǎng)中。

您會(huì)很高興地知道，包括 AWS、A2 Hosting、Firebase Hosting 和 Siteground 在內(nèi)的許多知名企業(yè)都被列為美國(guó)的綠色托管服務(wù)提供商。

8）明智地選擇字體

眾所周知，字體會(huì)降低頁(yè)面速度，尤其是自定義的自托管字體。考慮使用與所有瀏覽器兼容的 18 種網(wǎng)絡(luò)安全字體之一來(lái)設(shè)計(jì)您的網(wǎng)站——這意味著瀏覽器不需要下載其他文件。

如果您使用的是自定義字體，請(qǐng)確保它是 WOFF 或 WOFF2 格式，以便瀏覽器可以讀取和下載它。您還需要在字體堆棧中包含網(wǎng)絡(luò)安全字體，否則如果瀏覽器無(wú)法處理 WOFF 文件，它將加載 New Times Roman。

開(kāi)發(fā)人員還可以使用其他技巧來(lái)自定義字體，例如預(yù)加載和 CSS 優(yōu)化。

9) 層次結(jié)構(gòu)、導(dǎo)航和鏈接

層次結(jié)構(gòu)和導(dǎo)航在幫助用戶快速查找內(nèi)容和完成任務(wù)方面發(fā)揮著至關(guān)重要的作用。設(shè)計(jì)人員應(yīng)優(yōu)先考慮頁(yè)眉中的基本導(dǎo)航（最多 4-5 個(gè)）和頁(yè)腳中的輔助鏈接。

層次結(jié)構(gòu)幫助用戶更快地識(shí)別重要內(nèi)容并完成任務(wù)。視覺(jué)層次也是用戶體驗(yàn)和網(wǎng)站可訪問(wèn)性的關(guān)鍵因素。

團(tuán)隊(duì)?wèi)?yīng)定期對(duì)損壞的內(nèi)部和外部鏈接進(jìn)行網(wǎng)站審核，以確保用戶永遠(yuǎn)不會(huì)因?yàn)樗缆?404 錯(cuò)誤而浪費(fèi)服務(wù)器請(qǐng)求。對(duì)內(nèi)部鏈接使用 301 重定向，并為損壞的外部鏈接尋找新資源。

10) 使用更少的網(wǎng)頁(yè)

每次新的頁(yè)面訪問(wèn)都需要瀏覽器向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器返回頁(yè)面的內(nèi)容和資源。您擁有的頁(yè)面訪問(wèn)次數(shù)越多，服務(wù)器為提供內(nèi)容而必須做的工作（和能源消耗）就越多。

設(shè)計(jì)師應(yīng)該評(píng)估每個(gè)項(xiàng)目以確定如何減少或合并頁(yè)面。對(duì)于大多數(shù)投資組合、登錄頁(yè)面、公司網(wǎng)站、本地企業(yè)、SaaS 和應(yīng)用程序來(lái)說(shuō)，單頁(yè)設(shè)計(jì)通常就足夠了，僅舉幾例。

單頁(yè)設(shè)計(jì)有利于環(huán)境，并為移動(dòng)設(shè)備上的訪問(wèn)者提供更好的用戶體驗(yàn)，他們只需滾動(dòng)即可找到所需的內(nèi)容。

文章題目：可持續(xù)網(wǎng)頁(yè)設(shè)計(jì)：你能降低設(shè)計(jì)對(duì)環(huán)境的影響嗎？
當(dāng)前路徑：http://vcdvsql.cn/article48/egdihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、App設(shè)計(jì)、搜索引擎優(yōu)化、動(dòng)態(tài)網(wǎng)站、軟件開(kāi)發(fā)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)