最新新闻:

设计选择如何改善网站的可持续性

时间:2021-01-18 16:28:51来源:

为了启动有关气候小组可持续网站建设的博客系列,让我们从如何配置设计元素开始。

我们已经确定了找到诸如此类的可持续网站建设的数据主导证据和最佳实践的难度。因此,我们做的第一件事(也许是我们做过的最重要的事情)是将这个项目设置为真正专注于减少网站的影响。

首先要向Manifesto团队提供有关数字产业如何以及在多大程度上影响环境的教育。通过在此背景下进行构建,可以更好地量化客户“进行讨论”的愿望。但是,在此初步阶段,这里的关键是不向构建团队提出任何规定。相反,我们创建了一个空间,他们可以在其中提问。这样,在可能的情况下,可以简化网站建设的每个步骤,以发现更可持续的选择。

使用设计突出行动

要建立一个可持续发展的网站,将自己置身于访客(或者在这种情况下为潜在的捐助者)的鞋子会有所帮助。通过绘制访问者使用网站的方式,可以更有效地塑造页面的结构和设计。

例如,我们在慈善机构希望网站上找到人们采取行动的地方。宣言使这些页面最吸引人。然后进行缩小,我们围绕这些焦点页面跟踪了访客的整个旅程。这样,我们可以收紧网站上不必要的漫长旅程,从而使访问者在网站上的停留时间超出了他们的需要。

在此设计过程中,我们在开发团队和设计团队之间建立了持续的沟通渠道。这意味着我们可以在构建网站时不断对其进行调整,以确保使用尽可能最简单的代码编写该网站。

通过图像增加价值,同时通过图标和插图减肥

图片是网站重量的最大贡献者,因此也是网站的发射量。因此,我们非常严格,仅使用增加真实价值的图像。在此过程中,我们学到的一个技巧是使用颜色和图标,它们可以独立于多余的图像。这样一来,您就可以避免外观过于裸露或过于精简的设计。

我们始终遵循一个总的规则,那就是:一个大图像对环境的影响要小于多个小图像。这使我们避免了过多的列表页面和大量图片的模块。我们甚至对页面可以容纳的图像数量引入了限制。我们通过在列表和显示其成员的表上包括分页(即将文档分为离散页面的能力)来实现的。

您也可以尝试尽量减少使用每个图标的影响。如果它们基于可扩展矢量图形(SVG)(一种可通过数学结构表示图像的格式)构建,则可以确保使用的是最小的图标文件大小。

该站点上线后,负责减少排放的责任从构建团队转移到了编辑团队。在我们的案例中,我们在上线之前与气候小组的内容创建者进行了培训,以帮助他们理解我们在设计中建立并执行的精神和方法。

Twitter分享按钮 Facebook分享按钮 pinterest分享按钮

聪明看视频

视频对页面重量的另一个重要贡献。因此,我们决定在可能的情况下,将图片方法也应用于网站上的视频。但是我们也走得更远,因为视频带来了更多的运动部件和不必要的排放机会。

除非您是Facebook用户,否则自动播放视频一直以来都是用户体验(UX)和数据使用“禁止”的用途。鉴于包括气候组织在内的大多数组织都拥有广泛的YouTube形象,因此,分解视频在页面上显示的影响对于任何可持续的网站构建都是至关重要的。

为了避开自动播放的陷阱,我们使图像看起来像视频缩略图。这样,站点访问者仍然可以知道视频的位置,并可以在闲暇时播放它们。

这意味着,直到与“伪造”视频进行交互之前,才加载真实视频。这似乎很明显,而且操作相对简单,但是除非您首先建立一种共享的思维方式,否则我们似乎不会发现像这样的小而轻松的工作,就像我们在本文开头提到的那样。

剥离字体

字体主要有两种不同类型:系统字体和网络字体。系统字体可以是Arial或Calibri,而Web字体将更加定制。系统字体更经济,因为大多数人的设备中已经包含了它们。

这意味着他们在访问您的站点时不必下载它,从而节省了带宽并减少了加载站点所需的请求数。然而,2017年排名前50万的网站中约有69%使用自定义字体。

宣言决定为Climate Group使用一种字体(当然是自定义字体)的三种不同粗细。这意味着只有三个字体文件,比大多数站点少得多。

为了让您有个想法,网站上大约有四到六个字体文件是“平均”,其中一个文件的平均大小约为40 KB。因此,当您考虑斜体和粗体变体时,可以为您使用的每种字体在初始页面加载中最多增加160 KB。

Twitter分享按钮 Facebook分享按钮 pinterest分享按钮

调暗以节省能源

至于背景色,我们从黑暗模式用户界面(UI)中汲取了灵感。那是因为暗模式消耗的能量更少。还已证明它可以抑制人眼中近视或近视的发展。因此,选择其他配色方案既有可持续的好处,也有健康的好处。

与背景相结合,我们还在整个站点上使用了尽可能多的深色元素,以最大程度地减少其功率输出。气候集团的品牌相对容易适应,其核心颜色是黑色,白色和红色。

结论:协作是关键

如果不建立团队可以共享,理解并做出同等贡献的连贯思维方式,就不可能实现这种可持续的网络构建。因为最终,该项目要求Manifesto重新思考和重新构想更传统的构建过程的每个步骤。

您可以选择效仿我们的方法,但这绝不是规定性的。我们的目标是在缺乏指导和最佳实践的空间中创建资源。尽管本篇文章侧重于构建的设计元素,但本系列文章的下一篇则探讨了可持续发展的技术方面。

声明:文章仅代表原作者观点,不代表本站立场;如有侵权、违规,可直接反馈本站,我们将会作修改或删除处理。

图文推荐

热点排行

精彩文章

热门推荐