可持续网页设计：你能降低设计对环境的影响吗？

> 什么是可持续网页设计？

创新互联是一家专注于成都网站制作、成都做网站、外贸营销网站建设与策划设计,济阳网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:济阳等地区。济阳做网站价格咨询:18980820575

> 可持续网站有什么好处？

> 你如何创建一个可持续的网站？

1）优化视觉内容和延迟加载

2) CSS 精灵

3) 减少电子邮件

4) 优化设计工作流程

5) 移动优先设计

6) 缩小 HTML 和 CSS 资源

7) 托管

8）明智地选择字体

9) 层次结构、导航和链接

10) 使用更少的网页

随着组织寻找每一个减少排放和最小化碳足迹的机会，可持续网页设计是一项不断发展的运动。如果您遵循响应式网页设计和移动优先实践，那么您已经在使用更环保的数字产品减少对环境的影响。

根据BBC 的一篇文章，为什么你的上网习惯没有你想象的那么干净，互联网占“全球温室气体排放量的 3.7%”。– 包括设备、网站、应用程序、数据中心和所有支持基础设施。

本文着眼于设计师、工程师和企业如何通过为客户制作环保数字产品和网站来减少排放。

什么是可持续网页设计？

可持续网页设计是优化数字产品和网站以减少带宽和功耗的过程。组织必须使用几个关键的减排策略，包括：

> 设计

> Web开发

> 内容与营销

> 托管

> 项目管理

> 商业运作

如您所见，可持续网页设计超越了设计和开发，以进行整体影响评估，以减少温室气体排放。

可持续网站有什么好处？

设计一个可持续的网站或数字产品不仅有利于气候变化；它还可以创造商业价值并降低成本。最显着的节省之一是托管。

大多数托管计划向您收取服务器空间量以及每月用户数或带宽的费用。减小网站的大小可以节省服务器空间，同时降低带宽和请求。自托管的公司需要更小的数据中心并节省能源费用。

网站性能也与转化率增加相关，页面速度是谷歌排名因素之一。

因此，优化网站和应用程序性能的企业可以从成本节约和更高的收入中受益，从而形成更可持续的商业模式。

你如何创建一个可持续的网站？

这里有 10 个可持续的网页设计技巧，它们可以提高性能、节省资金、增加用户体验并减少网站对环境的影响。

1）优化视觉内容和延迟加载

根据HTTP Archive的说法，“图像是网络上最流行的资源类型”，占平均网页大小的 50%。WebP 代替 JPEG 或 PNG 可以将文件大小减少 25-35%，同时提高页面速度性能。将图标和徽标切换为 SVG 格式也可以显着减少页面重量。

对于视频内容，设计师应该使用WebM而不是 MP4 和 GIF。WebM 更小并且针对网络进行了优化。

延迟加载是设计师优化图像和视频内容的另一种方式。浏览器不会同时加载所有这些资源，而是仅加载首屏内容，然后在用户滚动时获取其他图像和缩略图。

2) CSS 精灵

CSS sprites是一种古老的视频游戏技巧，仅通过一个 HTTP 请求即可加载多个图像。您无需单独上传每个文件，而是垂直堆叠图像并将它们与每个文件之间的装订线组合在一起。

开发人员使用 CSS 设置位置和尺寸，隐藏堆栈的其余部分，使其看起来像单页图像。CSS Tricks 有一篇关于如何使用 CSS sprites的信息丰富的文章，包括用于自动化流程的包管理器。

3) 减少电子邮件

根据BBC 的一篇文章，“如果英国每个成年人少发一封‘谢谢’电子邮件，每年可以减少 16,433 吨碳排放——相当于减少 3,334 辆柴油车上路。”

组织应审核信件并消除浪费的电子邮件。例如，客户完成销售后会收到多少封电子邮件？你能把这些合二为一吗？

根据营销大师尼尔帕特尔的说法，营销人员应该定期清除电子邮件列表。如果您向不活跃的帐户或不打开或不参与您的内容的客户发送电子邮件，那么您就是在浪费金钱并增加不必要的碳排放。

另外，请考虑是否有必要在您的电子邮件中包含图片。普通的文本电子邮件是 4 克二氧化碳，而带有照片的电子邮件是 50 克二氧化碳。

4) 优化设计工作流程

优化设计工作流程可以减少返工、错误和可用性问题。这些问题通常会对影响 UX 以外的部门的资源造成压力。

DesignOps可以帮助组织优化 UX 工作流程并提高设计效率。构建设计系统还可以帮助减少错误并缩短上市时间，同时通过加载更快的更简洁的用户界面改善用户体验。

5) 移动优先设计

适合移动设备的网站必须更轻，才能在智能手机上更快地加载。因此，采用移动优先的设计策略意味着设计师在保护环境的同时为用户创造价值。

6) 缩小 HTML 和 CSS 资源

缩小代码会删除不必要的空白，减小文件大小并提高页面速度。开发者还可以组合资源文件，让浏览器的请求更少。

有大量免费工具可用于缩小 HTML 和 CSS，包括用于代码编辑器和包管理器的插件。缩小 Javascript 稍微复杂一些，因此请让合格的开发人员来处理。

7) 托管

根据美国能源效率和可再生能源办公室的数据，数据中心占美国用电量的 2%。因此，切换到绿色网络主机提供商可以帮助减少能源消耗。

绿色网络基金会拥有 26 个国家/地区的 342 家绿色托管服务提供商的托管目录（截至 2021 年 12 月的数据正确）。绿色房东使用风能、太阳能和水力等可再生能源。在某些情况下，托管服务提供商会产生比他们需要的更多的绿色电力，并将其反馈到电网中。

您会很高兴地知道，包括 AWS、A2 Hosting、Firebase Hosting 和 Siteground 在内的许多知名企业都被列为美国的绿色托管服务提供商。

8）明智地选择字体

众所周知，字体会降低页面速度，尤其是自定义的自托管字体。考虑使用与所有浏览器兼容的 18 种网络安全字体之一来设计您的网站——这意味着浏览器不需要下载其他文件。

如果您使用的是自定义字体，请确保它是 WOFF 或 WOFF2 格式，以便浏览器可以读取和下载它。您还需要在字体堆栈中包含网络安全字体，否则如果浏览器无法处理 WOFF 文件，它将加载 New Times Roman。

开发人员还可以使用其他技巧来自定义字体，例如预加载和 CSS 优化。

9) 层次结构、导航和链接

层次结构和导航在帮助用户快速查找内容和完成任务方面发挥着至关重要的作用。设计人员应优先考虑页眉中的基本导航（最多 4-5 个）和页脚中的辅助链接。

层次结构帮助用户更快地识别重要内容并完成任务。视觉层次也是用户体验和网站可访问性的关键因素。

团队应定期对损坏的内部和外部链接进行网站审核，以确保用户永远不会因为死路 404 错误而浪费服务器请求。对内部链接使用 301 重定向，并为损坏的外部链接寻找新资源。

10) 使用更少的网页

每次新的页面访问都需要浏览器向服务器发送请求，服务器返回页面的内容和资源。您拥有的页面访问次数越多，服务器为提供内容而必须做的工作（和能源消耗）就越多。

设计师应该评估每个项目以确定如何减少或合并页面。对于大多数投资组合、登录页面、公司网站、本地企业、SaaS 和应用程序来说，单页设计通常就足够了，仅举几例。

单页设计有利于环境，并为移动设备上的访问者提供更好的用户体验，他们只需滚动即可找到所需的内容。