设计 v11

我稍微重新设计了这个网站。它不是一个巨大的重新思考，也没有像 v10 那样大规模的改动，但它足够不同，所以我称之为 v11。

其中一些看起来像这样

更少

下载部分消失了（也称为“演示”）。虽然它获得了大量的流量，但我从未维护它，并且演示也开始过时了。我生活在一个充满演示的世界里，那个地方现在是 CodePen。

图库消失了。虽然我很喜欢它，但经验告诉我，我更新它的频率不够高，不值得保留。我仍然拥有一个庞大的截图档案，我痴迷地捕捉它们，但在我能找到一种更流畅的方式发布它们（并使其响应式）之前，我将让它保持原样。

搜索网站特定部分的功能消失了。所有这些功能都只是链接到不同的 Google 自定义搜索引擎，这些引擎专门受子目录限制。默认搜索就足够了。

徽标现在只是一个简单的单色 Gotham Rounded。我仍然认为星号是 CSS-Tricks 的徽标标记，但我无法找到一种好的方法来整合它。我相信它总有一天会回来。

页脚中的一系列链接消失了。只保留了重要的链接。

主页（以及网站的其余部分）是两列而不是三列。

更简单的感觉在这里更好。

更多

虽然在某些方面更少，但在主页上也显示了更多的帖子。这是一件如此轻量级且容易做的事情，不妨试试。

速度

速度始终是这里的一个目标，就像在任何网站上一样。

使用的图标更少了。对于剩下的图标，我放弃了图标字体，转而使用内联的 <svg> 图标系统，这意味着零请求。

剩下的图片只有少数，我计划尽可能地去除它们。

良好的主页加载通常在 1 秒以内，这是一个不错的状态。我计划继续努力。我认为我还可以合并或删除一些资源。

在有很多评论的页面上，很明显 Gravatar 是最慢的部分，主要是因为它可能是一大堆单独的请求。我想开始尝试延迟加载它们。我不认为我会放弃它们；我一直很喜欢在评论和其他用户创作的内容旁边显示头像。

字体

CSS-TRICKS 徽标字体为 Gotham Rounded。喜欢它。

虽然我使用了 H&FJ Cloud Typography 字体，但我最初为正文字体选择了 Ideal Sans。我也很喜欢它，但很快收到很多投诉，说它在经典的 Window/Chrome 场景下渲染效果不佳。我可以尝试一些东西，但字体加载速度也比较慢，所以我决定放弃 Ideal Sans，并使用（倒吸一口凉气）非自定义字体。就是普通的 Lucida Grande。我不喜欢它，但它速度快，而且在任何地方都能很好地渲染。

外观

总的来说，更好的美学是另一个升级——至少在我看来是这样。我一直很喜欢明亮、有趣的颜色，尤其是在深色背景下。这是我（拙劣地）从 Kevin Hale 那里学到的东西，你可以从他的幻灯片中看到 像这样

定义的颜色很少，我尽可能地在逻辑系统中反复使用它们。我认为感觉相当连贯。

一个相当大的美学变化是大号标题

我一直很喜欢——当一篇文章以如此清晰的方式向你问候时。这是我针对此设计的最后一刻的改变，而新推出的 nGen Works 博客 在我看到他们的标题后，让我下定决心。

验证

Dribbble 实际上验证了整个设计的理念。我在那里发布了一个 简单的示例，它获得了如此多的积极反馈，我决定继续进行。

在我撰写本文时，发布已经大约一周了，该设计在很大程度上得到了积极的评价。这确实是第一次=）。

可调整大小的 CodePen 嵌入

我希望在本轮中为网站添加更多功能，但不幸的是，我没有像希望的那样实现那么多功能。我实现的一件事是使所有 CodePen 嵌入都可调整大小。

由于该功能实际上仅在大型屏幕上才有用，因此我做了非常基本的处理，从我的全局 JavaScript 中加载它。

// Cut mustard
if ($(window).width() > 1000) {
  $.getScript(__templatePath + "/js/min/mega-mustard-ck.js");
}

我在 CodePen 博客上写了它。

论坛升级

• 当您在主题中被 @username 提及时，您将收到电子邮件通知。因此，您会知道是否有人在谈论您或特别试图引起您的注意。您也可以在评论后订阅主题（就像您在博客评论中一样），如果您想随时了解所有后续帖子。
• 如果您的帖子被识别为垃圾邮件，您将收到电子邮件通知，其中包含有关通知谁的信息，以便它不会丢失在历史的长河中。
• 《精选和隐藏评论》的概念已应用于论坛。我自己、任何版主以及发起该主题的人都有链接来精选和隐藏回复。我希望这能鼓励更好的答案。
  

  

• 对于论坛的常规访客，您可能会欣赏新的 所有主题页面，该页面显示了所有子论坛中最新活动。
• Markdown 已 进入 Jetpack，因此我无需再使用单独的插件，现在可以使用它了。通过 Justin Sainton 为我定制的插件，Jetpack-markdown 用于论坛和博客评论，但不适用于博客本身（出于我的遗留原因）。我还用博客评论中的预览选项卡替换了实时评论预览。这样做的好处在于，它是由服务器渲染的真正实时预览，因此它不像以前那样使用客户端库来伪造它。
• 在 v10 中，我从未完全完成论坛的响应式设计。在 v11 中应该会好很多，尽管还没有完美。

历史

我已将 v11 添加到本站点上绝对令人尴尬的设计历史页面。

问题

还有一些事情我正在解决。如果您发现错误，确保我能够看到的最佳方法是发送消息 - 非常感谢。