设计 v7

Avatar of Chris Coyier
Chris Coyier

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

我这个周末发布了一个新设计!和往常一样,这是一个美学上的大改版(蓝色!)。我将介绍一下“为什么”,新的方面,以及一些新的技术。RSS 阅读器用户,您需要跳出来看看 =)。

现在,关于评论的一点说明: 我喜欢评论!如果你想把这个设计撕成碎片,请便。我有艺术学士学位,其中一部分就是在应得的时候被评论撕得粉碎。这让我们变得更好。我接受所有批评,如果我看到评论中有趋势或有人说的话引起了我的共鸣,我也愿意进行更改。也就是说,我不接受像“我更喜欢旧设计”这样的泛泛的负面评论。我甚至已经听到那些“对我失去尊重”的人的胡言乱语。所有这些只会伤害我的感情,反过来,让我对他们失去尊重。这类评论通常是出于恐惧驱使的谁动了我的奶酪反应,而不是经过深思熟虑的考虑。就像这个网站上的所有评论线程一样,这个线程也会被审核。我花了很多时间在这个网站上,这个设计反映了我认为在许多方面都有改进。请花时间让设计融入并考虑它,并在下面发表你的想法。谢谢 =)

为什么?

这不是那种最终出现在 CSS 画廊的设计。它上面有广告。它非常实用。它只是以一种(希望)很容易找到和理解的方式提供这个网站的内容类型。在这个新设计中,文章中正文的字体大小达到了相当大的 16px。我的视力很好,以前没有听到过关于可读性的重大投诉,但最近我发现自己会将网页放大几个档次,因为我发现大字体更容易快速阅读,理解力也更高。或者也许只是我想多了,我不知道。

我也有必要调整网站上的一些广告。我删除了一些我认为位置尴尬的区域。我添加了一些新的区域,并调整了其他区域。广告数量与以前大致相同,我只是觉得它现在整合得更好了。如果有任何人感兴趣,BuySellAds 上还有 开放的区域

速度也是一个因素。这个主题中的图片更少,这有助于提高速度。我尽力 精灵化 了尽可能多的东西。我的平均页面加载时间大约为 2 秒,这不算太快,但我认为对于一个有这么多内容的网站来说还算不错。一些最慢的部分是外部的,所以我们会看看那里会发生什么...

历史

为了持久性,我将我的旧设计存档保留在一个新的 设计历史 页面上。

新东西

  • 链接功能回来了!
  • 网站正在运行 WordPress 3.0.1
  • 该网站现在首次采用了流体宽度。它适合 1024px 的屏幕,没有水平滚动,并扩展到 1200px。范围不大。我最不喜欢流体宽度设计的一点是,文本的行长是唯一改变的地方。这里确实有行长变化,但它们被控制得很好,并且在需要的地方进行了一些细微的布局调整。
  • 帖子中现在有了新的 官方 Twitter 按钮。我一直对社交媒体按钮有点反感。例如,如果您是 Delicious 用户,您就会知道添加到浏览器的工具比网站上的链接好 10 倍。但是,1) 我有点喜欢这些按钮的工作方式 2) Twitter 是我最喜欢的社交网站,3) 我现在可以不再觉得我因为某种意识形态的立场而丢掉了潜在的流量。

移除的东西

  • 最新推文气泡消失了。这在过去的两三个设计中出现过,我现在已经厌倦了。我觉得很多时候只是看到我最新的推文,感觉很奇怪,很不合时宜。更重要的是,它加载很慢(我从未进行过任何缓存)。页脚中仍然有社交媒体链接(包括一些新的链接!)。
  • 很久以前,我允许人们通过 WordPress “注册”网站。这个功能很短命,因为它最终没有什么用处。大约有 1000 个注册用户,其中一半以上是垃圾邮件。我一直想删除这些用户来清理数据库。问题是,在 WordPress 中删除用户意味着你需要将他们的评论归属给其他人或删除它们。我不想删除可能很有价值的评论。所以...剩下一个通用的用户,叫做“旧注册用户”,他们的评论都归属在这个用户名下。有点糟糕,但这些都是几年前的东西,而且并没有那么多。

技术说明

在这个网站上,如果没有新技术,还有什么可以进行重新设计呢?

CSS3

  • 正在使用 CSS 三角形。主导航使用它们来帮助指示当前位置,投票问题气泡也使用它们。投票气泡甚至将两个三角形叠加在一起,以实现一种带有边框的三角形效果。

  • VOTE 部分有一个问题气泡,它使用渐变背景和圆角(许多其他元素也是如此)。

  • 侧边栏中用于帮助浏览本网站和其他网站的各种链接列表,有一个使用 CSS3 实现的链接轻微浮动效果。

  • PROPS 部分有一些小卡片,它们在 WebKit 浏览器中执行 3D 翻转效果。

  • 页脚右边的框也有一个动画效果,鼠标悬停时,有关该主题的信息会从下方向上滑动。

    如果您无法使用 WebKit 浏览器,您可以 查看屏幕截图。Safari 5 用户,您在使用页脚中的一些交互式内容时是否看到了很多“闪烁”和奇怪的闪光?Chrome 则没有问题。奇怪。

  • 有一个对 CSS 媒体查询 的少量使用,如果设计处于最宽状态,页脚会略微重新排列。

    侧边栏中的 125×125 广告也会通过 @media 查询进行一些随机排列。当设计处于最宽状态时,它们排列成 3×2,更窄则排列成 2×3。

  • 处理流体宽度的一部分意味着让多列设计利用百分比。这意味着这些列中的图片需要使用 img { max-width: 100%; },这样它们就可以根据需要随着列的大小进行缩小/放大。

我认为所有这些效果都是渐进增强,因为不支持任何特定功能的浏览器会回退到更简单的,但可接受的体验。例如,3D 翻转卡片在鼠标悬停时会立即显示其“背面”。

HTML5

  • 新的 DOCTYPE,使用新的元素等等。基本上,使用 HTML5 提供的简化和更语义化的元素感觉很好。我可能没有完全完美地使用所有新的元素。这可能会随着时间的推移而发展。
  • 视频页面(示例)现在使用 HTML5 <video> 标签来显示视频。它们将在支持 H.264 的 WebKit 浏览器中本地播放。不支持的浏览器将首先回退到 Silverlight,然后使用 mediaelement.js 回退到 Flash。无论使用哪种技术,UI 控件都保持一致。我本来想让视频流体宽度,但这方面有很多问题(我可能会发布相关内容)。特别好的是,这些新播放器(不需要预加载)的快进功能,旧播放器永远做不到。
  • 搜索表单现在实际上只是一个经过样式化的输入框,这意味着它不再存在我以前设计中基于图像的背景导致的奇怪行高问题。HTML5 在 WebKit 浏览器中通过 <input type=search results=5 placeholder=Search... name=s> 提供了这种外观和功能

    那个奇怪的轮廓突出显示是怎么回事?可能是 WebKit 的 bug。

  • 评论表单包含额外的 HTML5 表单功能。字段具有占位符值,并且还使用“required”属性,这意味着现代浏览器甚至不会尝试提交没有必填值的评论(这会导致一个难看的 WordPress 错误页面)。

jQuery

  • jQuery 在新设计中仍然可以执行以前的所有操作(例如 organic tabs,切换搜索限制器等),但代码已被重写以提高效率。例如,代码现在使用一个代码块处理 organic tabs 部分,而不是像以前一样将其拆分。
  • 主页对最近的文章使用了“淡出”效果。我希望它有助于消除一些重复的页面杂乱,同时增加一些视觉趣味。我通过使用绝对定位在每个帖子底部的一个:after 伪元素来实现它,该元素在悬停时会消失。但是,我想要淡出效果,而 CSS 尚未允许对伪元素进行过渡/动画。因此我使用了 jQuery。

  • 我让 jQuery 在页面上查找包含文本“View Demo”或“Download Files”的按钮,并进行一些 HTML 操作和样式调整。也许这不是理想的方法,但这使它与我的所有旧文章向后兼容,同时保持按钮标记非常简单。

  • 注意侧边栏有一个背景颜色,它从白色主内容区域的底部延伸到顶部。在这个设计的早期版本中,我将侧边栏设置为静态宽度,并使用伪列来模拟相等的高度。但最终我决定流体宽度侧边栏会更酷,这使得伪列无法实现。因此为了实现相等的高度,我使用了一个简单的调整大小函数,该函数测试主内容的高度,如果它大于侧边栏的高度,则将侧边栏放大以匹配。这有点笨拙……它必须在页面加载后 2 秒运行调整器,以考虑侧边栏中可能不在 DOM 就绪或窗口加载时的第三方内容。它还在窗口调整大小时运行它,以防重排影响情况。它不能完美地工作,而且需要在某些时候重新考虑。

即将推出

我正在研究一些关于论坛的想法,以使它们比现在更棒,所以请在接下来的几个月内关注它。