2/19/2025
2024年,一位新的CoffeeGeek即将到来。
2024年,一位新的CoffeeGeek即将到来。
新版本的CoffeeGeek网站——我们网站23年历史中的第七个版本——即将到来。我对此非常兴奋!我们为2024年的CoffeeGeek网站设计制定了四个明确的目标:提高网站的最佳可访问性标准;改进我们网站的响应式设计,以适应移动设备、平板电脑甚至超宽屏幕;大幅提高网站速度;构建核心功能,恢复我们网站上的社区功能。我将在稍后详细介绍这四个目标。但首先,作为一个历史爱好者,我必须先建立一些历史背景。
设计和编程选择 当我的五人小团队在2021年完全翻新CoffeeGeek网站时,我们面临了多项挑战,以将我们的网站提升到现代标准。2020年(当时决定更新我们的网站)时,移动设备占我们流量的近40%,但CoffeeGeek 2021年之前的版本在“移动友好性”方面几乎什么都没有。我们还决定从我们自己的内部CMS系统(称为WIPS,这是一个非常独特的系统)迁移到基于WordPress的网站(尽管高度定制)。这意味着我们失去了两个主要的社区功能:消费者产品评论和我们的论坛。
在那个全面翻新的过程中,我们学到了很多教训。例如,设计一个博客现在实际上非常简单:WordPress有数以千计的预设计“主题”,可以轻松修改以提供略带定制的外观,并且组织良好,几乎不需要设计或编码经验或专业知识。绝大多数博客网站都是这样做的。
我们并不想这么做。我们网站一直与众不同的一个因素是我们没有千篇一律的外观。而且……我们也不能这么做。CoffeeGeek拥有如此多样化的内容,需要其自己的风格、布局和结构。现成的解决方案根本不适合这个网站。
五大博客 此外,我们不仅仅是在设计一个“博客”网站。如果我们宽松地使用这个术语,CoffeeGeek就是五个非常复杂的“博客”结合在一起,形成一个流畅的互动。如今,咖啡领域的绝大多数网站都是这样:一个博客,使用标准的博客布局、结构、分类和菜单系统。一些网站只是现成的论坛软件,附带一个预建的博客组件。
CoffeeGeek有五个不同的组件,每个组件都在整个网站内作为其自己的“微型网站”运行,并且它们都必须相互协作。我们在2021年的解决方案是使用WordPress内置的帖子系统,但设计和编码了一个非常复杂的多层帖子系统,这样我们的评论、指南和观点部分各自都有自己的定制帖子引擎。然后我们必须确保所有这些元素在WordPress的动态内容工具中相互交流(在许多情况下,它们不会,因此我们必须定制构建解决方案)。即使是像多个作者为同一内容片段这样的看似简单的事情,也难以实现(这类事情并没有内置在WordPress中)。
简而言之,我们构建并编码了基础设施,包括我们从未能够解决的缺陷,然后开始着手设计。
设计工具 我们使用了一些高级工具,包括一个名为Elementor的WordPress的全面、压倒性的超级工具。坦白说,我们对Elementor及其所有高端设计工具都有些疯狂。它为我们提供了非常独特和先进的设计,包括很多令人惊叹的技巧,但它也使网站变得非常……庞大。它还导致我们在某些地方破坏了响应式设计,有时是在自动化过程中发生的,当后端组件自动更新时。
在2021版本的CoffeeGeek推出后,我通常会每月花费5-10个小时来修复损坏的设计细节。我已经这样做了三年。我们的网站也会变得越来越慢。我们会向它投入一些修复方案,比如更好的缓存系统、升级我们的私有服务器规格,但这只是一些修复和临时解决方案的组合。在那段时间里,我们还发生了一件事:我们的整体可访问性和响应式设计都急剧下降。这不能再继续下去了。
还有第三件事:我们为CoffeeGeek构建的复杂基础结构意味着我们无法恢复在2021年重新设计时失去的社区功能。这也是我们必须改变的事情之一。我们已经在2024年做到了这一点。
新的2024年CoffeeGeek 这是新2024年CoffeeGeek网站的前页设计;它在一个滑块中展示了五个最新的内容文章,在右侧的四个框中展示了我们主要部分的最新内容。它从移动设备到超宽显示屏都具有良好的缩放效果。
如果我要说我认为2024年重新设计最重要的东西是什么,那就是可访问性。我非常烦恼我们的网站在可访问性指标上得分很低。
可访问性 我们的目标是使2024年版本的这个网站在可访问性方面得分达到95或更高,这意味着幕后有很多工作要做。例如,我们数据库中的每张图片(有数千张)都需要适当的alt标签和视觉受损描述。在过去的60天里,我每晚都要花大约一个小时编辑一桶照片,以便在我们的数据库中添加这些信息。
响应式设计 也非常重要的是我们网站的响应式特性。这意味着它应该在你iPhone和iPad上看起来和你27英寸的Studio Display上一样好。或者你的34英寸超宽显示器。CoffeeGeek是模板驱动的,这意味着我们网站上的每个页面都是一个模板,数据库中的内容会根据需要流入其中。每个模板(总共有大约100个)都得到了完整的响应式设计,包括个别标题、文本块和按钮。这一次,我们还在为超宽显示屏进行设计,所以如果你在我们的网站上以全屏方式打开一个3400像素宽的显示器,它在那里看起来也会很棒。
真正的技巧是避免任何因各种后端更新而“损坏”的东西。为了实现这一点,我们正在使我们的布局系统现代化,采用弹性容器和网格来布局我们的内容。这不仅减轻了构建CoffeeGeek的代码,而且对响应式设计来说更加灵活。
网站速度 新的博客文章设计独特,但设计上也非常注重加载速度。
我们知道CoffeeGeek当前网站速度的原因:臃肿。这既来自功能过度的问题(使用了过多的设计插件),也来自像依赖Google Fonts和其他外部服务器调用以进行设计和网站功能这样的东西。
我们的2024年构建解决了这些问题。我们能够在全站范围内将设计插件减少约75%,找到更好的方法来仅依赖少数几个非常灵活且可定制的工具来保持我们网站独特而优雅的外观。如果有什么不同的话,我们的设计在2024年的构建中甚至更加复杂,但也更加“清新”、更新,并且完全独特。我们在2024年的设计选择中没有任何千篇一律的东西。
我们还减少了约85%的外部服务器调用。其中大部分来自托管我们自己的字体,并将我们的字体使用从18个系列减少到5个。我们甚至购买了一种相当独特的字体,用于我们未来的所有标题。如果你是Road Runner和Acme公司的粉丝,可能会觉得熟悉。
博客的着陆页突出显示我们最新的内容,并在页面的顶部快速列出我们所有的分类。每个部分在页面中都有更详细的介绍。
在迄今为止的测试中,我们最复杂的页面(如主页)在速度测试中的得分约为85到90。这是在没有服务器缓存或其他技巧的情况下。在我们的实际网站上,对同一页面投入了各种加速技巧,其得分勉强达到60。所以我们正在按照这个目标前进。
社区功能 最后但同样重要的是,我们为2024年构建的CoffeeGeek新基础设施意味着我们可以开始恢复我们的社区功能。这意味着消费者评论和论坛/社交网站组件将再次成为可能。这些将是一项重大的项目,但至少我们可以将它们纳入网站的功能中。
在2024年构建的CoffeeGeek推出时,我们将引入一个评论系统,用于每个新的内容文章、评论、教程、观点文章和博客文章。我们在过去一年中已经以试验性的方式在博客文章上推出这项服务,但将将其纳入未来的每个内容文章中。
还有一件事……(实际上有三件事!) 是的,还有更多。我们在2024年将为CoffeeGeek引入三个新的内容组件,并重新组织一个主要部分。
CoffeeGeek评论 我们的评论部分将进行重大翻新。我们将引入一种新的评论类型,称为快照评论。这些将取代我们目前在博客中拥有的“迷你评论”,并将它们移动到CoffeeGeek的正确位置。
我们还重新命名并重新定位了我们的快速评论,从现在起将它们称为完整评论。我将在即将推出的博客文章中详细介绍我们的评论系统。
CoffeeGeek指南 我们已经宣布了新的功能指南部分,并在2024年构建的CoffeeGeek中将对其进行一些改进。我们的指南部分最终将包含三个组件:教程、功能指南(单页指南)和详细指南,后者将是多页指南,类似于特定主题的迷你书籍。预计未来将有大量广泛、学术性的内容。
资源 在线上关于咖啡和浓缩咖啡的资源明显不足。什么是资源?例如,适当的FAQ、参考文献资源、制造商和网站列表等等。
这些资源之所以不足,是因为多年来,人们一直依赖搜索引擎来追踪这类事情。你想知道Rancilio的官方网站和地址吗?谷歌一下,对吧?
但正如我们所知,搜索引擎现在几乎完全商业化。你期望在搜索结果中看到的内容根本不会出现。搜索Rancilio网站,你将得到一桶供应商链接、赞助链接和SEO欺骗结果,在你找到你真正想要的东西之前。
我的目标是使CoffeeGeek资源部分成为你可能在某些在线搜索中期望找到的信息的分类。我们将为咖啡和浓缩咖啡的所有主要主题提供FAQ(尽可能避免意见),有一个适当的制造商和供应商列表(你尝试寻找一些新的中国制造商,或者找到Hario的官方网站吗?我们将帮助你做到这一点),以及你在探索优质咖啡和浓缩咖啡时可能寻求的其他信息。
CoffeeGeek 2024年推出 指南部分的着陆页 在前页的中部,我们在设计上变得更加简洁和清晰
我们永远不会在CoffeeGeek上做的事情:令人讨厌的弹出窗口。但我们都想让你订阅我们的时事通讯,所以我们正在在各个页面上给予它更多的突出显示。
所以你什么时候能看到新网站?仍然悬而未决。我们自去年8月以来一直在做这项工作,但真正加速是在2023年12月中旬。大部分真正困难的工作已经完成:结构、底盘和编程已经完成。数据库导入基本完成。设计已经100%锁定,我们已经完成了大约60%的模板构建。
剩下的是将我们完全定制的所有内容(基本上是每篇评论和教程)迁移过来。所有这些都必须逐篇手动完成。这需要大约一个月的时间。我个人的最后期限是3月1日,但我希望我们能在那时之前完成。请保持关注!