是时候进行另一次设计更新了!对我来说,这次更新最棒的部分是,我上次所做的所有工作 上次 使这次更新变得非常容易。
像往常一样,变化并不十分剧烈。是演变,而非革命。旧版设计还不错,我只是觉得可以尝试改进一些地方。
欢迎提出批评意见。无论好坏,但请尽量保持建设性。
我试图实现的目标
- 主导航再次与网站更加紧密地连接起来。这对我来说很重要,因为这是上次设计中有点丢失的东西。
- 我想强调网站的社区方面。集中的导航有助于实现这一点,新的标语也突出了这一点。
- 我之前很喜欢排版,所以它完全相同。
- 疯狂的外太空风格很有趣,但它不太“符合我的风格”,所以它被更简洁的风格取代了。
- 我仍然可以使用我喜欢的纹理。
- 我从来不喜欢在论坛区域使用标准页脚。我喜欢我的“关于作者”部分,但我不是论坛的“作者”,你们才是。它不合适,所以现在论坛有一个经过简化的页脚。
- 整个布局再次居中。它位于左侧从未困扰过我,但这是上次最主要的投诉。
目前存在的问题/批评意见
- 搜索栏上方的那个东西是什么鬼?
这是我(也许是半生不熟的)尝试将“网页设计社区”与搜索栏联系起来的方法。我想明确表示,整个网站都可以使用此框进行搜索,我认为这非常有用。我可能会尝试在上面使用不同的想法。 - 侧边栏中的所有空白是怎么回事?
我觉得这是许多网站上的一个经典问题。有些页面非常非常长,而有些页面则很短。较长的页面在侧边栏底部有很多空白。我想到的一个想法是测量页面的高度,如果它超过一定高度,则使用 JavaScript 向侧边栏追加一些额外的内容以填充该空间。这可能是可行的……但是带有 50 条评论的帖子呢?那空间就太多了。我不确定是否有完美的解决方案(至少目前还没有)。
即将推出*
- 清理论坛的样式,使其更美观
- 将 Twitter 重新整合进来
- 将一些好友链接重新整合进来
- 将 Script & Style 链接重新整合进来
- 新的按钮样式
* 我对所有这些内容都有想法,很快就会推出!
我真的很喜欢新的设计,简洁明了,恭喜。
Chris 干得好!
Chris,设计真的很棒,顺便说一句,您更改了 AMSU 中“忘记密码”的链接。也很高兴看到这一点 :)
Chris,干得好。
我以为搜索栏上方的那个东西是为了让搜索看起来像后视镜。无论如何,重新设计做得很好。
同意。搜索输入框周围的框有点抢眼。我立即注意到它因为它很突出,但我不确定这是您想要的,Chris?否则,选项卡是一个很棒的改进!
英语不是我的母语,但是,“我试图存档的目标”?无论如何,大换血,真的很喜欢新的设计。
抓住了,谢谢!
我喜欢旧版蓝色的顶部栏。如果您将两者结合起来,我认为它会看起来不错。
将新版中的橙色渐变替换为旧版中的蓝色。然后将 TRICKS 更改回橙色。
以防万一您想听听程序员的意见。
我真的很喜欢您的新设计。
在进行这些重新设计时,您是否保留相同的标记并替换样式?或者您是否倾向于更改一些标记以适应您的新样式?
如果是前者,您应该考虑设置一个替换样式的地方,就像 http://www.csszengarden.com/ 一样,但仅供您和您的旧样式使用。这将是一项有趣的练习。
标记更改的数量足以使得简单的 CSS 切换无法实现。尽管,由于它是 WordPress,我相信有一种方法可以为用户即时切换主题。我可能会在将来研究一下,非常棒的想法=)
您好 Chris,我注意到您的 Twitter 不在。
越来越好了。有一件事:您能否隐藏打印媒体的评论?当我打印教程时,我不希望因为评论而出现数百万页。其他人可能喜欢它,所以这是一个见仁见智的问题。
为此,在评论之前始终存在“分页符”。因此,当您要打印时,您始终可以只选择实际内容的页面,而不打印评论页面。
甚至更好。
Chris,我爱上了新的设计,我真的很喜欢页脚——太棒了。
我认为新的网站布局很棒。非常清新明亮,但不令人讨厌地时尚。它有一种很好的柔和氛围。我喜欢您将搜索栏上移。它更容易找到。恐怕我没有理解搜索栏和网络社区标签之间的“联系”。但我喜欢它在那里。我很想看看您会想出什么主意。我喜欢侧边栏。空白空间不会困扰我。我也喜欢侧边栏中的丝带标题。总体来说非常好。
改版很棒!我这里也提两点建议:我认为侧边栏使用浅色调会更有助于与主要内容形成对比,并且可以减少“阴影”(这是个人喜好)。第二点是关于搜索栏,也许可以采用细边框?我使用的是 Safari 4 Beta 版,它在圆角处显示边缘粗糙。如果您的设计意图是弹出搜索栏,也许可以使用一个“反转”的标签?
无论如何,这是一个非常棒的网站,内容也很棒。感谢您的教程,我克服了对 WordPress 模板的“恐惧”。
P.S. 如您所见,英语并非我的母语,希望您能理解。:)
Chris,我真的很喜欢页脚和新的导航。之前我不喜欢悬停效果,但我非常喜欢颜色选择!
酷,Chris!我喜欢它,尤其是侧边栏。:)
非常棒。绝对是迄今为止最好的设计。
两个建议
去掉搜索框周围的大黑边框——它非常突兀,与网站上的其他任何元素都不匹配。我个人认为那里不需要任何边框。
将侧边栏背景设置为浅灰色或其他颜色,以便将其与白色内容区域更好地区分开来。
当我在此页面上选择文本时,选中文本的颜色是橙色。如何实现这种效果?
感谢分享……
不错的设计。
-moz-selection:
-webkit-selection:
::selection {
background: #B13E2C;
color: white; /* Safari */ }
::-moz-selection {
background: #B13E2C;
color: white; /* Firefox */ }
新设计的视觉效果很棒,但我怀念旧的页脚。它更酷。
Mathias
奥斯陆/挪威
非常酷。侧边栏中的 h3 是我最喜欢的部分。
我喜欢它,尤其是侧边栏中的 3D 标题。干得好!
我唯一绝对不喜欢的是搜索框周围那个又大又难看的黑色边框。它在其他美观简洁的布局中显得非常格格不入。
喜欢网站的更新!
关于搜索框的建议:也许您可以使用像这个这样的链钩,让搜索框由社区区域“支撑”。
我的建议。
加油!
我的想法也一样,关于链钩。哈哈。
但 Chris,总的来说,非常棒!
很多很棒的改进!
我当然更喜欢整体风格,而不是旧的设计。
但是我有一些建议
侧边栏,一旦其内容结束,就会非常抢眼(请参阅此处:http://bit.ly/css-tricks-a001),同时又太“白”了。
在侧边栏中添加纹理,可以是整个侧边栏,也可以只是在内容结束之后(在侧边栏结束之前添加一个额外的 div,其高度会自动调整为侧边栏内容结束与侧边栏结束之间的所有内容的高度)。
或者更好的是,不要将侧边栏底部包含在页脚背景图片中,而是将其作为单独的图片,这样您可以将其附加到侧边栏底部,当它覆盖页脚时,它会像现在一样显示,如果侧边栏提前结束,页脚就不会显示侧边栏。
(我不确定后者在语义上是否可行,这取决于您!)
对于其他方面……
很棒!我非常喜欢它。这个设计清晰、简洁、干净,并且富有活力。
——
TEM 角落
很棒的设计,Chris!
但是,我在右上角看到“由 Chris Coyier 策划的网络设计社区”的文字。
“策划”应该改为“创建”……或者是我的英语太糟糕了,哈哈?
cu·rate –
担任策展人;组织和监督。
我更喜欢之前的那个,但这个也很棒。感谢您发布教程,并花时间免费录制视频教程!您太棒了!
是的,Chris,我真的很喜欢它。我曾经是太空纹理的粉丝,但那是我的个人喜好,我理解它可能不是您的风格……
也许在空闲的侧边栏空间中添加一些 Twitter Feed 会很酷?我不知道这是否现实,哈哈。
总的来说,看起来很棒!干得好 :)
他说他打算尝试将 Twitter 功能重新添加回来。
我喜欢它,Chris,我在 Twitter 上联系过你……但是……
如何使论坛与主网站保持一致,毕竟它是网站的重要组成部分……例如在配色方案方面,将蓝色更改为更接近主网站的颜色?
他说他仍在处理论坛的布局。
很棒,但搜索字段看起来很……丑。:/
他说您可能会看到该区域的一些变化。
那就太好了。:)
是的,肯定需要更改。
我同意,它确实需要修改。
我喜欢新的设计!唯一让我感到不适的是配色方案……我喜欢橙色和棕色……但当它们组合在一起时,让我想起了 A&W 快餐店 :P
谁不喜欢 A&W 呢?我的意思是……拜托……
Chris,你毁掉了那个美妙的水下页脚!呜呜呜。
Runa
附言:我可以拥有它吗?
更简洁,但旧的设计更令人难忘……显得更个性化。此外,我同意关于搜索栏的负面评价(内容太多)……抱歉!
我喜欢新的外观,变化很棒。
不过搜索框周围的边框不是我的菜。
你好,Chris,
我从未见过如此精美、独特的三维网站设计……这真的太棒了。侧边栏简直太神奇了,哇!太棒了。
我曾经在 1992-1993 年做过开发人员……在很长一段时间后,于 2004 年重返软件测试领域……最近开始写博客。
你好,Chris,新设计和旧设计一样好,但我注意到你删除了你的 Twitter。为什么?我也喜欢颜色。我认为它与您的其他项目很相配。我们如何访问您的 Twitter?
Chris,我在评论中看到很多人已经提到了这一点,但在侧边栏中添加一些颜色或纹理可能会有所帮助。您可以将所有侧边栏内容包装在一个 div 中,以保持其白色背景,并可能在侧边栏本身添加浅色纹理,以便它仅在内容结束后显示。
这不是完美的解决方案,但它会为空间增添更多视觉趣味。在我的脑海中可能比在页面上看起来更好。如果您还没有尝试过,值得一试。否则,也许可以将阴影结束于内容结束的位置。阴影似乎有点分散注意力,而所有空白空间可能效果更好。
网站重新设计得非常好!我一直很喜欢旧的设计,现在我也喜欢新的。它仍然很容易让人认出是你,但改变是好的。
新的设计非常漂亮。至少对我来说,更简洁,也更护眼。
你的设计技能令人印象深刻!也许有一天我也可以达到这种水平。
干杯!
这里有一个兼职的潜伏者……我正在尝试为WordPress自己创建一个个性化主题,你的网站在很多方面都是我的灵感来源。
喜欢新的设计,也真的很喜欢旧的设计。旧设计有更多的纹理,所以看起来不那么“冷冰冰”,用一种好的方式,如果你明白我的意思。但我是一个完全的设计新手,所以别介意我。;)
另外,导航栏中的“渐变是新的悬停”发生了什么?
太棒了……真的,我刚开始学习网页设计(现在17岁),并且非常享受它。
你最鼓舞人心的地方是使用WordPress作为CMS……真的非常棒。
目前正在做一个作品集网站。
我也有一个关于WordPress的问题……但不会在这里问哈哈^^。
我喜欢新版本的标题,但背景和侧边栏在之前的版本中更好。新的页脚也不错。
你做得太棒了,伙计。喜欢你将烧焦橙色引入配色方案。而且你在页脚中的像素化logo也是一个不错的点缀。老实说,比UFO好多了。我之前的设计中并没有真正看到那之间的联系。:) 保持良好的工作状态。
我喜欢新的设计,但是,你是否可以考虑在侧边栏添加一些纹理,以避免看起来太单调?
干得好!我们一直关注你的文章,你真是太棒了!谢谢!
更新看起来很棒,克里斯!我唯一要批评的是搜索框:大多数人希望搜索框位于网站的头部。你在这方面投入了大量的思考——我尤其喜欢在将鼠标悬停在导航链接上时,主导航上方显示的消息。这次所有内容看起来都更协调,具有统一的外观/感觉。很棒!
我喜欢新的设计。继续努力!
不错……设计。
但是,搜索引擎的设计不够好。
我喜欢新的设计,克里斯。我最喜欢新显示效果的是居中对齐。我认为侧边栏看起来不错,尽管在评论较多的帖子中看起来可能有点奇怪。总的来说,这是一个改进!
我真的很喜欢新的设计。继续努力!!:)
嗨
我认为旧版本中带有赞助商的侧边栏看起来更好……
我不知道你在元素上使用阴影框在想什么!
旧网站很棒!
如果没坏……就别修……
不太确定底部的像素化星星……看起来有点俗气……
喜欢没有图片的页脚——看起来比原始网站更好!
我更喜欢新版本中的标题——它更小,但仍然包含logo和重要信息。
喜欢你的播客视频!它们帮助我很多!继续努力!
喜欢新的设计。尤其是你使用jQuery为导航栏提取的文本。
关于有人提出的问题,“那个搜索栏上方的奇怪东西是什么?”。我认为他们指的是位于搜索框周围的黑色圆形“框”中心的灰色凹形矩形。在我看来,好像你在背景中使用了橙色纹理平铺,并且到达了不应该显示的末端,但单独查看背景图片就证明了这个理论是错误的。它有点分散注意力,但总的来说,新设计很棒。
很棒的作品。绝对是对已经很棒的设计进行了改进。
我喜欢它的简洁性,但我认为字体有点小。我非常喜欢abduzeedo的字体大小,我认为你可以做一些类似的事情。
保重;)
需要变得角质化。
让我们回到页脚,克里斯!我希望克里斯的照片更丰富多彩。灰度级与周围的暖色调不太协调。
我喜欢这个新设计,更简洁了。我爱空白区域。最让我困扰的是搜索栏周围的粗黑色边框,它有点分散注意力,与网站不太匹配。我认为,如果你把它改成细黑色或灰色线条,它就不会那么显眼了。
你的侧边栏上有一些奇怪的冲突透视和阴影。
不错的改动,我非常喜欢它:-)
喜欢新的主题,颜色非常鲜艳。然而,侧边栏中的3D元素需要稍微修改一下(也许更改颜色)并在角度方面进行微调。
对我来说,那看起来像一个咖啡渍:) 我认为你做得很好!新设计比旧设计有了很大的改进。如果可以的话,唯一让我困扰的是搜索框周围的黑色粗圆边框。它看起来几乎像一个椭圆形,与整体概念不符。我认为这个区域可以得到明显的改进。
我本来不想发表评论,但这是一个非常棒的重新设计。赞一个;
非常喜欢更新,非常喜欢导航栏,并且同意你对它的看法。喜欢这个网站 :)
是的,我认为你做得很好,据我所知,设计自己的网站可能是最长、最难的设计?
关于侧边栏上的3D标记? (特色文章和投票)我认为它们有点深。我认为我会让左侧(灰色)稍微细一点。我认为它们看起来有点过于向右突出。
一个很棒的重新设计!
新的布局在颜色、导航位置和整体布局方面都有所改进。最先吸引我眼球的功能是围绕搜索框的黑色线条,但它并没有以一种好的方式吸引我的眼球。我很想知道,如果使用类似连接搜索框和“网页设计社区”的形状的半透明线条是否会更具视觉吸引力,同时仍然赋予搜索区域一定的视觉重量。
你好,Chris,
我检查了你的CSS,发现了这个“成长”技巧,这是什么?你能教我们吗?
很棒的重新设计,克里斯。我喜欢它。
优秀的作品。更简洁了,但我将会怀念那个飞碟。
我更喜欢这个设计。它看起来更简洁、更精致。干得好,先生!
看起来你很快就会厌倦这个布局,然后再次改变它。侧边栏的锐利边缘与标题中的所有圆形元素的组合肯定会触发这个决定……(我知道你今天很喜欢那些3D风格的“东西”,但你很快就会克服的)
无论如何,它简洁而漂亮。
我大部分时间都喜欢它。配色方案,黑色和烧焦橙色的搭配看起来很丰富,导航也很简洁。我必须加入其他那些对侧边栏设计表示怀疑的人的行列。我喜欢3D风格的标题,尽管我不确定它们是否完全符合其他部分。动态扩展侧边栏内容的想法很好,但它只需要一些东西,我不确定是什么。不过,你“太棒了”!
非常酷!我喜欢wmd编辑器。
嗨,Chris,主题非常棒,简洁就是最好,你可以将第5层回复链接设置为不显示,这样就不会显示div。
ol.commentlist li ul.children li.depth-5 .reply {display:none;}
再说一次,我非常喜欢你的主题,还有视频,我是你的粉丝:)。
附注:抱歉我的英语…
我喜欢!它更简洁,这就是现在事物的发展方向。更多地关注内容而非复杂的样式。
Chris,你为什么不使用Gravatar?
糟糕,问得太早了,我看到你确实使用了Gravatar。
喜欢它!它更简洁,这就是现在事物的发展方向。更多地关注内容而非复杂的样式。
Chris,你为什么不使用Gravatar?
嗨,我喜欢新的设计,侧边栏过渡到页脚的方式看起来不错。另外,你能做个屏幕录制或是在线信息,介绍一下旧链接在鼠标悬停时是如何动画的,以及一些关于JavaScript的内容吗?
不过设计很好,看起来更简洁了!
附注:你是如何实现鼠标悬停在链接/图片上时文本出现的效果的…
Chris,这绝对太棒了!我也很喜欢你添加的标题。“由Chris Coyier策划的网页设计社区”。过去一年我一直关注这个网站,它真的非常棒。
你是什么时候开始运营CSS-Tricks的?
保持这种很棒/慷慨的工作!
-Brian Long
好多了。那个旧的背景图片真的太糟糕了——我很高兴看到它消失了。
不过我不太喜欢长页面右侧的空阴影框。
干得好!
嗨,Chris,我喜欢重新设计的版本。它给人一种更专业、更优雅的感觉。
我注意到两件事
1. 选项卡上鼠标悬停显示的帮助文本应该居中并换行,以便直接位于选项卡上方。
2. 搜索框周围的圆角看起来不干净。我在拐角处看到一些锯齿。如果你能移除Google搜索框,只保留圆角,我认为会看起来更好。可能在搜索框中使用较大的字体。
很棒的重新设计……
我唯一讨厌的是搜索框的轮廓:D我在我的Safari收藏夹页面上看到了CSS-Tricks的不同布局。我立刻意识到,因为搜索栏的轮廓,有些东西变了。除此之外,一切都很好:)
不错的设计,但是搜索表单周围的那个黑色圆圈是为什么?
我喜欢新的设计(但有一些吹毛求疵的批评)。大部分设计使用了漂亮的清晰边缘。选项卡使用了微妙的圆角,评论也使用了与选项卡相同的微妙圆角。对我来说都很好。我不喜欢的是右侧栏和搜索(甚至评论编辑器栏)中混合使用的严重圆角。我可能会将它们设置为方形和清晰,就像网站的其余部分一样,或者使用与选项卡和评论相同的微妙圆角。我意识到半径可能与之前的设计中使用的一样,但那个设计对我来说更有圆润感,并且在那种情况下效果更好(仅代表个人意见)。
无论如何……我仍然会定期访问你的网站,因为你的内容很棒。继续努力!
我喜欢它,更整洁,感觉更清晰。很棒的工作,比之前的版本好多了。
不错。它有更多的对比度。
顺便说一句——RSS Feed的鼠标悬停文本显示订阅者数量为0。
真是漫长的等待。自从我看到网站改版的那天起,我就一直期待着这个机会,想对你的网站的新外观和感觉(设计)说些什么。我真的很喜欢这个版本。简洁、专业且易于浏览。我认为底部导航栏为空白不是什么大问题。Chris,你不需要特意填充空白区域来使其看起来完整。少即是多,同意吗?无论如何,干得好。继续努力,我的CSS大师。:)
一言以蔽之,哇。在我看来,设计更简洁了,选项卡得到了很大的改进,页脚也很棒。广告看起来有点格格不入,但我们真的无法避免,不是吗?总而言之,干得好。
没有Twitter?!我非常喜欢你在那里的帖子,我相信其他人也乐于关注。
另外,我非常喜欢所有内容,非常酷。但我并不喜欢搜索框上的黑色10像素描边。我不确定我的Firefox浏览器是否正确读取了它,因为它与设计的其他部分格格不入。哈哈。
干杯,兄弟。
Chris,
我喜欢新的重新设计…
你能尝试对搜索栏做一些修改吗?
我必须告诉你,Chris…
搜索栏需要更改。例如,我会使用投票的相同背景和样式。保持相似。我不确定你是否(暂时)这样做了,直到你完成它,但这是我的建议。
感谢你的所有努力。
嘿,Chris,
看起来很棒!有些东西肯定更好,有些可能需要一些时间来适应。但我认为这里真正的收获是,你正在改变事物以**改进网站并使其变得更好**。这非常值得赞赏,也应该得到每个人的尊重。
我知道我花了很多时间盯着PSD模型,一个比另一个更好吗?对我来说?对所有人来说?谁知道呢……但只有一种方法可以确定。事实胜于雄辩,迄今为止已有99条评论,**你真的培养了一个社区!**
~Oh!
Andy Gongea 在上面提到了这一点……但以防万一你错过了,导航栏中的RSS图标在悬停时显示“基于表格的布局有**0**个死敌”。显然,文本每次都会更改——并且仍然有效——但数字始终保持“0”。
顺便说一句,不错的设计更新。继续努力。
N
嗨,Chris——新的重新设计看起来很棒!我喜欢突出的横幅,例如Foxycart、特色文章、投票。搜索框…也许可以移除那条粗黑的线,或者使用更细的线,或者你可以用手绘的圆圈线;)
我爱这个设计!
很棒的东西,Chris,一切都融合在一起了。
现在,你计划改进你的YSlow得分吗?;)
感谢你将布局居中。真的很有帮助。
新的设计好多了,不太喜欢之前的那个,现在是时候说说我的想法了^^ 嘿嘿
我希望这是一个愚人节玩笑。你之前的那个设计是我最喜欢的任何网站的设计之一。这个…没那么好。在我看来,这是一个巨大的倒退。
侧边栏标题后面的那些3D块需要移除,搜索栏更糟糕了(搜索栏上方的那个东西确实让我笑了),页脚更糟糕了,整个新设计让我感到难过。
不过我看到其他人似乎都很喜欢它,所以也许是我疯了!
无论如何,我仍然喜欢这个网站和教程,感谢你提供的所有好东西!
我喜欢重新设计的版本,但搜索栏周围的边框确实太突出了。也许你可以使用一些更“柔和”的东西。除此之外,我想说其他一切都是改进。
我本来想抱怨搜索栏周围的边框,但已经有人抱怨了大约30次,所以我就不说了;)
不过网站的重新设计很棒——我真的很喜欢“新外观”。特别是颜色搭配比以前好多了。
我喜欢新的设计,我认为右侧标题的弹出式外观很整洁。我希望我更有创意!
太棒了!我真的很喜欢的一个功能是,当你在上面滚动菜单按钮时显示的消息。教教我,教教我……或者更好的是,教教我们,教教我们。
附注:带预览的评论框,也很棒!
我喜欢新的搜索栏!我不得不试一试。
我真的很喜欢新的布局。我认为它比之前的设计更加统一。我也很喜欢你最近更改的搜索栏。它看起来比之前那个像后视镜一样的干净多了。还有一个想法,不确定你是否真的需要它,但也许在页脚添加一个返回顶部的按钮。它不是必需的,但在评论很多的帖子中可能很有用。另外,我想感谢你创建了这样一个对网页设计非常有帮助的资源。
这个新设计看起来不错,而且对我来说更易读;肯定能让我在上面多待一会儿!