设计 v6

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适合您旅程每个阶段的云产品。立即开始使用 200 美元的免费积分!

我已经在过去一两个月里一直在捣鼓这个重新设计,并决定昨晚把它发布出来。我一直在使用它,感谢 Theme Switch 插件,但我必须在实际上线之前更改一些东西,所以我只是做了。和往常一样,这不是彻底的改革,更多的是一个更新。我称之为v5v6 因为我显然把上一个版本叫成v4v5,就随它去吧。(在我的本地,它是我的第 12 个版本!)

原因

  • 控制字体情况。我想在一种我喜欢的字体中建立“CSS-Tricks”的类型部分,并且它是一个更大的字体的家族。我选择了 Gotham Condensed,我专门为它购买了它,以扩展我的 Gotham 字体家族,这将在我很长一段时间内为我服务。网站上的标题使用的是 FF Tisa Web Pro,通过 TypeKit 提供。正文使用的是 Verdana。除了广告,我无法控制,这些是网站上使用的唯一 3 种字体,这是目标。(好吧,代码使用的是 Monaco,但这不算。)
  • 在主页上展示更多网站内容。主页现在还包括最新的 5 个代码片段和最新的视频教程,除了最新的 5 个帖子。
  • 不再有深色侧边栏。上一个设计的头号抱怨是真的很深的侧边栏,它在视觉上压倒了内容区域。我最终开始接受这种批评,所以我想让侧边栏不那么强烈。网站的外部现在也被“框起来”,这让我感觉更舒服,而不是之前所有的白色没有边框的中间部分。
  • 不要做任何太疯狂的事情。这只是一个更新。没有主要的新区域。没有导航更改。没有不同的 URL… 这仍然是它过去的样子。

考虑因素

  • 维护或提高广告价值。与上一个设计相比,没有更多或更少,但有些东西被重新排列了一下。我更喜欢这些位置。它们有更多的呼吸空间。
  • 放弃 IE 6。不幸的是,在上一个版本中,我对 IE 6 的支持有点马虎。这次我不想处理它。我不介意在客户网站和电子商务网站等地方支持 IE 6,但这个网站上的这个用户群非常小,我不在乎。对于 IE 6,我提供 Universal IE 6 CSS
  • TypeKit 字体在 Windows 上看起来有点糟糕,所以我只为非 IE 浏览器提供 TypeKit。这并不能解决 Windows + 非 IE 浏览器的問題,但我们会看看对此有什么反馈。

待办事项

  • 更新我的书架区域
  • 为论坛添加新的页脚
  • 重新思考越来越重要的存档页面
  • 在额外的 IE 6 样式表中添加一些调整,主要是关于搜索的调整
  • 理想情况下,遍历整个视频存档,重新制作更漂亮的缩略图,并将它们放在我的新系统中(只是一个内部的事情,我现在对所有内容使用自定义字段,并支持两个不同的系统,直到我可以重新审视这个问题)。
  • 看看我是否可以在 1024px 的分辨率下实现没有水平滚动。我为此做好了计划,但不知何故出了问题。我需要找出伸出来的那部分是什么,并试着把它收回来。
  • 继续调整——我已经有一些微型想法,需要着手进行。

为了后代