我这个周末发布了一个新设计!和往常一样,这是一个美学上的大改版(蓝色!)。我将介绍一下“为什么”,新的方面,以及一些新的技术。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 就绪或窗口加载时的第三方内容。它还在窗口调整大小时运行它,以防重排影响情况。它不能完美地工作,而且需要在某些时候重新考虑。
即将推出
我正在研究一些关于论坛的想法,以使它们比现在更棒,所以请在接下来的几个月内关注它。
还不错,但是去掉列表页的淡出。
淡出背后的理论是,除了可能具有视觉上的趣味性和点击显示内容的诱因外,它还可以消除重复的设计元素同时显示。
阅读更多 →
阅读更多 →
阅读更多 →
阅读更多 →
阅读更多 →
……全部叠放在一起会让人感觉杂乱。这个想法来自我在一次会议上听到的关于 iPhone 应用设计的演讲,其中一位演讲者没有使用重复的 UI 控件。也许在网络上我们有更多空间可以避免这种情况,但我现在只是尝试一下。如果足够多的人讨厌它(经过一段时间),可以重新考虑。
我理解你对淡出效果的理由,我认为它有效。我认为如果它不是淡出到无,而是淡出到几乎无(例如 8% 或 10% 的不透明度),那就更好了。这样一来,它在浏览页面时仍然处于较低的层次结构中,但是从无到有的淡入淡出比完全不淡出更明显(可能是因为眼睛会被运动吸引,因此运动越少(淡出越少)越不分散注意力)。对不起,如果这没有意义。
……所有过渡在第一次看到它们时都很迷人,我浪费了 5 分钟玩所有新动画。
虽然我理解这个想法,而且我认为它适合某些网站,但我发现淡出效果很烦人。
话虽如此,我对你的新设计有良好的第一印象,尽管需要一些时间才能适应(第一次看到它的时候,我以为我点击了错误的书签)。
我喜欢淡出的视觉效果,对我来说,它们似乎与 CSS Tricks 的“历史”相关……这难道不是某种修改版本的淡出文本效果,这种效果最初让 CSS Tricks 变得很流行吗?
我同意 Steven 的观点,淡出到 15-10% 会很有趣,即使在不淡出时它们也只有 80% 左右,但它们从无处冒出来的事实有点分散注意力,但没什么大不了的。我真的很喜欢新设计,比 v6 好多了。虽然 v5 也非常棒。干得好!
我同意。
我喜欢它。更简洁。我唯一想要去掉的是首页上文章页脚的淡出效果。这只是我的意见。
……尽管之前的版本也很棒。
在糟糕的旧 IE8 中降级良好。
简洁干净——我也不太关心淡出。
我不喜欢评论你的设计或网站。它很有创意,只要你喜欢它,那就是最重要的。
投票问题气泡在 Chrome 中显示效果不佳。
重新讨论淡出效果。有什么意义?它没有节省任何空间。
也许如果我长时间悬停在那里,它应该打开故事的其余内容,或者做点什么。否则它对页面没有任何帮助。
正如 suprsidr 提到的,Chrome 中的投票气泡的盒子阴影似乎忽略了圆角,这会突出显示。
除此之外,Chris,我很喜欢新外观,一开始我以为所有那些酷炫的动画都是 jQuery,我迫不及待地想要开始在这个级别上玩转 CSS3!
“提交评论”按钮也是受害者,虽然没那么明显。直到我发布了上一条评论才注意到它。
在主页上将鼠标悬停在帖子上的时候,向右滑动的星星上也存在着相同的有色背景问题。
到目前为止,只有 Chrome 中存在这个问题,Mac 和 PC 上都存在。
同意。投票气泡需要整理一下。
新设计非常简洁,空间很大。灰色很柔和,对眼睛很友好,非常适合阅读,而且肯定达到了专注于内容的目标。
如果说缺点的话,我认为网站失去了一些个性。我一直是您网站的忠实读者,从一开始就关注它。每个版本都有明显的品牌,并表达了您的风格。这个版本只是感觉过于简洁。
无论如何,我仍然喜欢您的内容。恭喜新设计!
^__^
它感觉简洁,我很喜欢。我唯一注意到的是,我觉得它有点难“扫描”。不知道是什么原因,但我经常抽出时间查看网站,感觉我需要花更多时间在文本中搜索感兴趣的内容。也许这是您的故意设计 :)
现在主页上实际上有更多内容,因此您的快速扫描能力可能只是暂时的,因为您正在适应新的布局。告诉我随着时间的推移,您对此的感受。感谢您的反馈!
我唯一的批评是,文字感觉有点紧凑,周围没有太多空白。在我看来,版本 5 在这方面感觉最开放,最不拥挤。
16px 的字体大小很棒!
这篇文章关于网络排版的文章已经很老了,但我非常喜欢它:100e2r
澄清一下,我认为紧凑的文字影响了“可扫描性”。
我和前面的评论者一样喜欢它。它简洁易读。
和上面一些评论者一样,我对这个淡出效果也不是很喜欢,但每个人口味不同。
在 Win7 + Chrome 上,“投票”气泡存在问题,它有灰色边框,帖子标题看起来也有些卡顿,同样是在 Win7 + Chrome 上。
嘿,伙计!
我喜欢新的布局,看起来很棒。超级干净……而且新的信息架构方法绝对是一个改进(之前的布局也很棒,但这一个更好)。
就批评而言(我知道这有点吹毛求疵)……我同意上面那些说去掉淡出效果的人。它是一个有趣的特效,但总体而言,它带来的干扰大于帮助。
除了这个……我很喜欢!
(哦,还有页脚上的 CSS3 过渡效果……超级酷。比 JS 动画响应快得多)
我喜欢新的设计,但文本长度有些问题。
前几段文字在灰色侧边栏下方继续延伸。这可能是由 Adblock 造成的,但由于它也出现在“探索”部分下方,所以可能不是。而且,它也出现在评论中。
总之,一张图片胜过千言万语。
图片,图片
嘿,Chris,更新很棒!
我喜欢整体设计,特别是页脚中的“我为……工作”等框,效果很好。
我唯一看到的小问题(可能是上面那篇帖子提到的“难以快速浏览页面”的原因)是标题级别的大小都一样,如果子标题稍微小一点,这样就能“快速浏览各个部分”,也许我疯了,只是我的眼睛告诉我这样更好!
很棒的网站,我喜欢在这里阅读文章,谢谢,伙计!
我喜欢它,感觉不那么杂乱了。
搜索提交和投票问题按钮在 Chrome - Ubuntu 中显示不正常。角落里有一个背景问题。
再投一票,去掉淡出效果……总体而言,设计非常干净。
一些小问题
在“发表评论”部分,存在一些对齐问题(使用 Win7 上的 Chrome)。
橙色的使用似乎有点格格不入。在我看来,它 irgendwie 不适合。
我真的很喜欢页脚,只是我想换一张图片。
以前从未注意到,但我正在寻找一种方法来查看以前的文章。我知道我可以访问档案,但能够回溯时间查看会很不错。
投票部分的文字气泡有点……嗯……看一下。圆角有问题。主区域的蓝色按钮也是一样。
只是我的意见……
致敬
是的,我也遇到了这个错误。
发表评论错误
我认为这个应该已经修复了。问题是我把 Gravatar 放在了字段之间。这并非有意,我本想将其删除。感谢您的截图!
没问题。:)
我更喜欢这个版本,比之前的版本好多了,但我必须再投一票反对文章列表上的淡出效果。我认为它实际上降低了列表项的清晰度,而且(由于你选择了浅灰色和蓝色)它的褪色效果减弱了整体主题的力量。我会把它与侧边栏对比,侧边栏上的内容很大,很醒目,而且定义清晰。
我喜欢页脚——而且那些 Webkit 效果很酷。也许也可以在页眉上花点心思?那里的东西好像有点乱七八糟……
总之,这就是我的两分钱。它比我能做到的任何东西都要好,所以你永远可以做到!;)
所有的动画和“最近文章上的淡出效果”都很棒,但“去”和“提交评论”按钮的样式让人想起 Web 2.0 之前的样式,简而言之:你可以做得更好,尤其是一些微妙的渐变。此外,选项卡的样式对我来说有点太单调了。
感觉非常干净、精致。我喜欢细节,比如翻转和动画,而且我喜欢主页上的淡入效果,无论如何它都值这个价。唯一让我注意到的就是选项卡。左边的圆角而右边没有,让我有点眯着眼睛看,最后一个缺口也是如此(看起来那里应该有一个选项卡,但实际上没有)。
Chris,
我实际上很喜欢淡出效果。我从未真正喜欢(即使在我的网站上)列表页面上每篇文章末尾的“阅读更多”链接。
很棒的东西——我喜欢新的设计和那些小小的 CSS3 增强功能!
当我第一次浏览网站时,我真的不喜欢它的外观,它太方正了,而且因为蓝色和灰色,看起来像医院。然后我意识到是在 IE 中看的……所以我启动了 Chrome,我的天哪。很棒的外观,我立刻就喜欢上了。感觉就像在看一个完全不同的设计。
对于每个人都在批评你的淡出文章的事情,就保留它吧。它给人一种惊艳的感觉,而且很有趣,我同意它可能令人困惑,而且有点无用,但所有访问该网站的人要么是开发者,要么是设计师,他们知道如何浏览网站。
继续努力!
我想说这是一个干净的布局,但对我来说,它可能缺乏你之前几个设计的深度和“哇”因素……抱歉 :( 这个设计感觉很平淡,过于简单。顶部选项卡中的文字看起来有点拉伸。页脚很棒,而且我喜欢你在这个版本中使用的一些酷炫的技术。
对我来说,无论这个网站长什么样,我都会继续访问,因为你的内容很棒,你真的帮助了我自己的设计项目,尤其是 WordPress 项目。继续努力吧!!!
我同意,这个设计没有给我之前两次设计变更带来同样的反应。它看起来有点太……平淡,没有更好的词语来形容。
总而言之,这是一个很棒的新外观和感觉。我只注意到,在 IE7 中查看评论时存在问题。评论作者信息似乎被推到了某个图层的左侧。我为你截了一些图。
IE7
http://pd.alphaready.com/ie7.jpg
IE8
http://pd.alphaready.com/ie8.jpg
我喜欢淡出效果。我同意你的理论,它可以避免页面过于重复。留白是你的朋友!每篇文章周围的留白也有助于在视觉上将它们分开,并使页面整体看起来干净。它在 iPhone 上看起来也不错。干得好,Chris。
留白的论点很好——但尝试在 Firebug 中去掉白化 PNG,并将“post”div 的边距增加到 35 或 40。留白相同,但你是否觉得它给人的印象更强烈、更清晰,而且更容易阅读?
Chris,
我真的很喜欢新的设计。我理解有些人说它失去了一些“品牌”(我喜欢橙色),但我认为你真正的品牌是内容的质量以及无论技能水平如何,内容的可访问性。而且,我认为这种新设计有利于这两点。它干净、简单、实用(正如你所说),而且经过深思熟虑(一如既往)。干得好。
我喜欢新的设计,并期待着适应新的外观和布局。
我注意到 BuySellAds.com 的广告似乎重复了。
继续努力!
我最近才发现你的网站,大约两个月前。我已经习惯了你的旧设计,所以那天我去 CSS-Tricks 访问时,我感到很惊讶。我的第一个想法是你的网站下线了。
然后我发现所有精彩的内容都在那里。从那以后我一直在访问你的网站,现在我可以说,我已经习惯了你的新设计。我从你的文章和屏幕录像中学习了很多东西,所以记住一点,我永远,永远不会失去对你的尊重。
恭喜你的网站,恭喜你的新设计,也恭喜你成为我们所有人的好伙伴。
请原谅我的英语不好。
P.S. 为什么我不能通过点击最大化图标来最大化你的视频?我必须点击“全屏显示”文本。
我使用的是最新版本的 Firefox。
它实际上看起来更井然有序,更干净,我喜欢它。
关于侧边栏,你说不可能,我几年前做过一个网站,用百分比定位背景实现流体式伪列布局 (www.icad.com.ve),也许对你来说会有用。
我看到了一些缺陷,在搜索框下方,侧边栏有一个方形角,位于圆形蓝色角的顶部,看起来很奇怪(在其他页面上甚至会产生 1 像素的间隙)。你底部图片不应该有下边距,投票气泡的三角形,它在气泡外面。(FF Mac)。
我的第一印象是“我的天啊,发生了什么!?”,但几秒钟后我注意到了一些改进,现在我甚至不记得旧版本了 :P。
干得不错。
我不得不说我很喜欢,我认为标题字体绝对很漂亮,网站的整体感觉也让人感到轻松和干净。我不得不承认首页的淡入效果,我不知道它怎么了,但我就是觉得它和网站的其他部分不搭。
我似乎无法使用最新版本的 Safari 提交评论。不得不启动 Firefox,我通常不喜欢在家里这样做。
还有我想说的评论
喜欢!有一个拼写错误让我分心:应该是“quandary”,而不是“quandry”。抱歉,我似乎永远无法抑制我内心的校对员!
我要走俗套的路,直接说你是个牛人 :) 喜欢这个网站和新设计。淡入效果有点奇怪,但它确实让我注意到更多的东西。再次感谢!
嗨,我不评论图形,因为这是个人品味的问题。但是
1/ 页面无效,是的,没有必要因为有效性而自慰,但这里的一些问题只是不必要的 (http://validator.nu/?doc=https://css-tricks.org.cn/design-v7/&showsource=yes)
2/ 你可以用 HTML5 做更多的事情,我建议使用 article 元素来表示文章,header 和 footer 元素来指定文章内的部分(在列表和单篇文章显示中)。Section 元素用于页面部分(评论部分、侧边栏部分等)。这里还有太多 div 元素了 :)
1) 我修复了大部分验证错误,谢谢!剩下的唯一错误是关于 results 属性的,我不关心它。虽然我注意到它在最新版本的 WebKit 上运行得不好,所以我可能会放弃它。
2) 同意 HTML5。我做了很多过渡,但需要使用更多的语义元素。正如我在上面提到的,这将随着时间的推移而发生。
你可以用“data-results”属性替换“results”属性,它们是有效的 HTML5:http://html5doctor.com/html5-custom-data-attributes/
我最近开始通过 RSS 阅读你的文章,所以我从未真正见过旧的设计,但我认为这个设计适合你提供的这种内容。看起来很棒!
我注意到自己也使用更大的字体,我认为这是因为屏幕分辨率不断提高,导致文本更小。5 年前,16 像素的字体可能对于你的主要文本来说太大了,但在今天的显示器上,更大的字体才是预期。
这并不糟糕,但我认为档案页面中的每个设计都比它好。
当我第一次看到新风格的时候,我觉得它看起来有点奇怪,现在我已经看了几次,它已经深深地印入我的脑海。增大的字体大小对我很有帮助,因为我的视力很差,真的非常喜欢它的简洁!
干得好 Chris,我认为新设计是一个很大的改进,我真的很喜欢淡入效果。我认为它在减少混乱和重复方面做得很好,看起来很锐利。
如果有的话,我唯一要说的问题是最新文章的标题悬停效果非常微妙,在我的屏幕上很难分辨出来。
“Roll”小部件很棒,现在 WordPress 已经开始删除对博客的引用,他们应该完全像这样缩减 Blogroll。
按钮圆角似乎仍然存在问题:在语音气泡和蓝色按钮周围有直角
除此之外,我喜欢渐进式增强和 HTML5/CSS3 内容!
缺点
虽然网站在 FF 中看起来很棒,并且在 Chrome 中有很棒的过渡效果,但在 FF 中看起来比 Chrome 好。
搜索框、按钮和圆角在 Chrome 中都乱七八糟。它们都有一个背景颜色,让它们看起来像 IE6 使用 PNG,而没有 IEPNGFix。
我也属于认为当您将鼠标悬停在按钮上时,您应该有一个指针鼠标图标来指示您可以点击它。你的鼠标光标在悬停时是一个箭头。
在 props 部分,我认为整个块应该是可点击的,而不仅仅是链接文本。你可以用 jQuery 快速做到这一点:.click(function(){ window.location = $(this).find('a').attr('href');
优点
我喜欢标题的蓝色和极简主义设计,它真的可以让你更快地看到内容,滚动更少 = 更多内容在“折痕”上方。
我喜欢新的像素化标志。
我喜欢页脚的背景颜色与侧边栏和标题相同。
星号现在表示:“本网站可能包含也可能不包含任何实际的 CSS 或技巧。”这太棒了。我认为我喜欢它超过了我的预期。
哇。你真的在淡入效果上下了功夫。我个人很喜欢它。它确实实现了你的目标。减少混乱,而且它足够吸引我,让我想要悬停和点击。
我最喜欢的更新是流体布局。我很想了解更多关于如何调整侧边栏高度的信息。
一开始,我的反应是“哦不,他改变了?为什么?”,但是,作为一名网页设计师,我学到了一些东西,那就是离开一个设计一天,然后重新审视它,看看你是否仍然喜欢它。我做到了,而且我确实喜欢它。
非常干净,一如既往地经过深思熟虑。我绝对会去掉文本中的淡入效果。不知道背后是否有原因,但从视觉上我发现它很烦人。
最后的想法……我喜欢它的简洁,但我感觉它缺少了一些亮点。我怀念之前网站中的一些微妙的喷枪效果、轻微的立体感和温暖的色块。
总的来说,我一直很喜欢你在这个网站上的工作以及对细节的精心考虑。我喜欢这个版本,只是觉得它需要做一些细微的调整。
不适合 CSS 图库的这种设计?也许吧……但我真的很喜欢这个新设计,是我最喜欢的版本之一。简洁是我所喜欢的!
只有一件事:为什么在文章列表之后没有“更早的文章”链接?
正如我在一条推文中所说,我喜欢底部,讨厌顶部。
页脚很完美,比上一次的更改好多了。CSS 悬停效果在右边非常漂亮。
然而,网站顶部看起来平淡无奇。有一个很大的灰色区域。标签是我的主要障碍。IMO,它们看起来很糟糕。淡蓝色的颜色,和下一个标签融为一体。
网站的其他部分看起来很棒,但在 Chrome 上有一个投票气泡的 bug——角落的透明度不起作用。
我希望你能理解我的意思。如果需要的话,请随时要求进一步的澄清——我知道这有点像“笔记”。
总的来说,感谢你不断更新 CSS-Tricks 的设计——它让体验焕然一新。还有“* 本网站可能包含也可能不包含任何实际的 CSS 或技巧”这句话让我忍俊不禁。
谢谢,
读完你的理由后,我理解了所做的一些更改。
我现在唯一真正的问题是……当我去网站寻找编码方面的帮助时,我的第一印象总是网站的外观,就像任何网站一样,说真的。网站背后的家伙可能是一个编码天才(在我阅读这个博客的时间里,你确实符合这个标准),但如果他的网站对我不美观,我就会完全不加思索地忽略它。我很想知道你的新设计是否会减少新读者注册你的 RSS 订阅数量。你不会失去任何读者,我不认为,但你可能获得的更少。
希望这符合你的评论指南——不想让你不高兴。
但继续你的文章吧!
Paul
嘿 Chris,
我是那些第一眼不喜欢你的网站的人,如果你觉得我的任何批评不公正,请随意用不赞同的手指指着我,但我对网站有一些评论
1. 首先,页脚(没错,确实是第一个)非常棒,你决定使用“Html 5”和“CSS 3”的新效果,这对我们所有酷炫的 WebKit/Gecko 用户来说很棒。也喜欢班卓琴(是它吗?),还有页脚中的信息。
对媒体查询的称赞!
2. Chrome 在某些 CSS 3 内容上存在这个奇怪的问题,它在显示方面远远落后于 Safari。这确实是 Google 的错——但我认为你应该知道。
3. 我个人认为文本太大(也许衬线字体更适合这个尺寸?),而且主内容的空间可能有点大。再次强调,因为这只是我的个人观点,也许其他人觉得这样更好。
这就是它的全部意义所在!
嘿 Chris,
我喜欢新的设计,唯一让我有点困扰的是首页每篇文章预览的文字颜色太浅。
我不知道为什么,但它看起来不太适合网站。让用户必须悬停才能阅读更多内容也不好的做法。
只是我的建议。
我知道你因为列表页面的淡出效果收到了很多批评,但我真的很喜欢它。我关注的所有 WordPress 或其他“博客”网站最终都会出现在我的 RSS 阅读器中,因为我发现真正的网站很难阅读。我受不了每篇文章后的“阅读更多”按钮,以及所有的杂乱无章。我认为你在列表页面上很好地融入了淡出效果。它允许用户轻松地阅读每篇文章的开头。我可能会直接访问网站来阅读你的文章了。
网站的其他部分也是一样的。你自己也说了,它非常实用,这里没有什么错。我们来这里是为了你的精彩内容,不需要被大量的干扰因素分散注意力。我认为你将所有广告和其他内容都以一种很好的组织方式整合到了一起,让用户专注于重要的内容。干得好。
我似乎是目前唯一一个喜欢文章列表淡出效果的人,但它确实让文章分割开来,更方便我浏览。很聪明!:)
新设计真的越来越吸引我了,我越看越喜欢它。目前我唯一不喜欢的是蓝色按钮和搜索输入框。它们与网站其他部分格格不入。
很喜欢重新设计。不知道有没有人提出过这个建议,但 CSS3 的
display: table;
和display: table-cell;
可以解决你关于侧边栏高度等问题。你的 CSS 应该像这样然后你只需要使用条件语句在不支持该功能的浏览器中使用 JavaScript 技术。
我试过这个!结果遇到了一堆问题。我甚至不记得它们都是什么了。其中一个问题是,我想将侧边栏向上拉一点,使其与导航栏略微重叠,但出现了奇怪的情况。另一个问题是缺少 IE7 支持。我还需要另一个包装元素才能像表格行一样工作。总之,我可能会在尝试完其他一些选项后,再尝试使用这种方法。
嗨,Chris,
页脚很有趣。感谢你增大了文字大小!对于我们这些整天都在网上的人来说,这真的很有帮助!
我唯一的批评是,我不太喜欢蓝色。它让整个网站看起来更冷,有点像临床的。我认为这与你的个性和朴实无华的风格不一致。链接中的蓝色在柔和的灰色上也很难看清楚。我认为稍微深一点的蓝色,带一点橙色,会让它更容易看清楚,也更符合你标志性的橙色。
(抱歉我混淆了颜色,我还是把混合颜色当作实际的颜料来理解,你知道的,加入互补色来降低饱和度等等!)
我刚刚想到,不用两个 div 来创建投票的语音气泡,你可以直接使用
box-shadow: 1px 1px 0 #yourcolour
我还没有测试过,但我认为它可以达到相同的效果。
嘿,Chris,我喜欢重新设计的走向。我认为以前的版本感觉像个人网站,而这个版本感觉更大(而且确实是),更符合 Smashing Magazine 的风格,感觉更专业。
作为一项批评,这个设计感觉有点不完整。我知道你想减少图片的使用,我同意。但是我认为导航可以做得更完善。它有点像原型,或者说有点不完整。我总是发现最难设计的是导航栏,但我认为你的导航栏可以更突出一点,你知道我的意思吗?
就我个人而言,我喜欢文章的淡出效果,并且同意它隐藏了不必要的文本,直到你与该文章交互。我希望看到与该文章相关的图片缩略图,这样可以增加一些趣味性,但就像你说的,你希望它很快。
总的来说,我很喜欢。更简洁、更快、更智能、更高效。我只能想象将所有信息整合到一起,使其以整洁一致的方式显示出来是多么困难。
我认为蓝色与橙色对比太强烈。从视觉上看,这种对比就像冰沙带来的脑冻一样。我认为蓝色太多了,因为它太抢眼。也许可以使用更多像黄色这样的火色。灰色(灰色?)会让它更柔和一点,我真的很喜欢班卓琴的照片。
但这可能只是因为我在听你的 Grooveshark 页面,我喜欢橙色、黄色、沙滩主题。
我想念页脚中指向你其他网站的链接,DigWP 和 Script & Style。
新的 JavaScript 代码对于 UI 来说太棒了。我对 3D 翻转效果非常好奇。
每次访问 CSS Tricks 时,我的硬盘都会高速运转,这是有原因的吗?
感谢你听取我的意见。
新设计在 IE6 中崩溃得很严重(至少在 IETester 中是这样)。你是否已经决定放弃 IE6?你的数据显示 IE6 用户的比例是多少?我想你应该有很多来自国外的流量,而且我认为 IE6 在东南亚仍然很流行。
是的,我现在完全忽略了 IE6。唯一重要的数据是这个网站的数据,我的 IE6 用户比例不到 1%,而且我敢肯定其中一部分人是故意使用旧浏览器访问网站,只是为了看看 =)
在之前的设计中,我使用了通用 IE6 CSS,我可能会回到那个方案,还没有走到那一步。
我不建议你费心去兼容 IE6。毕竟,你的文章讨论的是现代的设计方法。IE6 多年前就应该消亡了,但它仍然存在,拖着大家后退。我认为你是对的,大部分 IE6 用户可能只是好奇的设计师,想知道你是否仍然提供 IE6 的功能体验。
我都很喜欢,很乐意接受一个人的设计,尤其是当你像你一样投入了很多思考的时候。
16px 的字体大小非常适合,阅读起来很舒服,看起来比例很协调,非常合理。
配色方案明亮通透,阅读内容时没有感到任何压力。
广告清晰简洁,如果我想要点击广告,我会选择在 css-tricks.com 上点击。
我很高兴你重新设计了页脚,它一直是我脑海中最拥挤的部分。
首页上较小的摘录更合适。与之前的设计相比,你好像试图塞进去太多内容。至少对我来说,现在的呼吸空间非常完美。
评论很整洁。
我现在就想到这些了。
关于淡出效果,在最新文章部分
效果不错,做得很好,我喜欢。
不过,它可能会让人觉得文章标题是同一篇文章的一部分。
我认为,它可能缺少一个 Chris Coyier 风格的橙色“hr”,或者是一些边框,或者其他任何可以帮助区分文章块的东西,一眼就能看出来。
另外,我希望标题上有一个悬停效果。或者一个活动效果?
谢谢,2010 年的设计很棒。巨大的页脚图片完全超越了之前的版本,太棒了!
期待 v8!:p (只是开玩笑)
我认为,我同意其他人的观点,即首页淡出功能理论上很好,但在实践中效果不佳。对我来说,我希望看到一些更明显地分割文章的东西。现在它只是淡出到白色,然后是下一个标题,它并没有很好地分割。我发现我的眼睛会自动地从一个帖子中跳到另一个帖子,以为我还在阅读同一个帖子的摘要,但实际上我已经向下翻了两个帖子。
新设计更实用。它让我想起论坛驱动网站的极简风格,我还没有确定我对这种风格的感觉,因为它现在看起来有点“无菌”,而之前我一直觉得你的网站更具个人特色。
我现在在 OSX 上使用 Google Chrome 浏览你的网站,在评论中的“记住”文本和页脚之间,大约有一个完整的页面可以滚动。只是空白。我猜是你的 jQuery 等宽列脚本出了问题?
重新设计很棒,Chris!
侧边栏和页脚的过渡效果很棒!(细节很漂亮)
我喜欢颜色和网格(流体)布局,还有你页脚的新图片。:-D
我只是不太确定背景图案。
但无论新设计如何,你的内容和你提供的支持/帮助都很棒!
你真的帮助过我几次,谢谢!
我觉得在这个新设计中,导航和 CSS-Tricks 的品牌更突出。
新设计看起来不像一个网页开发者的博客,更像是一个 CSS 爱好者社区。例如,我一直在这个网站上阅读文章,但从未想过要查看论坛,但自从这次重新设计之后,我就注册了。
整个页面看起来更轻盈。即使是广告也不觉得会占用太多页面空间。我喜欢你从更单色的配色方案中跳出来,使用橙色和蓝色进行互补。这确实体现了一些设计技巧,因为这并不总是那么容易做到的。评论融入页面,整洁美观。
很棒的工作,非常感谢您分享您网站的一些内部运作方式以及您在哪些地方做了什么。
我注意到一个细微的东西,不久前我看了你的“Pet Peeve”视频,但在你的视频页面上,你的链接会偏移 1 像素。不确定你是否故意设计这种“按钮按下”效果。
看起来不错。我认为这不是什么大问题,但我发现当我调整窗口大小并将其缩小时,当你再次将其放大时,底部会出现一个很大的空白区域。
我真的很喜欢新的布局——尤其是单篇文章页面。我认为更大的字体是一个不错的选择。
我唯一不满的是主页上的淡出效果。我发现它实际上会影响我快速浏览文章的能力。无论什么原因,它使主页在我看来更加杂乱。
一些第一印象:也许有点太灰了。我对某些部分的透明度效果并不完全信服。我喜欢为标题行选择的字体和 .meta .read-more 类的样式。
Chris,
我喜欢这种设计的轻盈感,它不像以前版本那样大胆,但我并不觉得你失去了任何个性。我没有注意到任何让我不满意的地方。
我特别喜欢标签的有趣形状,我喜欢它们的不对称性。
我还喜欢你用 logo 做的巧妙脚注,以及页脚上方的“此网站可能包含或可能不包含任何实际的 CSS 或技巧”语句。我认为它表达了你对网站名称及其主题相关性的长期争论的立场。
那个轮廓高亮?试试
input { outline:none; }
我喜欢新的设计。我喜欢它简洁明了。对我来说,它比上一个版本更容易阅读。
我不确定为什么人们不喜欢主页上的淡出效果,但我喜欢它!
我必须说我感到失望……
我喜欢 css-tricks 和你做的一切工作,但这次更新不符合我的口味。
它需要更多空白区域,我认为它有太多蓝色。我已经将 css-tricks 与橙色联系在一起,即使这种蓝色是一种互补色,我认为应该少用蓝色,多用橙色。我知道蓝色也往往与技术相关,这很好。我的意思是,麦当劳绝对不会因为任何原因或想法而放弃红色。它已经根深蒂固,无法改变。
所以,我喜欢蓝色,只是不喜欢你使用它的方式。CSS-Tricks 现在变得更加冷淡了。
这只是我的一点想法,但我仍然爱你,克里斯,仍然喜欢这个地方!
…此外,侧边栏在某些时候变得毫无用处,并占据了大约 1/3 的总宽度。
我同意,它确实看起来更简洁,更容易查看和查找信息,但牺牲了一点美观。这是我们在网页设计中要走的一条细线,我认为你已经达到了目标。毕竟,如果你的普通读者像我一样,他们不是来这里被你的布局惊艳的……他们来这里是为了被你的内容惊艳的,而我每天都在这里……
我还要附议一下评论区域下方大量空白区域的微小错误/问题……我没有测量它,但我想评论区域下方到页脚之间有超过 1000 像素的空间。这种情况只会在你调整浏览器大小的情况下发生,因此这不是一个大问题,但确实让人费解……
祝你好运,并继续提供精彩的内容……这就是我来的原因。
克里斯……我想你会考虑到所有关于每篇文章底部淡出效果的评论。就我个人而言,我发现它很有趣……第一次访问。我确实喜欢这种视觉间距带来的可读性,以及字体。这可能是我个人的怪癖,但我似乎对在网站上看到这种“社会工程”非常敏感,我必须告诉你,我感觉自己“不得不”一直悬停在那个东西上。对于重新访问来说,它确实变得有点乏味和分散注意力(你确实问过)——让我想起……。
之前没有评论的一件事是我喜欢听你对选择的“思考”——并知道其中有一些思考,而不仅仅是“我认为看起来不错”。我知道你不是唯一一个;但我已经想了一段时间了,为什么网页设计大师的网站似乎都是固定宽度的。在桌面空间永无止境的浏览器战争中,在我看来,所有浪费的侧边栏都达到了“想想非洲所有挨饿的孩子们”的浪费程度。而且似乎拥有更宽屏幕的用户比使用“chrome”或“safari”的用户多得多。(从编码选择的角度来看)我确实很享受更少的滚动,但仍然想知道你为什么没有达到全屏宽度——是它太复杂或太难,或者是我不知道的东西吗?
最后,(因为这是个人喜好),如果我只能选择一个——我会说保留令人恼火的阴影,并恢复一些图形。对我来说,这是发布中最耗时的部分(生成标题图形),但比空白区域更重要的是,它能够在视觉上扫描帖子分隔符,并为页面增添趣味。你一直都做得非常出色。我最后说这个,因为我知道这是个人喜好,只要它仍然局限于你的网站,并且不会成为一个网页开发趋势,它只会给我们带来受欢迎的多样性。然而,我对网络作为“闲逛”的有趣地方的想法是(即使谷歌已经表示它将利用自己的“讲道台”来进行页面速度排名),如果我所有喜欢的网站(Envato、remy 等)都像这样,那将是一个真正的灰色世界。难道没有一个折衷方案吗?只是一个观察——从视觉上看,这个充满了评论和头像的页面比主页更具艺术吸引力(忽略所有广告——我总是这样做)。虽然有些人可能会认为放弃图形是一种“最佳实践”,但对我来说,这并不是一种“好”的实践。
哦……也许你可以在侧边栏中发布关于所有这些巧妙标语的含义和起源的信息(“男子气概和友谊”、“同志之手紧握”、“形式与表演”)。一首诗?还有,当我在说这个的时候——星号图标的起源背后是否有故事?你很擅长“品牌化”。
我看到我的句子“让人想起……”没有传达出来——而且我无法返回编辑我的评论——所以我会在回复中更正它……抱歉。
“让人想起<flash>”——我总会把它写对的。
我很感谢克里斯选择在 1200 像素(文本主体为 700 像素)处停止。由于该网站充满了内容,可读性必须仔细考虑。全宽度肯定会影响句子的长度,而我,就我而言,最终将不得不使用我的手指抵住屏幕来保持我的位置。
很棒的工作,克里斯 :)
看起来不错,我喜欢蓝色。
我唯一要批评的是背景稍微暗一点。我不介意背景和内容区域之间有点对比度。
我刚注意到你给自己的评论和“最喜欢的评论者”的增强框——这很不错。是我现在才注意到它,还是你一直都这样?一个关于未来帖子的请求——你是怎么做到的?
我一直期待着你对网站的调整和改造。它让我保持警觉。:)
诚然,需要一些时间才能适应最新版本。我确实喜欢你做得非常出色的对细节的关注,但总体而言,它似乎缺乏你以前版本的“颜色跳跃”。它感觉有点沉闷,几乎像企业式的非设计风格,如果你能理解我的意思。
这只是我的一点微不足道的想法 :)
从“艺术”的角度来看,我更喜欢之前的版本,这个有点无聊,但从“信息网站”的角度来看,它更简洁,更容易阅读(至少对我来说是这样),但是,嘿!这是你的网站。我仍然喜欢它,并将继续来这里学习 css 和其他东西。(我学到了很多东西)
继续努力!
谢谢,
Aaron
实际上它很漂亮……
喜欢淡出效果
一开始新的设计真的吓到我了……我已经阅读这个博客好几年了,这次重新设计是最让我惊讶的一次:D
看起来很清新,我觉得颜色更好!:)
第二次看的时候,我开始喜欢它了:D
不过我不太喜欢这个 logo.. 我喜欢它后面的文字,但不喜欢 CSS-TRICKS 这个东西.. 看起来很廉价..
廉价?!那是 Gotham Condensed。
=)
我最喜欢的重新设计的部分之一是字体,尤其是 logo 和侧边栏标题。
我认为这个布局有一些优点和缺点…
首先,页脚很棒。小滚动东西很棒,侧边栏中的那些也很好。
你设法塞了很多东西,而加载时间并没有太糟糕,这也是很棒的。我也喜欢评论部分 - 灰色阴影和橙色/蓝色边框让特定的评论引人注目,这一切都很有道理。
但是我同意这里很多人的意见 - 顶部的标签有点单调,我不喜欢在网站最宽的时候,最右边有一个额外的标签。也许可以将它们更改为更像我在这里看到的可爱的“提交评论”按钮?
淡出效果是有道理的,但如果你要这样做,也许可以将“阅读更多”按钮 AJAXify,以便它加载页面而不是重新加载页面?
令人惊讶的是,这里有一个“推特”按钮,但没有“点赞”按钮,但这可以理解,我更可能从这里转发文章而不是在 Facebook 上分享。
最后,我一直不太适应搜索栏 - 当我开始输入时,它显示了我的历史记录中的搜索,但这些搜索不会根据我输入的内容改变,它们保持不变。当然,这可能是 Chrome 的故障。
一如既往,它很棒。继续努力,Chris(也许可以做个关于人们可能没有注意到的所有细节的屏幕截图?:)
Chris -
很棒的工作(
非常喜欢“此网站可能包含或不包含任何实际的 CSS 或技巧”。(我从未记得以前看到过它,所以如果它存在过..)
另外,不错的 Forrst 徽章 ;)
我认为这是迄今为止最好的 CSS-Tricks 设计。
但是淡出效果是错误的,它违背了网站的“易读”原则。它使阅读变得更加困难,并造成了一些混乱。
哥们,我喜欢更简洁的外观,在我非专业的意见中,我希望标题上有更多内容,但除此之外,我喜欢页脚和主要内容区域!
干得好!!总有一天我也会变得这么好!!!哈哈
哦,还有一件事,我喜欢免责声明!!!
“此网站可能包含或不包含任何实际的 CSS 或技巧。”哈哈
在 IE7 中,评论者的姓名和图片不可见,它们在某处的左侧。在 FF 中看起来还不错,还没试过 Chrome。
通常我会在这里使用 IE7 进行常规的网络浏览,我的 PC 还没有更新到 IE8。我想自从我开始使用 Windows 95 就一直使用 IE,而且一直使用它,我也使用 FF 和 Chrome,但不是我大部分的浏览活动。
Al
IE7 评论问题绝对是真实的,并且需要修复。抱歉给您带来麻烦,这应该在一周或两周内最多解决。
有趣的东西。不过我不太喜欢它。我觉得有些东西是硬塞进去的,只是为了使用某种技巧。例如主导航。前两个版本都有很好看且功能正常的导航。我觉得这个导航为了使用 CSS 创建圆角,而失去了艺术外观。
不知道你为什么改变了你的主 logo,而且我觉得首页有点难快速阅读。页脚中的动画很棒。
只是我的意见.. 我确实很佩服你在主题设计方面花费的时间.. 在自己的网站上工作从来都不是一件容易的事情。
logo 并没有改变。
我能理解你在使用各种技巧方面所遇到的问题。例如翻转卡片。并非所有这些动画/交互都以某种主题作为补充。然而,它是一个完整的 CSS 技巧!因此,我有点喜欢这种想法,即在整个网站中散布着所有这些小巧的 CSS 技巧,即使它们有点不相关或“硬塞”进去。
呵呵,有趣的是,看到没有你标志性的星号(“星”)的 logo 对有些人来说看起来不同 - 事实上你只是删除了以前存在的“标签”。:)
我认为这是因为人们在以前的设计中没有注意到 logo 中的“CSS-tricks”部分 - 它有点隐藏在左上角,而且很小。
看起来它是一个非常棒的设计,唯一的问题是它不能很好地与 Chromium(v5.0.375.99 (51029) Ubuntu 10.04)配合使用 :(
mediaelement.js 在 Chromium Ubuntu 下无法显示视频 :(
我回复我自己
sudo apt-get install chromium-codecs-ffmpeg-nonfree
解决了视频问题...
无论如何,我知道你已经收到过很多这样的反馈,但我就是不喜欢首页上最近的帖子淡出效果。当我第一次看到新的设计时,我的目光就被它吸引住了,它并没有给我留下好印象。我通常喜欢查看帖子有多少评论或发布时间,而必须将鼠标悬停在帖子上面才能获取这些信息是一个不必要的额外步骤。我也觉得它在某种程度上削弱了首页在这个特定区域的设计。除此之外,我更喜欢这个新设计而不是之前的那个。我非常喜欢这个,我认为它是一个很大的进步。也许可以将鼠标悬停效果添加到 125×125 的广告上。干得好,感谢你所做的一切。
看起来真的很整洁。CSS3 的使用也很不错。但也许你应该用 FluxBB 替换 phpBB。;)
我认为计划是 Vanilla Forums。我正在与他们合作开发另一款产品,并且喜欢该软件的简洁性和易用性。如果我能做到,我认为它将是一个巨大的升级。
好吧,我只试用了 Vanilla 一下,并且查看了代码,但我并不喜欢它。FluxBB 要轻得多,代码库也更简单。我必须说,我也是 FluxBB 开发团队的一员,所以可能我有点偏见 ;),但它比 Vanilla 轻得多/更快。
我不喜欢这个设计,但这只是我的个人意见。我最不喜欢的地方可能是导航栏。可能可以让右上角稍微圆润一些,这样就能与所有链接保持一致。我也觉得一个浅色渐变可能会让它脱颖而出,并使其更“可点击”,但我不确定。只是我的两分钱,但最终这是你的设计,你想怎么做就怎么做。
总的来说,这个设计看起来还可以,对我来说并不特别吸引人,但也不算糟糕。
我绝对讨厌的是 jQuery 的淡出效果。我讨厌的是,我无法先加载网站并阅读,而必须将鼠标悬停在每个帖子上面才能看到帖子摘要。无论它只是发布日期和评论数量,还是文章摘要的最后几行,例如:“碎片,请这样做。我拥有艺术学士学位,其中一部分就是被撕碎...” 如果我不将鼠标悬停在首页的文章上,就看不到它 - 我认为这是糟糕的设计,而且完全不可访问。
对我来说,设计不仅应该是让内容看起来美观,还应该是让用户更容易找到他们想要的东西 - 强制他们将鼠标悬停在每篇文章上并没有做到这两点。
Chris,
这个设计随着时间的推移,我实际上越来越喜欢了。我看到你修复了一些问题,比如提交评论表单(它在 Firefox 中出现故障)。
我很高兴你发布了这篇文章。它很有趣,我完全不知道 WebKit 浏览器中的酷炫动画!我快速打开了我的 Chrome,感到很震惊,这是一个完全不同的世界!
关于淡出...我不介意。它确实腾出了一些空间。
还有一点没怎么提到,我真的很喜欢 16px 的字体,它绝对提高了可读性,这对这个网站来说非常重要,因为这个网站主要是用来提供教程和/或有用的信息。
总之,继续努力!
最后一点 -
我在 IE7 中试用了你的网站,除了评论(如前所述)和屏幕截图外,它降级得很好。无法播放视频 :(
只是想指出这一点。
我个人很喜欢新的设计。我同意你的字体大小选择。我经常发现自己需要在浏览器中放大字体大小,这样我就不必那么费劲地看。也许我的视力不好,我确实戴眼镜。但我认为在屏幕上阅读东西会很累,所以我不想让情况更糟。
现在看起来也更加简洁和更有条理了。我喜欢你取消了主页布局,在那里你只有 1(或 2?)篇文章,然后是 4 个帖子块。它很酷,但现在它消失了,我有点更喜欢你新的主页。
我真的很喜欢蓝色,颜色选择很棒。
克里斯,你开始使用 DIW 的空白主题了吗?我一直希望空白主题能够升级到 3.0 版本…
好的,几件事
1) 列表中的淡出效果。我不介意这个想法,只是把淡出稍微降低一点,这样整个摘录就可以在不需要悬停在容器上就能看到。记住,我们很懒,额外的鼠标移动是不可取的。
2) 在文章页面上,侧边栏的位置比它应该的位置要高一点(大约 5px)。
3) 那款字体怎么了,“crete-rounded-web-1”?看起来很模糊。
4) 在“content-wrap”中添加一些底部填充(20px 足够了),它会看起来更好,至少在我看来。
5) “提交评论”按钮和“投票问题”气泡在 Chrome 中看起来不好看,要么去掉盒子阴影要么去掉圆角边框,因为盒子阴影不考虑圆角,不知道为什么,我在我的项目中一起使用过它们,它们工作得很好。
6) 投票问题结果,“(8%,621 票)”,在 Safari 中看起来不好看,它们看起来像是用点组成的。也许是因为“text-rendering”。
7) 去掉输入框的轮廓,不知道是谁觉得给输入框添加默认轮廓样式很聪明。
除此之外,一切都很好 :)
我很高兴看到你终于添加了“推文”按钮 :) 我一直不明白为什么你让我们多点击几下才能推文你的文章,而你可以添加推文按钮。
就是这样。
嘿,克里斯,我喜欢新的设计,我在 Safari 中发现了一个小错误,当你将鼠标悬停在页面底部的社交媒体图标上时,侧边栏会闪烁一秒钟变成白色。除此之外,我非常喜欢它。
漂亮的设计,但不是橙色的 ;)
也许你应该做一个关于淡出效果的投票?
我持否定意见。
可惜的是,页脚中的效果现在在 Safari 中无法正常工作。
我在 Chrome 中试过,它们很好看。希望你能解决这个问题。
我认为整体设计是在正确道路上的演变。
尽管我认为灰/蓝色有点多。整体效果变得模糊,我的眼睛需要四处搜索,不是那种我发现更多东西的感觉,而是看得更少。
希望你能理解我的意思,我通常很难用我的母语解释我的意思:)
我希望有一些更多的对比,如果不是更多橙色,那么你使用的颜色要有更多对比,或者也许是其他效果来区分内容。
这只是我的意见,也许我错了。
继续努力,我相信这是我第一次评论,但我已经定期访问很长时间了。
我喜欢它。在 1200px 的情况下,行长不超过 1200px,因此放大字体大小是值得的。
我不太喜欢滚动到标题上才能在页脚中获取内容 - 我认为内容应该始终显示在屏幕上 - 但这属于意见不同,而不是对错。
其他方面,我将保留判断,直到我在新布局中花费一些时间,以避免对变化的本能反应。人性啊,等等等等。
我对主页上的文章淡出效果没有强烈的意见,因此我取消了它,因为它收到了很多负面反馈,改用其他 CSS 技巧。我相信很多人会同样讨厌它。生活就是这样。
感谢 Matthew Davis 帮助找到了一种(奇怪的)解决方案,以解决页脚中“我的工作”框引起的闪烁问题。
其他各种修复已经完成。
我更喜欢新的方法!它有一个带有品牌特色的分隔线,*并且* 必要的元素在悬停时出现。如果你问我,这是一个成功的解决方案。
元素在悬停时出现与触摸设备(如 iPhone)相关的整个问题非常激烈,但我认为截至今天,公认的解决方案是在触摸设备上使用一些东西来检测设备,然后永久显示这些项目。
也许你应该考虑一下?
我不得不承认。当我第一次看到新的设计时,我讨厌它。但在访问了网站几次后,我开始接受它了。我真的很喜欢蓝色,以及网站现在感觉轻便了很多。
现在我已经读了这篇评论,我开始注意到一些可能在第一次检查时不会注意到的细微之处,我感到很佩服。
你在这个设计上投入了很多精力。干得好!
嘿,克里斯,酷炫的新设计!我刚注意到搜索栏顶部和侧边栏出现了一个奇怪的错误。我在使用 OS X 10.6.4 和 Safari 5.0.1。
在加载页面(任何页面)后,如果我在搜索栏中点击,整个侧边栏会移动(可能向左和向上移动 3-4 像素),然后回到原来的位置。如果我在搜索栏外点击并再次尝试,它就不会移动。但如果我访问另一个页面并再次尝试,它会再次移动(似乎每次在加载页面后第一次尝试搜索栏时都会出现这种情况)。我不确定是怎么回事,可能是 Safari 的奇怪问题。我并不觉得它很烦人,但我认为你可能想看一下。;
干杯
在看了一天新网站后,我仍然不喜欢导航栏,我不确定是什么原因,它看起来就是不对劲。虽然正如其他人所说,网站的其余部分很好,可读性也很强,这对这样一个网站来说是最重要的。
与很多人的看法不同,我真的很喜欢文章预览中的淡出部分,我也很喜欢你对各种内容的许多悬停效果(尤其是“我的工作”,“我和…合著的书”和“我收集的词语”)。
总的来说,我不得不说,你像往常一样做得很好。导航栏是一个小问题,所以我很容易克服它,我相信随着时间的推移,我会习惯它的。
只想补充一点。我一直在滚动导航按钮,我个人会把深蓝色设置为正常状态,把浅蓝色设置为悬停状态。仅仅是个人意见。
哇,回过头来看,我还记得 V2。太酷了!
就我个人而言,我更喜欢旧的设计。但这只是我个人的看法。
克里斯,总的来说,我非常喜欢它。页脚是一个巨大的改进。不知道我是否喜欢导航标签,但这并不是什么大问题。它的简洁给我带来了灵感。我对蓝色有点犹豫。上面有人说它几乎是临床的……我不同意这一点,但关于这种色调的某些东西确实让我感到困扰。对我来说太…天蓝了。我认为你可以把它记下来,因为我只是习惯了之前的颜色。我会克服它的。
有一件事让我很恼火,仅仅是因为你在图片中指出了它。用于投票部分的气泡,我发誓三角形偏离了 1%。如果我在 Firebug 中将其更改为 97%,它看起来就很好。我使用的是 FF 3.6.8。我知道这是一个微不足道的小事,但如果你没有放一张描述你所做的图片(它让我注意到了),我可能不会注意到。
现在我要自己去获取新的推文按钮了!
侧边栏上的新列表项。我非常喜欢它。
新页脚。绝对更干净,更明亮。
投票部分的新气泡问题。很酷.. (Safari 5 有一个小问题 http://skitch.com/ebiansyah1402/d1jmm/design-v7-css-tricks)
作为一个正在为我的网站设计新设计的人(因为当前的设计更像是一个概念占位符),你的重新设计来的真是太及时了。虽然我之前很喜欢你的迭代版本,但我完全可以理解新网站的极简主义风格。
与一些评论不同,我不觉得这些颜色显得枯燥和寒冷,而是更平静和更专注。这种设计似乎更适合突出内容,而不是设计本身。
另一方面,唯一不太令我共鸣的是顶部的导航。标签彼此重叠的地方有些东西让我感觉有点不安,虽然没有更好的词来形容。话虽如此,我还是想知道你选择这种设计元素的原因,也很期待看到你将来会添加/更改什么其他内容。
这绝对是迄今为止最好的版本。我喜欢更大的字体、更轻/更简洁的布局、HTML5 的新增内容(比如搜索栏)、WebKit 过渡等。文章上的淡入淡出效果很酷,但也有一点分散注意力。除此之外,总体来说绝对是进步了。
我不知道,兄弟。这个感觉有点……没生气,也不性感。当我滚动和移动鼠标时,有太多东西在发生,而且四处跳动。你偶尔也需要一些平静的区域,那里什么都不会发生。
你可能不想听到这个,但我更喜欢之前设计的风格。这种金属/蓝色主题不是我常去的舒适、有趣 CSS Tricks 风格。这个设计的页眉不是那么显眼,这很奇怪。感觉有点空。
我不知道你在这里添加了什么流体的东西,但当我调整页面大小(使用 Safari 5.0.1)时,页面延迟非常大。我猜想与流体图片、广告等的重绘相关有一些性能问题,但我不知道。
当我看到新设计的第一个印象就是蓝色。到处都是蓝色!黑色和橙色到哪里去了,我哭着喊!除此之外,只有一件事看起来不协调。右上角的星号看起来有点不完整。如果它有颜色的话会更好。
我喜欢你在最底部写了关于这个网站可能不包含实际的 CSS 或技巧的内容。
总体来说,这是一次很棒的重新设计。
不错,我喜欢。到目前为止我同意你的观点。每一次新的设计都是对上一个版本的改进。现在谈谈这行
“此网站可能包含或不包含任何实际的 CSS 或技巧。”
嗨,Chris,
你一直在忙!所以,一开始……
我超级喜欢的东西
你和你的班卓琴在页脚
使用星形标志的页脚免责声明
更大的字体,可读性更高(而且我的眼睛也很好)
蓝色和橙色的点缀(我也喜欢)
CCS3 和 HTML5:如果有人应该这样做,那就是像你这样的家伙
我超级讨厌的东西(好吧,讨厌可能是一个太强烈的词)
消毒的感觉(除了你和你的班卓琴)
这不是 V5(眨眼,眨眼)
看起来像是空的导航按钮
总体来说,这只是我个人的意见,确实,这个设计很简洁,实用。我很欣赏你从不固步自封,不断为我们其他人创新。
当然,这是自私的,但作为一个狂热的读者和 Chris Coyier 的粉丝,我个人希望你坚持我始终认为是刻意选择的对比。这就是我怀念 V5 的原因。
我经常访问的很多网站似乎都变成了更平淡的版本。我责怪那些以史蒂夫·乔布斯为演讲者的会议上提供的酷乐时。苹果公司总是因为拥有一个非常简洁、易用的网站,以及在所有产品中都具有整体的精致简洁的设计而受到赞扬。当然,情况可能确实如此,但结果是,灰度越来越多的出现在我的视窗中。
一个致力于大量内容的网站仍然可以保留一些颜色对比度,以区分不同的区域,而不会显得过于花哨。如此多的白色和非常浅的灰色实际上让我很费劲才能阅读,无论字体大小如何,而且我不相信只有我一个人这样。我需要在我的“周边”有一些更暗的东西,这样我才能看得清楚。对我来说,这和电影的字母盒版本背后的理论是一样的。
不要问我我对技术将我们推向 2880 像素标准宽度编码的担忧有多大。那时需要什么字体大小和行高才能保证可读性?
总之,赞扬,我只是怀念更多颜色。
我完全不明白淡入淡出效果。我的意思是,淡入淡出效果并没有折叠并提供某种节省空间的功能。在我看来,你只是毫无理由地向读者隐藏信息。我认为这类似于谷歌决定在其搜索页面上使用淡入淡出链接。从美学角度来看,他们的搜索页面已经是网络上最简洁的网站,所以隐藏链接[最初]只是一个很小的烦恼,实际上没有起到任何作用。
至于新设计的整体外观/感觉,我更喜欢旧的。为什么?我不喜欢蓝色的选择,也不喜欢“方块”布局,在我看来它太呆板了。
当然,我很欣赏你的网站以及你为网页开发社区所做的一切,这仅仅是我个人的意见。
几个小时前淡入淡出效果就消失了。所以如果你还看到它,请清除缓存。你认为这个设计更像方块很有趣。从字面上来说,旧的设计完全由方块组成,而这个设计则与之不同。阅读我在这个主题中的第一个评论,关于“为什么要隐藏”信息。这个想法是通过不重复相同的页面元素来减少视觉上的杂乱/强度。
有没有办法看到大家都在抱怨的淡出效果?
我知道你已经把它去掉了,但能更清楚地了解一下大家的抱怨是什么会很酷。
抱歉兄弟,它已经永远消失了。它对这个世界来说太棒了。
整体外观和感觉很棒。但我认为你在右边放弃了太多空间。我建议尝试减少大约 15%(以及搜索栏),看看效果如何。另外,文本大小很好,但增加 2 像素的行高怎么样?对我来说,这可能会使阅读更容易。
首先,这个设计是这个网站一个全新的开始,我没想到。CSS-Tricks 不仅仅是一个网页设计博客(至少在我看来),我很高兴你能在这个新设计中传达这个信息。蓝色确实感觉更好,我喜欢所有的细节,尤其是页脚的“可能不包含 CSS/技巧”部分的消息。
但是,对我来说,有些东西感觉很奇怪,比如按钮和搜索框。内嵌感觉很老旧,而不是现代。另外,“蓝色轮廓”效果只适用于 Safari/Chrome 用户或 Mac 上的 Firefox,这让我什么都没有,如果你能用 CSS 添加这个效果会很棒,这很简单 (http://forr.st/~uQJ)。
抱歉评论太长了,这只是一个习惯,但再次强调,很棒的设计 =)
Chris,我喜欢这个设计,也喜欢你如何清晰地解释你的选择背后的原因。我唯一的批评是,你的演示文稿仍然保留着旧设计的橙色感觉。也许可以简单地修改一下 CSS,以及一些新的图片?或者是一个复杂的 jQuery 解决方案?无论如何,继续努力!
我认为你在右边放弃了太多空间。
如果你在 iPad 上放大文章,它会崩溃 Safari。
除此之外,我喜欢!
即使这个网站是用 FrontPage 设计的,没有使用 CSS,背景使用绿色到黄色的渐变,我也会喜欢它 :-) 内容才是最重要的,内容是完美的……
只有一件事真的让我感到眼睛疲劳,就是 logo 或页眉,字距太紧了,或者我会考虑使用不同的字体风格,而不是那种紧凑的字体。
请提供视频!(>_<)
我认为它看起来很棒,喜欢排版。顺便说一句,页脚中的 Deering Goodtime 很不错 ;-) 我也弹奏,并且有一把 Deering Sierra。
新设计中有一些非常漂亮的元素。但是感觉有点仓促?当然,我可能是完全错了。
除了需要做一些 CSS 微调外,我喜欢它。我认为它更具商务风格,因为它的设计更简洁,但灰色很好。
从设计角度来说,我会在页脚的 RSS 链接底部添加一些(更多)“空白”。
我喜欢新的首页,我认为它更有吸引力。
我喜欢重新设计,但
页脚链接效果(我为…工作,我合著的书籍…等)以及首页上的新“淡入”效果在 Opera 10.5+ 上不起作用,但它们可以工作。只需复制所有 -webkit-transition 和 -webkit-transform 属性,并将它们重命名为 -o-transition 和 -o-transform。我已经尝试过了,它对我有用(Opera 10.61,与 10.5 使用相同的引擎)。
我喜欢重新设计。喜欢网站的颜色和整体感觉。在 V6 中,我觉得很难找到最新的帖子,但现在看起来好多了。
我喜欢你的工作,我从你那里学到了很多。继续努力,你的工作太棒了!
哎呀,现在你切换到HTML5了,我的老朋友Firefox 2不再支持了(-_-)
我最喜欢过渡效果,这里和那里有一些非常棒的创意。其他的,我不得不说,我更喜欢旧的CSS2设计!它现在感觉有点不那么生动和多彩了。不过,我期待着下一个版本的到来。:)
功能很棒
但颜色不太好
不错。比你上个版本首页那个方块玩意儿好多了。
看起来棒极了!我真的很喜欢它,底部的照片好了一百倍。加油!
Chris,设计看起来一如既往地新鲜,只有一件事我在Firefox 3.6.3中注意到,你的侧边栏背景没有对齐到左边。我在下面提供了一个截图。
截图
再说一次,我真的喜欢新设计,我喜欢蓝色。
FDL。
我喜欢新设计,感谢你分享你网站的所有新增强功能!
我喜欢它,简洁漂亮。我一直喜欢极简风格的东西。
真的很喜欢你在文章中展示“阅读更多”的方式
如果你还没有提到,你可以通过以下CSS代码在webkit中去掉蓝色轮廓。如果你想添加其他效果,你可以这样做。
.your-form-class:focus
{
outline: 0;
}
此致
Thomas
在FF和IE中,分辨率为1900×1200时,你的侧边栏会浮动到内容之上。我必须缩小一格才能正常查看。
屏幕:http://imgur.com/FmIqr.jpg
你知道怎么做才好.. 非常干净漂亮!
Chris,我喜欢新设计,你剔除了很多东西,但网站感觉更具信息量了。
我和很多其他人一样,反对淡入淡出效果,但你用新滑入动画代替了它,让我大开眼界。
赢家,赢家,炸鸡晚餐。
嘿 Chris,
搜索框旁边“Go”按钮的灰色背景不应该被移除或透明吗?
它现在看起来有点不对劲…
Jelmer
喜欢v7!非常干净利落,有很多喘息的空间!
我建议你使用稍深的灰色作为背景。
顶部和底部背景上的图案让文字看起来很奇怪…
迫不及待地想看到v8。
非常简洁的设计,我喜欢那个“crete-rounded”字体和你的页脚。你和你的班卓琴的照片太棒了,页面速度得分是89/100,太棒了!
仅供参考
我觉得它做得不错。简洁明快。一开始我对背景纹理不太确定,但现在我觉得我挺喜欢的。右下角的jQuery小东西很不错。
继续努力!
(Safari 5.0.1, OSX Snow Leopard)
非常棒,我喜欢它的简洁性,而且几乎没有杂乱,留下了大量的空白。:) 清爽明快….我真的喜欢这个设计。我知道还有改进的空间,但至少对我来说,“它现在工作得很好”。
总的来说,我不介意这个设计。它非常实用,但似乎是故意的选择。
我得说,我怀念那个标签。我一直觉得它是一个可爱的小图像/表示。CSS标签之类的东西。
另外,我以前从未留下过评论,但你的评论滚动起来太长了!我差点就放弃了,还没看到页脚中的CSS技巧。
Chris,非常棒。又是一部杰作!
这是一个非常简洁的设计,我喜欢主文本的更大字体。但是,标题区域后面的背景图案让它看起来很模糊。当你回复时,深灰色背景上的文字也有一些可读性问题。
我真的喜欢页脚。
– Lori
“内容为王”,从v3开始,我认为内容的“可读性”一直是这些重新设计的主要驱动力——我发现每次迭代都更容易阅读你的文章。
经常被忽视的一个真正影响可读性的因素是每行字数。更大的字体尺寸在这方面起到了很大的帮助,但通过限制液体组件的最大宽度,你实际上阻止了每行字数过多,这对宽屏用户来说很棒——非常注重细节!
我唯一的抱怨是,我认为你应该始终将网站的主题与你的身份主题联系起来,所以缺少橙色有点出乎意料。那些浅蓝色的链接没有吸引我的眼球。
我喜欢旧的外观,但这个也不错!
我和许多其他人一样,第一次看到新设计时就心想,“CSS-tricks去哪了”。不过,从那以后,它就逐渐让我喜欢上了。我非常喜欢的一点是,你加入了许多css3和HTML5功能。
每个人都指出了我的大部分想法,但我确实有一点新的东西要补充。我有一台iPad,发现自己越来越频繁地在上面阅读博客。这意味着,在大多数情况下,很棒的悬停效果消失了,活动状态接管了交互性。在大多数情况下,这没有问题。但是,文章摘要底部新的滑动效果(以前是淡入淡出效果)不存在,让我不得不自己弄清楚,我可以点击文章标题来阅读更多内容。这不太直观,尤其是考虑到标题是灰色的,悬停效果在iPad上不起作用。我不是建议你去优化iPad用户体验,而是说,那个效果可能弊大于利,因为它纯粹是为了美观。
总的来说,这是一个很棒的重新设计。
关于文章页脚的悬停效果还有一点。我认为我终于找到了让我觉得它们令人分心的原因。
我的鼠标通常在滚动时靠近页面中心,这意味着悬停效果不断地触发在我试图阅读的文章摘要的下方。它分散了我对正在关注内容的注意力,这与它的本意背道而驰。
不确定是否还有其他人有这种感觉。
我喜欢重新设计。它完全符合网站的用途,而且新鲜漂亮。而且,我同意你的观点,Chris… jQuery淡入淡出效果对这个世界来说太棒了。:)
另外,我必须说,我对人们表达意见的方式更像是命令感到非常震惊..
例如,“做这个,做那个。谢谢”。
如果你问我,这是很不尊重而且品味低俗的。
使用Firefox的人会喜欢v7
使用IE8的人会讨厌v7
我使用IE8,所以…
所以你可以开始使用Chrome :)
是的,停止使用IE。就这么简单。
嗯… 设计变了。我之前在IE8中看到的那些问题消失了。
所以现在我说:使用IE8的人会喜欢,但不会像使用Firefox的人那样喜欢。
标签击中了我。看起来真的很奇怪,IMO。
虽然你不喜欢我对另一篇文章的评论,但我还是会插一句。我不怪你,但我当时说实话,不过话说回来,我当时喝了 6 瓶啤酒才写的。我对美学方面的问题不仅仅是直觉反应,它们完全基于可读性、可用性和上次设计中丢失的一些个性。你已经解决的一个主要问题是帖子文本的淡出。这种效果在有限的使用中可能很不错,但对于页面下方的每篇帖子来说,它都会让阅读变得很费力。话虽如此,新的滚动效果更加有效。我感觉你也可以在导航栏的标签上做得更好一点。我相信它们是可以被认为是可用的,但它们缺乏个性……这仅仅是我的观点。至于我喜欢的,设计中有很多微妙的元素,它们为网络媒体增添了一层交互性,这很好,而且你正在推动动画,而没有使用任何 Flash。作为 jQuery/CSS 开发人员,我对此毫不意外。所以总体来说,工作很棒,我相信它会继续改进。还有,你从哪里找到时间做所有这些事情?你一定有严重的注意力缺陷症,或者其他什么问题 :)
我对切换到 HTML5 (H.264) 视频感到困惑。这是否意味着它们应该可以在 iPad 上观看?你是否重新编码了你的存档/目录中的视频?由于我无法在我的 iPad 上观看它们,我显然错过了一些东西。有人能帮我理解我哪里走错了路吗?
Chris,感谢你提供了一个很棒的学习网站。我对设计的了解还很浅,我不知道自己不知道什么,我发现 CSS-Tricks 是一个很棒的资源。谢谢!
我现在也对此感到困惑。我认为它们应该可以在 iPad 上正常播放。它正确地使用了 video 标签,并且视频也编码为 H.264。但它们就是不播放。我听说设置 poster 属性会阻止它们播放,而我正在这样做,但无论有没有它,它们都没有播放,所以我保留了它。
我还听说这些视频在其他随机的浏览器和平台组合上无法播放。
随着时间的推移,我会解决所有这些问题。现在,当然你总是可以订阅 iTunes 或直接下载它们,并使用像 VLC 播放器这样的东西播放它们。
你是否使用了任何额外的 JavaScript 来增强 UI?
好吧,我是一个 CSS-Tricks 老用户,我必须承认,起初我对 design v7 有点怀疑,但你确实做出了大量的性能改进。而且随着时间的推移,它确实越来越吸引我了。
从视觉上看,我特别喜欢现在代码片段在帖子中显示的新方式。它们用黑色背景来突出显示,显得非常醒目,我喜欢它们如此突出。
底线是,这是你的网站,哥们!你想怎么做就怎么做,只要你的内容质量不变,我就会继续回来访问!
总之,赞赏你。
我认为我之前不够好。现在淡出消失了(因为它“太棒了,不属于这个世界”,显然!哈哈!),我也不会被它分散注意力,我认为这个网站很棒。你应该为它感到高兴。我喜欢字体、字体大小和空白区域。回想起来,我认为这可能是你迄今为止最连贯的主题,而且我越来越喜欢它。
圆角之类的方面有些奇怪,但这些问题会慢慢解决。高兴点!
附言:当你不可避免地被别人叫出来讨论 jQuery 时,你是否会使用新的免责声明?:P
你的网站很棒,而且不断进化……我喜欢它,因为它既现代又简约,同时又保持了以前设计的主题。注意到你取消了淡出,它不起作用,而且有点烦人。对我来说,唯一的缺点是代码片段部分位于底部。我认为放在侧边栏会更好。
总体而言,我认为这个设计很棒。我一直关注着这次改版带来的变化,我对淡出效果也不是很喜欢,但它仍然是一个很棒的想法。我也很喜欢底部的图片。班卓琴很棒。继续努力,感谢你运营着世界上最好的网站之一。
新设计看起来很棒。我唯一的问题是导航。我认为填充可能太过分了。它抢了 CSS-Tricks 主标题的风头。除此之外,我很喜欢。很高兴你使用了流式布局。
嗨,Chris,关于新的 v7,我真的非常喜欢它,更关注实际内容。这很棒。只是第一次看到它时有点震惊,通常你只是为了改善而改变,而这一次几乎完全改变了。正如其他人所说,我不喜欢帖子上的淡出效果,但刚刚注意到你为它们添加了一些 jQuery 魔法。太棒了!喜欢你的工作。希望它能一直持续下去!
嗨,我再来一次,还注意到 WebKit 中的闪烁错误从“我为……”等的悬停状态中消失了。问题是什么?
http://forrst.com/posts/Fighting_Transition_Related_Flickering-uEh
哇,我喜欢这个设计,它非常护眼,阅读起来也更加有趣,就像另一个用户所说,它非常原创。所以,是的,我喜欢新的设计,如果要解释我对新外观的感受,我需要写一篇很长的帖子,而且我不擅长英语,但总体来说,它简直太棒了。恭喜你!
很不错!简单、干净,但很有效,比以前更加友好。我喜欢这些评论。
干得漂亮。
我一直关注你,从 V3 开始。Chris,你做得很好。当你进行主题切换时,总会让我有点不适应,但一旦我习惯了所有东西的位置,它似乎总是朝着更好的方向改变。感谢你不断前进,让我对网页设计保持兴趣!
很棒。我感到惊奇的是,你如何找到如此多的时间来管理工作、写出令人惊叹的文章,以及以如此有效的方式为你的博客进行改版。太棒了!:) 访问你的设计存档让我想起了我第一次访问你网站的时候,哈哈……我认为是 v1 或 v2……
我认为他从不睡觉。
干得漂亮。我认为这个新设计提高了可读性。我真的很感谢你花时间和精力来设计评论部分。我发现我对广告部分覆盖导航区域持 50/50 的态度。但我确实认为这是一种巧妙的利用空闲空间的方法。
我认为内容背景应该与主体背景相同。我认为这会使内容看起来不那么拥挤。
总体而言,细节处理得很好。这是一个重大改版。
抱歉,伙计。它失去了一些个性。所有的蓝色和干净的东西带走了我之前设计中喜欢的个人风格。让它看起来有点廉价。
它看起来真的像一些标准模板,而不是自定义的质量……
总之,继续努力。内容才是最重要的,既然大多数人似乎都喜欢它……;)
我喜欢你在首页上的文章页脚,滑动 logo 以显示“阅读更多”和日期,我想看看你是怎么做到的。我想我可以去源代码中看看^^
我认为它失去了很多细节,这些细节让访问它变得很愉快。此外,浅色主题不是我的个人选择,尤其是在看到了之前设计中橙色、蓝色和灰色色调的完美融合之后。
此外,顶部的菜单元素和标题看起来非常基础和业余,几乎就像是从一个免费的基础模板中拿来的,而不是自定义设计。
就我个人而言,我喜欢 V6 中的分区方式。我认为 v7 就像一个滚动条。
自发布以来对 V7 进行的一些细微调整确实产生了很大的影响。每一次改进都有帮助。干得漂亮。
很棒,非常棒,希望有一天我也能做到,感谢分享。
它更加关注内容,这很好,因为我非常喜欢你的内容!我经常参考它。感谢你,继续努力!
旧的看起来更好,但我喜欢它,因为它很原创!
继续努力!
感谢您抽出时间列出这些更改,太棒了!LT
总体来说,设计非常棒!
我注意到的一点(我认为之前在评论中已经提到了),就是首页文章下面没有“下一页”或“上一篇文章”的链接。每次都要回到顶部点击“存档”有点麻烦 - 像 v6 中那样的链接就完美了!
顺便说一下,在 Chrome 中,你的首页“Read On”那个东西的滑动效果看起来很棒。但在火狐浏览器中就不行。ease-in 只有 web-kit 才支持吗?
我很喜欢新的简洁设计!
但我无法在我的 iPad 上看到你的视频,播放按钮被禁用了。(请将视频制作成 .mp4 h264 格式)
关于你的代码片段页面,我有一个小建议
我在论坛中注意到,默认情况下,论坛的“标签”上都有搜索框。我认为在代码片段部分也可以这样做。只是一个建议。你也可以从实际的代码片段页面中移除搜索框。
Josh 的建议很好,我会着手去做。
我唯一的批评是主体文字的宽度太大了。
在我的屏幕上大约是 740 像素。这至少有 100 个字符 - 多年前我被教导过,当宽度超过 72 个字符时,眼睛就会吃力。
另外,就我个人而言,我认为主栏的文字离边框太近了。边框的绝对尺寸是可以的,我认为相对于栏宽而言,空白空间不够多。
除此之外,工作做得非常出色。
嗨,Chris,
蓝色是我的最爱,你的网站太酷了,而且很好看。
你能写一篇关于你标题字体的文章吗?如何使用自定义字体?
几点补充
* 我首先注意到的是侧边栏(或者文章内容栏,不知道哪个,但其中之一)的行为有点滞后。就好像当我滚动时它被重新渲染了。一个是先移动,另一个是后移动(有点像 90 年代的 javascript,会在 onresize 时改变元素的位置)。
* 在评论部分,圆角在我看来不太合适。它们与设计其他部分不协调。圆形按钮很好,但其他部分大多是矩形取向的。在我看来,它更多的是炫技,而不是图形上的增强。
* 日期与评论气泡的背景色对比度很低,这取决于深度级别。
* 一些论坛的 bug(参见另一篇文章中关于这个的评论)
* 我喜欢之前设计中的宽松感。在写评论的时候,当我滚动到底部时,我看到文本区域和内容栏的左边边缘之间有一条非常窄的边。另外,页脚可以多一点底部边距。
其余部分我都很喜欢,像往常一样,可能只是需要适应一下,但我还是想在这里说一下 :-)
和另一位评论者一样,在我第一次修改后访问这里时,我以为这是一个通用的模板。这听起来比实际情况更残酷。几天后,我对新的设计感觉更舒服了(而且我总是需要一些时间才能适应激进的设计变化),我开始享受看到事物如何改变以及你如何处理它们。
我真的很喜欢从上到下的背景图片;我特别喜欢像素化的星号,因为它我认为它很好地以一种独特的方式延续了这个标记,不会让人感到困惑。它很大,但不会太突兀,这种微妙之处让用户知道要留意其他的微妙之处(比如免责声明 - 这是一个很好的触动)。
我认为这个网站最有趣的地方在于你如何从一种包含很多“明显”Chris Coyier 风格的元素的设计转变为一种感觉几乎是空的 - 但仔细观察后又会发现很多隐藏在明处的元素(我特别想到你对高级技巧的运用以及探索选项和尝试新事物的主张 - 没有人喜欢的淡出效果,我从来没见过,斜面/浮雕效果,漂亮的字体,版面宽度)。
尽管最初的冲击力很大,但一旦我开始阅读文章,我就好像忘记了它。我真正想要的是内容,当内容被很好地呈现出来时,设计就变得无形了。我喜欢字体大小,以及页面能够铺满我的整个屏幕(我个人并不介意行长),因为这样更方便我坐在椅子上浏览文章 - 带来更舒适的体验。
我花了比我想象中更长的时间试图找到如何阅读不再显示在首页上的文章(令人尴尬的是,我没有立即意识到浏览存档就可以找到我想要的东西)。
我期待着进一步探索,并亲眼看看你在重新设计中使用了哪些 css 技巧。
我花了比我想象中更长的时间试图找到如何阅读不再显示在首页上的文章(令人尴尬的是,我没有立即意识到浏览存档就可以找到我想要的东西)。
我喜欢更宽的设计。感觉好多了。做得好!
我喜欢新的设计!我高度近视(即使戴着矫正隐形眼镜也是如此),我总是放大网站以让所有东西都更大,因此更易于阅读,但由于字体更大,内容区域更宽,所以不像其他很多网站那样必须这样做。
但是,我发现评论区(commentmetadata)中灰色的文字在灰色的背景上很难阅读。对比度不够。我还发现默认的链接颜色(#50A3E5)在某些情况下太亮了,尤其是在字体更小的时候,以及在某些灰色背景上(例如,页脚)。当然,这可能与我的视力有关,但我只是觉得它太“亮”了,很难阅读(相同的字体大小,在相同的背景上以黑色显示并不是什么大问题),但好消息是,我绝对可以在页面上找到链接。
另外,我认为你从首页内容区域删除了旧文章的链接。我最终在搜索按钮下找到了浏览旧文章的链接。现在我知道在哪儿找了,就不是什么大问题,但当时确实很让人沮丧。我怀念的另一件事是,在你的浏览列表中没有文章的预览,只有文章标题,所以我失去了在点击阅读更多之前阅读一些文章内容的机会。
总的来说,干得漂亮,继续努力,Chris!
Chris,干得好!我发现新的设计不仅功能更强大,而且颜色的变化也很清爽!你成功地将蓝色和橙色结合得很好。继续努力吧。