距离 v9 设计 已经过去大约一年了。您知道这意味着什么!是时候重新设计了!这绝对是迄今为止最大的一次改版。当然,您不会认不出来。它焕然一新,但所有旧内容都还在。
Kickstarter 使其成为可能
当我独自创业时,我就知道我想让 CSS-Tricks 成为一份全职工作。立即朝着这个目标重新设计网站似乎是个好主意。但为什么要躲在房间里做呢?我喜欢公开工作的想法,而这正是 CSS-Tricks 的工作方式。所以我想打开我的麦克风,并全程录制屏幕。然后,我将把这些视频提供给购买或订阅的用户。为了验证这是一个好主意,我启动了一个 Kickstarter 项目。
效果还不错:)。
现在,我兑现了对支持者的承诺。这些视频可以在网站的一个新区域中获得,该区域称为 The Lodge,Kickstarter 支持者可以访问该区域,其他人也可以根据需要购买访问权限。
屏幕截图
如果您在 css-tricks.com 之外的任何地方阅读本文,我建议您跳转过去并四处看看。但这里有一个首页屏幕截图供 RSS 阅读器使用。
此设计和所有先前版本都已在此处截屏以供后代参考。
发现设计问题了吗?
我将尝试一些新方法。我希望当您发现新设计中的错误或任何其他问题时,您可以在一个空白的 GitHub 存储库上打开一个新问题。GitHub 问题跟踪器非常棒,非常适合公开跟踪错误。
评论
很长一段时间以来,我一直在这里使用一个评论管理系统。这很简单。我会删除垃圾邮件。我会隐藏不太有用的评论。我会推荐很棒的评论。您可以详细了解。
在 v9 设计中,我从未找到隐藏评论的良好样式。推荐的评论获得了金星。在此新设计中,隐藏的评论更加明显(它们较矮且逐渐淡出)。推荐的评论顶部有一条黄色条纹。
我并不是要对那些我隐藏评论的人不友好,而是想尊重所有在访问我的网站的人。诸如“不错的帖子!”之类的评论通常不是垃圾邮件,但对任何人都没有用。如果我通过这样做来阻止此类帖子,我对此表示同意。
新增内容
The Lodge 是最大的新增内容。
在 优惠页面 上有一些新的优惠(如果您有要提供的优惠,请联系我)。实际上并没有很多全新的内容。现在重新设计已“完成”,新的内容将更快地发布。我将真正完成年鉴,向图库发布大量内容,拍摄新的屏幕录像,并大量发布博客文章。
插图
我认为值得探索新设计,以查看自定义页眉插图。由 Reagan Ray、Meg Hunt、John Neiner、Giovanni DiFeterici、Erica Sirotich、Nick Sirotich 和 Alyssa Nassner 全方位创作的精美作品。
彩蛋:将鼠标悬停在任何自定义页眉上约 5 秒钟,插画师的链接就会弹出。
尚未结束
网络的美丽之处在于它在不断变化。它不像印刷设计那样具有最终性。我有一个关于此网站我想做的事情的大清单,从微不足道到非常重要。期待随着时间的推移,此设计会发生变化。我相信,到我脑海中闪现 v11 时,它与今天相比肯定会有很大的不同。
我喜欢新的外观。手机上的功能也很棒。您使用导航按钮节省空间的方式非常简洁。我期待着看到它会变成什么样子,也感谢您发送给所有人的所有有用信息。
我认为您在使用模块的扁平化灰度方案方面做得很好,它确实将它们区分开来,并使内容真正脱颖而出。
字体选择类似于我第一次发现这个酷炫网站时的设计 v8,这让我感到怀旧。;)
不错的重新设计,非常易读且简洁。
我观察到的一点是,至少在我看来,在您的三栏布局变为单栏并隐藏顶部导航栏的断点处,网络字体变得相当模糊。页面下方的较小标题很难阅读。
还有一个问题:您是如何确定断点的?它们是基于设备尺寸,还是让设计和行长决定何时切换到新布局?
我现在受到启发,要去重新设计我的网站,该网站多年来一直是一个非常零散的过程,但迫切需要进行全面改版。
您对网站设计做了什么???如果这听起来很苛刻,我表示歉意,但它看起来像旧设计!一点也不漂亮……太糟糕了。之前的那个要好得多。
我不想再浏览它了 :(
为了回答您的问题,您可以注册 The Lodge 并观看视频,了解 Chris 对设计做了什么。;)
哇,我不知道该说什么……
就像 love247 所说的那样。对此我表示歉意,但在涉及网站设计时,您一直是我的个人偶像。我不知道该怎么称呼这个新设计,它并不难看,但绝对很无聊。它给我的感觉就像是在医院探望朋友:一切都太干净、太死气沉沉了。完全没有个性 :(
如果我能回到 v9,我会立即切换回去 :S
旧主题太棒了……
最糟糕的是:你杀死了青蛙 :'((
……糟糕?你不想再浏览它了?有人有点夸张了!即使它不是你的菜,它仍然是可以接受的。我个人认为它很好,但即使我不喜欢,这个设计也不至于“糟糕”到不想浏览的地步。还有“杀死青蛙”(上面的帖子)——你在开玩笑吧?
我对重新设计感到非常满意,并期待从中汲取灵感!
我不得不承认,新设计很无聊,而且看起来像是 5 年前免费获得的 CSS 模板。
我完全同意你的说法——这个网站的先前版本很棒!现在它真的不怎么样了。为什么做出这种改变?:(
抱歉,我不得不表示同意。
具体来说…
带有3D效果的按钮看起来真的很酷。在Safari 6上运行效果非常好。在我看来,这是一个改进——也许为较慢的浏览器提供一个回退也不错。
每个部分顶部的图形也很酷。这是个人化和吸引人的部分。
除此之外,我不得不赞同我正在回复的这条评论。v10看起来很单调,而且不太“CSS风格”。
我相信这背后有专业的投入,并且运行良好。但是,我建议尽快发布v10.1,并进行改进,让用户与您的网站建立更多个人联系,就像您在v9上使用的青蛙一样。
太灰了;-(
抱歉,但我不得不加入这个讨论……
新的首页不如之前的首页那么漂亮和鼓舞人心。
不过,我必须说,单篇文章页面看起来更好。尤其是评论区。
我也有同样的想法,对作者没有冒犯之意:/
嗨,Chris,
每当我寻找网页设计、CSS和WordPress解决方案时,你都是我的导师。但我认为你在这款新设计上用力过猛了。我认为字体是这里最大的问题。因此,我不得不赞同这里一些人的评论。
@Brian Temecula,你读懂了我的心思(O.o)
Chris,这完全令人失望。我真的很期待看到你接下来会想出什么厉害的东西,但我想我得再等8个月……
我第一次看到这个新设计时的表情
ಠ_ಠ
Chris,你杀死了小摩西,让小耶稣哭了,我不知道该怎么表达了。虽然是在开玩笑,但我更喜欢之前的那个设计。而且,当我打开Google Reader时,最期待的就是你的RSS Feed。顺便说一句,我还要加一句:你应该学习ExpressionEngine,这样会让你至少酷5英寸……至少吧。大家都知道,女孩喜欢用ExpressionEngine的男生……
人们认为我在钓鱼或垃圾信息,但我这么说,是因为看到旧网站和新网站的区别后,我感到非常难过,我非常喜欢旧网站,我很乐意浏览它。
而且,一般来说,如果我对网站的设计或功能不满意,我会立即关闭选项卡。
无论如何,我正在等待v11;)
很棒的设计……我喜欢这个主题。
青蛙在哪里?:)
看看这个网站是如何演变的很有趣。所以,Chris,继续加油!
有点Metro + 3D
新网站很棒!尽管在我的Chrome浏览器上,它有点慢,文本框的“3D”效果不太立体。是故意设计成这样的吗?你知道,边框真的不能产生很好的3D效果。
但无论如何,该网站还是令人愉悦的更新,但它真的很慢(尤其是在输入这条评论时!)。
很棒的作品!我最喜欢页脚中的通知。
哇,这不一样。感觉干净多了。我喜欢底部带你照片的那个星号。
我喜欢它,但可能需要一些时间来重新适应。哈哈。
如果我们没有在Kickstarter项目期间付款,我们如何购买The Lodge的访问权限?
谢谢!
喜欢新的设计,看起来很棒,做得好!
唯一的一点建议是代码片段部分(顺便说一句,我真的很喜欢它),左侧的菜单应该随着你的滚动而向下浮动,以便始终显示在屏幕上,因为没有它,页面看起来有点空。
这很棒!我喜欢所有微妙的细节。
我个人建议只是删除导航选项卡周围的灰色顶部/左侧/右侧边框。
这是一个想法。我会在本地测试一下,看看我是否更喜欢它。它会稍微增大点击/触摸目标,这始终是好事。我现在有点喜欢它与模块边缘对齐的方式。
我也喜欢那样!我在谷歌Chrome的“检查元素”功能中尝试了一下,在我看来,没有边距/顶部填充看起来好多了。另一种选择是将其减少到约3像素。看起来也很酷。
我真的不喜欢这个新主题:(
它有点过于简单和基础,并且用于分隔主导航按钮的模糊/阴影看起来有点廉价。
之前的那个设计更具冒险精神和趣味性,这使得它在其他网站中脱颖而出。现在它看起来平淡无奇,很无聊。
我不想显得过于苛刻,但这更像是降级而不是升级。
版本9的设计仍然可以在文章演示中找到。显示“CSS-Tricks示例”的标题仍然是v9样式。
事情变得严肃了!
Chris,你做得太棒了。我不喜欢每一件事,但它确实是新的,而且让我感到满意。我现在还不能确定我是否更喜欢新设计或旧设计,但我相信你在这个设计中改进了很多很多东西。
我真的很期待The Lodge。
无论如何,Chris,继续努力(很棒?)的工作。:)
抱歉,但在我的Firefox 15中,这个网站看起来很糟糕……我会将问题发布到GitHub上……无论如何,我更喜欢V9!
在FF 15中,我的导航栏没有显示。“k、9、Q、p”显示在顶行。它绝对是一个重新设计。我还没有确定对它有什么想法。
出于某种原因,在Firefox 15(pt-PT本地化)中,帖子和评论中的单词在不寻常的位置断行。它们没有使用短横线来表示它们在下一行继续,并且断开的位置不符合正确的语法规则。
尽管评论文本框正在正确地断行,并使用短横线来表示单词在下一行继续。
是的……如果使用FF15,图标字体肯定存在问题。
我昨晚在我的一个网站构建中也发现了同样的问题。FFOX现在似乎对break-word:break-all;做了奇怪的事情。如果你删除它,它就会到处使用连字符。我仍在研究它。
(我认为我的问题可能与display:table-cell;以及break-word有关。某种错误的交互。FFOX——新的IE!)。
有点可惜,因为它现在在WebKit中运行良好。不过,我打算把它去掉,很多报告都表明这是一个问题。
有没有Hyphenate.js或类似的JavaScript库可以实现预期的目标,而不会破坏其他浏览器?这将是一个可行的替代方案。
实际上,这个设计看起来真的很奇怪。橙色正方形上的“logo”简直太糟糕了……3D按钮并不是那么糟糕,但仍然很丑。V9.2太棒了。
哇哇哇哇哇,太棒的设计了,Chris,继续加油:D
祝贺您推出新的网站设计。我认为它看起来很棒!
非常棒,克里斯干得很好!我只有一个快速的问题(如果我操之过急请原谅我,我知道今天才刚刚发布)我支持了你的Kickstarter,只想了解如何获取Lodge的登录信息。
不知何故,我更喜欢网站的先前版本……看到那个版本,感觉就像我访问了一个来自CSS天才的网站!
对不起,我不想冒犯任何人,但是你用于超链接和按钮的蓝色?它是洗手间里那些擦手的东西所用的蓝色,请更改!
首页上的分类栏也感觉不对,它们太小了,缺少足够的填充,并且与任何东西都不对齐。
不过我确实很喜欢页脚链接上的小动画
看起来很棒,克里斯!我确实怀念导航栏悬停时的亮色,但这只是我个人喜好,很棒的工作,伙计——b
抱歉,克里斯,
这个网站看起来很糟糕。那个伪“3D”效果很丑——尤其是表单字段。
可读性/阅读体验->失败。
CSS-Tricks曾经是我最喜欢的网站之一,但现在……
是的!Tom,你说得对,当我第一次看到它时,我发现有人在css-tricks.com上放了火,因为所有东西都是灰色的,即使导航也是深灰色的渐变。
令人惊叹!喜欢它。
很棒的设计,克里斯,
你做得太棒了
但我真的不喜欢新的表单和未加前缀的线性渐变的旧语法。
:-)
但设计本身非常棒,所以你必须小心,因为它可能会导致纯粹的惊艳过度曝光
图标字体在每个页面上都没有正确显示。看起来不一致且很奇怪,但它肯定没有在这里或主页上显示。不过在论坛页面上显示正常。
这方面存在一个错误,现在应该已经修复了。如果它再次出现,请务必告诉我。
干得好!总是那么鼓舞人心。
我承认9.2版(之前的版本)是我最喜欢的,但我相信这个版本也会逐渐被我接受。
我第一次看到这个设计也以为我在Treehouse上,那个横幅太大了。
抱歉,我不喜欢v10。
嗨,我每天都访问css tricks查看新的文章和教程。我不喜欢新的设计,V9好多了,请恢复它 :)
很棒的工作,克里斯,祝贺发布,它看起来很棒。
我不确定不同部分的插图标题横幅是否适合,但它们确实很合适,效果非常好,而且我个人很喜欢网站上的伪3D效果 :)
期待屏幕录像教程!
太棒了!!!!
嘿,克里斯——你是否说过Kickstarter的支持者可以访问Lodge?如果是这样,我们如何获取登录详细信息?
谢谢,
Matt
你现在应该已经通过Kickstarter收到了一些关于此的邮件了。如果没有,请通过页脚中的联系链接与我联系。
没有人喜欢改变,但这有点复古(以一种不好的方式)
——主页不太容易导航
——文章一点也不吸引人
——它还有很多不足之处
我完全理解需要广告来支付费用,但完全不喜欢侧边栏上的广告。
我会回来吗——会的——你是克里斯,而且很酷!
哪些广告?;-)
我什么也没看到。对“AdBlock Plus”(http://adblockplus.org/)很满意。适用于(我相信几乎)所有浏览器。
这么多不同的意见……或者,更确切地说——三种意见。一些人喜欢新的外观,一些人太客气了,说它不是他们喜欢的,还有一些人喜欢以前的版本。
老实说,按钮、输入字段、“播放”按钮让我感觉想吐……
而且徽标有点糟糕。就像这里有人说的:“在之前的版本(V9)中,我感觉自己好像在访问一个CSS天才的网站。”——这是真的!!!我并没有立即产生这种感觉……
抱歉,克里斯,我希望你可以在接下来的几天里让每个人都满意……
搜索图标对我来说不起作用 D:”
cl.ly/image/0T0d023w3E1E
我真的很喜欢重新设计,尤其是CSS-Tricks框的精美悬停效果。
我想念之前设计中的彩色菜单。
克里斯,
css-tricks风格的良好演变。显然是一个新的迭代,但同时仍然非常容易识别。
我唯一要批评的是,文章/热门链接/视频框似乎太多了,看起来有点杂乱,而且导航体验不太好。不过我确实很喜欢320断点处的顶部导航。我肯定会访问Lodge来查看它(以及其他内容)。
页脚很棒;我以为没有什么能比上一个更好,但它做到了。
插图也很棒(尽管我认为后面的插图与网站的分层/单色风格不太匹配)。但是我发现导航有点奇怪,而且标题缺少徽标。
除此之外:很棒的工作,我从未想过你会这么快完成。我喜欢这个网站。
@Chris
嗨,
我在KickStarter上支持了你25美元
支持者什么时候会收到包含登录凭据的邮件/更新?
我想注册 :)
但希望无需再次付费就能直接进入Lodge
你现在应该已经通过Kickstarter收到关于访问权限的邮件了。如果你还没有收到,请通过页脚中的联系链接与我联系。
我使用的是FF 15.0,我立即注意到两件事
-主菜单中的字体图标不起作用:我看到了字符k、9、Q、p等等……
-单词中间断了!
当我早上浏览RSS提要时,看到自己被引用,真是让我感到惊讶。XD
除此之外,我非常喜欢这次重新设计。真正引起我注意的一件事是顶部的导航栏。它展示了如何正确地完成一件很容易出错的事情:悬停动画的时机。速度足够快,仍然感觉很及时,但速度也足够慢,因此你仍然可以看到它是动画效果。我经常看到的一个错误是让它太慢,以至于动画成为关注的中心。3秒的淡出效果一开始看起来可能很酷,但当您将鼠标从一个项目移动到另一个项目时,可能会难以看到哪个项目被选中。所以在这方面做得很好。
有趣的是,网页设计领域正在从苹果风格的真实照明转向微软风格的扁平色彩。前者开始看起来确实过时了。有趣的时代。
我真的很不喜欢它,旧设计好多了。我不确定你在重新设计时是怎么想的。迫不及待地期待11版
抱歉,但这次重新设计完全是一场灾难……任何通过Kickstarter为其捐款的人应该立即获得退款
对于任何有这种感觉的人(不是喷子,而是有真实感受的真实的人)
1. 给它一些时间。这个设计包含了很多内容。对(任何事物)的真实感受通常需要一些时间才能形成。Gerry在这里能够找到评论框并轻松表达自己的意见,证明该设计并非“灾难”。灾难性的设计不会让用户轻松完成目标。
2. 在站点的 Lodge 区域,有超过 150 个屏幕录像详细介绍了该网站的重新设计过程。该网站有一些真实、经验性的、基于数据的目标。其中一些需要时间来验证,而另一些已经得到证实。设计不仅仅是对美学的直觉感受,它关乎实现真正的目标。所有这些都记录在这些视频中。
Gerry,你在胡说八道。任何新事物都需要一点时间来适应,但没有人能否认设计过程中所付出的大量工作、计划、思考和考虑。
此外,Kickstarter 并不是真正用于重新设计的,我注册了 Kickstart 并捐赠了 100 美元,以感谢 Chris 让我成为一名更优秀的前端开发人员,也因为即将推出的学习资料价值是我捐赠的 10 倍。
总之,不要贬低和否定别人的工作,尤其是在你没有具体指出问题或提供可行的替代方案的情况下。
40 小时的教程来解释一个网站是如何完成的,这太多了。我认为你做所有这些都很棒,但我认为你应该更多地关注你过去所做的事情,比如解释新的编码方式,特别是现在正在使用的 html5 和 css3。画布怎么样?我从阅读你的帖子中学到了很多东西,甚至观看了你在 lynda.com 上做的教程,那真是太棒了。我也喜欢你关于 WordPress 的书籍。底线是我认为我们大多数人都期望得到与你所做的完全不同的东西,我认为这就是我们感到如此失望的原因。我只是希望你能回到教我们最新技术上来。感谢你为我们如此努力地工作。
我认为从技术上讲,该网站非常棒,但从设计的角度来看,在我看来,这是一个相当大的倒退。
在较大的屏幕上,老实说,主页有点杂乱,尽管插图很棒,但我并不完全确定它们为什么出现在网站上,它们与其他所有内容的整体外观和感觉不符。每个单独的部分几乎都感觉像是一个新的网站。
我同意改变并不总是容易的,但我认为在这种情况下,设计是不合适的,老实说,需要做一些改进。它有点像一个设计了网站的开发人员的感觉,如果你明白我的意思。
青蛙在哪里?!
你好,
我尝试使用我的 Kickstarter 电子邮件和密码登录 Lodge,但没有成功。
所以我使用我的 Kickstarter 电子邮件注册并收到了 Lodge 的新密码,但是,它也不起作用。
Lodge 准备好了吗?还是只是在进行介绍?
谢谢,
Liz
嗨,Liz
以及所有 Kickstarter 用户,
你今天会收到有关如何获取访问权限的信息=)
通过 Kickstarter 的电子邮件。
哦,天哪,iOS5 上的 Safari 在加载页面时崩溃了两次。
iOS 上存在问题,它一直崩溃。
该网站在 iOS5 上的 Safari 和 Chrome 中加载良好,但当我在 Chrome 中加载此帖子时,它崩溃了两次,Safari 崩溃了三次。
我没有尝试其他任何帖子,但肯定有一些奇怪的事情正在发生。
关于设计,我实际上非常喜欢它,微妙的细节关注和小的动画等是一个不错的点缀。干得好,Chris。
好吧,三种不同的体验,首先,在 IE8 中肯定无法正常工作(我的系统是 XP + IE8),在 FF15 中外观怪异(在菜单栏中),Chrome 看起来正常,我想,因为我真的不知道它应该是什么样子。害怕在我的另一台电脑上的 IE7 中尝试,永远不知道我会看到什么。除此之外,我本来就不是为了查看设计而来的,内容对我来说才是最重要的,只要我能看到内容,无论设计如何,我都没问题。
在 FF15 中再次检查,现在看起来像 Chrome 屏幕,现在看起来更像 Chrome 屏幕了。
设计很棒!我喜欢你在这么小的空间里塞满了这么多酷炫的东西。我唯一的一个顾虑是徽标看起来有点单调,但我相信这是为了减少带宽而做的,尽管如此,它看起来还是有点空。干得好。不过还有一个问题,我是 Kickstarter 的支持者,我如何查看 Lodge 部分?我没有收到任何像更新邮件那样的邮件。
抱歉,我没有 Github 帐户,而且真的不想现在就注册,但我想提一下我在我的 iPhone 4 上的 Safari 中发现的一个问题(iOS 5.1.1 - 不确定 Safari 版本)。
加载网站(或刷新页面)时,我可以在 FOUST 期间看到博客文章标题,但一旦它完成了它的操作(并加载了样式化的 CSS-Tricks 徽标),博客标题要么是白色的,要么不存在(尽管我可以点击它),这似乎是其他标题(如果不是所有标题)的一个问题。我也要回应“Chrome 加载缓慢”的评论,打字和页面加载速度普遍明显变慢(Win7,(v.21.0.1180.83))。
至于我对设计的看法,老实说,我认为以前版本更好。我希望这个设计对你来说并没有因为 Kickstarter 的事情而感到“被迫”。
我对这次重新设计褒贬不一。它感觉更简洁,但太“方块化”了。我更喜欢旧的颜色方案。这是我的第一印象。当我浏览网站时,它可能会发生变化。
抱歉,克里斯,
我有点失望。你真的需要重新思考一下你网站的平板电脑版本。这张截图说明了一切:http://www.flickr.com/photos/designbird_nl/7944249486/
这是一个肯定有效的批评。我相信我可以做一些事情来改进一些内容,并在那个特定的屏幕尺寸上让更多内容可见。
新网站做得太棒了!我正在用我所有能找到的设备浏览它……:)
嗨,Chris,
你的重新设计很好,因为它简洁且重点突出。不幸的是,我更喜欢你旧的网站设计,因为它有很多可爱的细节。我特别欣赏的一件事是字体。新的字体看起来很随意,FF15 显示奇怪的换行符。
Chris,干得好,非常清晰简洁。
算了吧,Chris,现在听起来你只是在找借口。
在任何网站上找到评论框真的没那么难,即使我妈妈也能找到。
整个网站完全没有一致性,排版很差,网站的整体感觉很混乱。
你使用“喷子”这个词的事实证明你并不太接受批评,这是一个简单的办法,通过称呼某人为喷子来反映批评……我自己也是一名网页设计师,我想在设计网站以及网站应该是什么样子方面,我应该知道自己在说什么。
主页上的博客文章完全迷路了,如果我是网站的新用户,我根本不知道该去哪里,老实说,我大概会在 3 秒钟内离开。
不可否认,网站上有很多好的内容,但最重要的是它必须适合使用它的人,而现在它并没有做到。
听起来你才刚开始学习网页设计。你学了一些东西,然后来到这里试图证明自己。
好吧,我现在很喜欢它。我访问该网站,很明显地标记了你可以找到你真正想要找到的内容的地方。博客文章有一个橙色的徽章,上面写着“博客文章”,热门链接有一个红色的徽章,最新视频有一个绿色的徽章,投票是紫色的。我认为它呈现得非常清楚!你怎么能说,第一次访问网站时你会完全迷路?你甚至在顶部有导航栏……(我也会移除导航栏上的边距——有人已经发了,现在找不到那个评论了。)
标题中的 TreeHouse 广告可能会被一些人误认为是你的网站的标语。我注意到的是它上面写着 iOS 开发,尽管我知道你的网站还有更多内容。
不过,一如既往,干得漂亮,如果你不介意的话,我希望我能借鉴你的一些技巧……;-)
我在 IE9 上查看了该网站。文本中的单词在行与行之间以奇怪的位置断开。此外,“留下评论”文本框中没有显示水印。所以我不知道如何填写它们。我切换到 Chrome,网站看起来很棒。
我还没有去过小屋(The Lodge),但我已经学到了一些重要的东西。“永远不要让世界来批判我的网页设计”。这是大师的另一个伟大的教训。谢谢克里斯。
嘿,克里斯 -
我刚注意到你的网站上没有任何分享功能。不确定是不是我错过了什么,但我想转发你的新设计和一些示例!
:-(
谢谢迈克尔,你这样做真是太好了。你可以从 Twitter.com 或任何数量的 Twitter 应用程序(正如你所知)发布推文。社交媒体按钮可能极其缓慢,而且在我看来有点分散注意力。我认为,当你自己撰写推文时,它们的意义更大,而不是点击一个按钮并获得预先制作好的推文。你明白吗?
后世?
另外,可能已经被评论过了,但文字换行是怎么回事——这使得阅读有点困难。
我经常访问或偶然访问这个网站,但对重新设计一点感觉都没有,而且首页在关注内容方面效果不佳,而内容应该是这个网站的主要目的,应该成为焦点。页脚有点意思,没见过类似的。
还有其他一些事情 -
你用来换行文本的东西(可能是 break word 等)使得阅读非常困难,整个单词被随机分割,我认为这真的需要改变以提高可读性。v9 非常简洁易读,我喜欢用颜色区分,非常有效,但现在没有了。
Chrome 上的评论加载缓慢。
IE9 不会显示灰色文本,以了解在“发表评论”框中填写什么以及填写的位置。
我同意平板电脑评论,平板电脑版本浪费了很大一部分宝贵的页面空间。内容变成了次要的。
谢谢,没有人能说你没有定期进行实验。继续提供很棒的技巧等,并希望重新思考你的重新设计。
PS - 你如何在页脚之前的正文/主要内容上实现分层页面效果?非常酷且有用。
我非常喜欢之前的那个设计 :/ 这个看起来有点“干巴巴”的,浏览起来不有趣,上一个更像你,克里斯,也更像 css-tricks,我怀念那只青蛙、那些颜色以及关于它的所有一切……
还有一件事,我在使用 Firefox,当我将浏览器大小调整到大约 700px 时,导航栏和搜索框都会消失……
看到这个设计我有点难过 :( 我投票支持恢复之前的那个!!
我认为人们需要冷静一下,不要对设计进行批评。似乎很多人已经将 CSS-Tricks 视为一种宗教体验或类似的东西。
这个设计很棒。我这么说并不是为了讨好别人。像这样的网站没有理由过于丰富多彩,并且充满……嗯,CSS 技巧。:) 真的。我认为,随着克里斯开始发布新的博文,人们会逐渐适应它,并意识到它对它试图实现的目标是有效的。此外,我认为有些人对 FF 上某些版本中出现的排版故障做出了反应,尽管我自己没有看到。
我唯一大的批评(其他人也提到了)是主导航栏。选项卡内部的那些阴影看起来不太对。在我看来,阴影太大。
box-shadow: 8px 0 25px 2px rgba(0, 0, 0, 0.3);
我认为这可以改进它
box-shadow: 1px 0 20px 2px rgba(0, 0, 0, 0.3)
这是一个截图
http://twitpic.com/arqy5n/full
当然,我没有对此进行任何研究,也没有参与这个过程,所以这里我完全是基于美学来判断的。所以,继续走吧,这里没什么好看的。只是我的一分半钱。:)
我就是这么想的。有些人需要适应这个设计,因为它是一个完整的改版。
我认为这没什么宗教性的,说人们已经将 css tricks 视为一种宗教体验有点居高临下。
仅仅是设计有吸引力的和不吸引力的。就这么简单。这个设计,在我看来,属于后者。
而且抱歉,你对导航阴影的“改进”并不好,它让导航项看起来有点扁平,我认为克里斯一开始并不想达到这种效果。
像其他人一样,我非常喜欢之前的那个设计。我期待着查看概述该过程的 150 个视频……也许它会改变我的想法。
但是,就目前而言,整个网站感觉非常冷淡、支离破碎,而且非常不完整。徽标很奇怪,TeamTreeHouse 广告很容易被误认为是导航链接或*此*网站的部分内容,首页看起来像一堆“模块”……信息太多,没有足够的区分,颜色……我不太喜欢,表单输入字段有顶部和左侧边框,这没有意义……看起来坏了,而且我从来不喜欢这种类型的渐变导航选项卡(它们看起来很俗气)。你使用了 CodePen 使用的背景和类似的选项卡设置,这两点是那个原本很棒的网站中看起来,嗯,很俗气的两点。
但是,页面标题很棒。而且,内部页面看起来很棒……是我不理解围绕它们的所有内容。它看起来像是 iframe 在一个非常旧、损坏/未完成的网站的顶部。
其他人提到了页脚中的酷链接,但我没有看到。在 Firefox 中,它们只是链接,没什么特别的。在 Chrome 中,它们有淡淡的下划线,当鼠标悬停在上面时,白色线条会从下方穿过链接……在我看来,它看起来坏了。
无论如何,期待视频。
旁注:我现在登录了“小屋”,编辑我个人资料的链接只是重定向到登录页面,下面的评论预览显示我的姓名是我的电子邮件地址。所以,我想我会退出以发表此评论。
我非常喜欢小屋的内容。迄今为止我在 Kickstarter 上花的最棒的钱:) 新设计也很好。谢谢克里斯!
很酷的重新设计,在 iMac 上看起来很棒,但我正在我的 Galaxy Note 上使用 Dolphin 浏览器撰写此内容,顶部菜单看起来相当糟糕。我甚至无法选择菜单项(有 4 个),而且上面有人评论的不错的移动菜单无论如何(横向或纵向模式)都没有显示给我。你可能需要研究一下……
重新设计不太好。
a). 段落的换行在 FF 上很糟糕。例如:“内容”文本在这里显示为“内容”和下一行以“tent”开头。
b). 文本框的边框似乎不完整。
c). 菜单栏是暗灰色吗?
但用户体验非常好
所以,我花了一些时间在网站上,或多或少仔细查看了几乎每个部分,以便对整个重新设计有一个更准确的了解。
在我看来,标题看起来很糟糕。左上角的这个橙色正方形有点平淡,菜单太简单了(讽刺的是,导航链接上的阴影有点粗糙)。它缺少网站顶部永恒的*徽标。v9 的标题很棒,与之相比,这个看起来有点廉价。
页脚很棒,真的。这个居中的图片绝对很棒,链接的悬停效果也很棒。页脚底部链接到 CodePen 和 ShopTalk 的部分也非常棒:深色且不显眼。页脚做得非常好。
主页还不错,但博文不够吸引人。或者也许“热门链接”块太干扰了,我不知道。交换颜色(橙色和红色)可能会有用,可以尝试一下。
在我看来,不好的地方是:博文块中不再有评论计数器/评论链接。我喜欢之前设计中的评论计数器,以便
– 知道是否有新的评论
– 直接转到评论部分
说到评论,我认为它们现在看起来好多了。它们干净漂亮,我非常喜欢这样。
论坛在 v10 上看起来特别好。旧版本有点乱。但现在很棒,除了几个小错误(可能会在几天内修复)。
代码片段页面非常漂亮,色彩丰富。v9 中代码片段的设计一团糟。我们现在可以找到我们想要的一切,它干净且井井有条。
图库非常重。加载一些内容几乎需要 2 或 3 秒。至少,它看起来很棒!我认为这只是一个性能问题,所以我相信你会想出如何处理它。
视频与 v9 中的几乎相同,所以没什么好说的。第 4 页(Delta)中有一个小顺序错误,但这没什么大不了的。
演示也一样,它非常相似。它看起来井井有条,所以我想这样非常好。反正我从来没怎么用过网站的这个部分。
年鉴的新设计非常有趣和创新,我喜欢它。但是这些字母是什么字体?在如此复古的设计中看到手写字体看起来真的很奇怪。
关于“3D 效果”,我不知道该怎么想。它看起来很复古,而且做得很不错,所以我想它很好。但与旧设计相比,它看起来有点初级,尤其是在按钮上。
此外,我认为它与非常棒的页脚(纹理、逼真的阴影、细微的渐变等)不太匹配。但是我认为它依赖于细微的细节,所以也许几行 CSS 可以修复/改进整个 3D 效果。
总之,我想说所有这些东西中都有好有坏。重新设计肯定很干净(没有难看的间隙、美丽的图片、漂亮的颜色表等),但有些东西与它不太匹配。
总之,我们找到了所有想要的东西,导航清晰直观,所以我想这是最重要的事情。据我所知,我并不是因为设计而来,而是为了博客文章/代码片段/屏幕截图,我认为 95% 的用户也是如此。
所以,请所有无法忍受新设计的人,给它一些时间,它可能会变得更好,如果不行,那也无所谓,我们都可以习惯一切。;)
顺便说一句,恭喜你完成了整个设计过程,Chris,我们会帮助你让它变得更好。 :)
看起来评论中的姓名/电子邮件字段存在一个小错误。它会显示电子邮件而不是姓名,并且没有任何链接到提供的网站 URL。
奇怪。
干得漂亮,Hugo。此外,排版仍然需要大量改进。但我相信它会随着时间推移而改进。这是一项巨大的工作量,Chris 无法立即完成所有工作!我很高兴他发布了新版本,即使有些人对此持非常负面的态度。
有趣的事实:我不得不向上滚动页面才能回复你的评论(也许可以修复这个问题)!
我仍然对标题插图犹豫不决。每个插图看起来都很棒,但我不知道它们如何与其他所有内容联系起来。现在下结论还为时过早,就像任何事物一样,我相信它们会随着时间推移而被我接受 :)
“基于级别的学习”
看起来此模块应该成为最高优先级,而不是页面下半部分与广告并排显示……
我同意……一旦可以花费更多时间使浏览这些区域更具吸引力。现在它只是一系列随机排序的文章。虽然有点用,但这不是我目前想大力推广的东西。
我认为有人已经提过这个问题了,但我还是再说一遍……图标字体在 FF 中不起作用(我仍在使用 14 版本)。导航链接看起来很奇怪……
抱歉,还有一件事,页脚中的链接在 FF 中非常单调。刚刚在 Chrome 中查看了一下,它们非常酷……
除此之外……我相信有很多关于这个过程的东西需要学习,但我并不喜欢这个设计……
批评比精工细作更容易……Gerry
很棒的网站!有些人会喜欢它,有些人会讨厌它,但最终每个人都会学到一些东西。谢谢 Chris。
恭喜你重新设计。我想知道除了把它变成一份全职工作之外,你最初的目标是什么?我很高兴看到新的设计,现在如果你不介意的话,我将四处浏览。
我觉得复古风格很有趣。不过,你使用的字体让我想起了记事本在 Wine 安装下是什么样子。
菜单图标是应该随机字母/数字吗?我不反对它们,但如果不是,则在 Chrome/Ubuntu 10.04 上出现了问题。
此外,当窗口较小时,菜单似乎无法正常工作,即当它变成导航“N”搜索时。
……既然我认为我可能掩盖了积极的部分(这不是我的本意),我喜欢这个外观=)
我更喜欢 v9 的风格,它更具原创性,我觉得这个有点乱
而且我喜欢青蛙 D
干得好,伙计。在 iMac 上全屏查看,感觉就像 pshoooooooooo
哎呀。Chris,青蛙在哪里?必须说,我更喜欢 v9。抱歉。
看起来很棒。我有点喜欢页面缩放时的行为。正如有人已经说过的,它可读且简洁,顺便说一句,比 v9 好得多。所以我更喜欢这个版本。好的设计就是更少的
喜欢插图和 3D 按钮,以及几乎所有其他东西,因为你对细节的关注非常棒。
我可能不得不同意关于浴室餐巾(链接颜色)的评论,你无法反驳事实。这不是一个糟糕的颜色选择,直到你读到那条评论。
我注意到一个问题
导航菜单项和其他地方显示的奇怪字母和数字让我有点困惑,但当我查看论坛页面时,显示了正确的图标——但只有我在那个页面上看到!使用 FF 15 win 7
喜欢页脚和表单,它与设计相符。
但是我不确定网站的整体感觉。我认为其他人已经指出了比我更好的缺陷,所以我不会浪费任何人的时间在这里发表更多批评。只是想称赞一下页脚。
用于关闭窗格的小 X 需要一些改进。对于我的拇指来说太小了。
我认为新网站整体感觉更像一个完整的资源,而不仅仅是一个博客。插图很棒,我期待着浏览小木屋屏幕截图。改变对人们来说是艰难的,但新设计很好。
很棒的设计@chris。但我喜欢旧的主题
嗨,Chris!我必须说我对这个新设计并不真正印象深刻。对我来说,之前的那个更好。但它仍然很酷!
我只是想告诉你,我不太喜欢左上角的橙色矩形,它很奇怪.. 我也遇到了同样的问题,一些人已经报告过,在 Firefox 15 pt-pt 上的图标字体。
我期待着新的内容和教程!
我还没有决定。第一眼印象并没有给我留下深刻的印象。V9 很棒。这看起来像是某个高中生的项目?
我肯定视频会很棒。
我会继续关注,也许它会慢慢被我接受。
看起来比我见过的任何高中项目都好……
新设计有一些非常有趣的亮点。至少值得考虑一下。 :)
不幸的是,菜单在 Opera Mobile 中坏了,我非常喜欢它。:) 在 480×800 分辨率下,“导航“N”搜索”按钮不会出现,并且菜单项部分隐藏。你可以使用 Opera Mobile Emulator (http://www.opera.com/developer/tools/mobile/) 进行检查。
哦,抱歉。:) 看来我错过了 GitHub 部分。 :)
那么这个重新设计发布到公众已经多久了?大约 8 个小时?我认为可以肯定地说,从功能和设计的角度来看,你在 Chris 再次修改 css-tricks 之前看到的版本肯定会出现一些改进。这些更改基于我们未来几天/几周内可以向他提供的反馈。
我个人认为这个设计不会获得任何奖项,也不是我的菜,但我仍然可以在大多数情况下找到我需要的信息,这才是重要的,对吧?这里才刚刚“刚刚”触及表面。
话虽如此,我发现了一些功能问题。除了在这里发布之外,还有其他可以发布这些问题的仓库吗?
编辑:找到了问题跟踪器。今晚会发一封邮件。
嘿,Chris,
干得漂亮!
我第一次看到它时并没有留下深刻的印象,但现在我一直在浏览网站(一些我很久没访问过的部分:我需要观看一些你的视频!),查看小木屋并查看 设计历史 页面上的屏幕截图。我不得不说:我喜欢它!
我真的很喜欢 v9.2,但这个版本完全不同,而且我非常喜欢使用它。我喜欢页眉的插图和排版。
我迫不及待地想观看所有 Lodge 视频,但我不知道在哪里能找到时间……
总之:非常感谢,并继续努力!
很漂亮!!!
订阅后我能否下载视频?我将去一个没有网络连接的地方度假,所以我想把这些屏幕截图带在身边……
不想听起来像个傻瓜,但是……这是一个“好看的脸蛋,难看的身体”的网站!
作为资源,我非常喜欢 CSS-Tricks,但它确实有点丑。
我可以想象设计师(他们有时间)已经为你设计了 v10b……主导航中的水平渐变、左上角的橙色框以及周围的深色背景(使页面感觉有点幽闭恐惧症)——这些和其他样式和处理方式形成了一个奇特的组合。
但我还会回来,因为在资源方面,CSST 是最好的。
我会考虑重新设计文本框,它们一点也不好用。除此之外,我喜欢网站的大部分内容。字体很好,总体来说设计很不错。
感谢您设计了这个新的版本,Chris。我喜欢并欣赏您对 Web 的进步方法。
来自桌面用户的反馈
Treehouse 的广告感觉与您的主 logo 竞争性太强了——它对比度更高、垂直高度更高,并且有插图。也许这是故意的,但我的目光每次都会直接跳到 Treehouse 的广告上。
如果点击搜索框后可以将焦点自动置于输入框,那就太好了,这样可以省去一次点击。
我知道之前的大多数设计都有漂亮的醒目颜色,但我认为这个设计有点过于强烈了。在(漂亮)插图下方的纯黑色子导航,在白色背景下(例如在图库页面)对眼睛来说非常刺眼。我发现当我向下滚动到页脚时,眼睛会感觉轻松一些。也许在桌面版上增加一些间距或减少纯白/黑的组合可以解决这个问题。
无论如何——这绝对是一个雄心勃勃的重新设计。这不是一个设计网站,而是一个 CSS 网站,我认为您展示了一些实用且炫酷的技术。只需确保将体验和内容放在第一位。我们不需要对花哨的界面元素印象深刻,让内容自己说话。
Chris,首先,我非常喜欢您的网站,因为它提供了大量知识。您是我所有 CSS 问题的首选资源,教会了我很多东西。我不得不承认,这个新设计不如旧设计吸引人。之前的版本非常棒,我参考它来获取设计灵感。我觉得这个版本有点平淡无奇。我也不是很喜欢每个部分不同的设计。我认为这样做很酷,但不确定在这里是否有效。这个网站看起来更像是程序员设计的,而不是设计师设计的。最后一个版本很棒,因为它设计和编程都很好,这是最终的成功。我仍然会定期访问它,并期待着屏幕截图。
在整个重新设计过程中做出了有趣的选择。我只是想知道您是如何决定停止支持 IE8 和 IE7 的?您是根据用户统计数据做出的决定吗?我想一个设计博客不会收到很多 IE 流量。
发生了什么?抱歉,您教给了我很多东西,我学到了很多,然后找到了工作。但对我来说,设计并没有变得更好,或者也许 v9 只是太超前了。但是,我喜欢新外观的一些部分 :)
嗯,感觉有点……单调。不过它有潜力,看看它如何改进会很有趣。;-)
但真的很喜欢新的评论,它们使阅读评论变得非常愉快。新的评论很好地为每个评论定义了一些空间,这使得它们易于阅读。
一些想法……;-)
1: .commentlist .children { width : 102.5% }
这会将子评论向右稍微推一点,以匹配它们从左侧推入(填充)的距离。并且还使它们具有相同的文本空间!
2. .commentlist .children li { background: #F8F8F8; }
为子评论提供一个中间灰度值。同样,有助于与父评论进行视觉区分。
另外,不是关于更改的内容,而是我喜欢现在在开发者工具中调整网站以找出调整内容的值是多么容易!
可以添加一个简单的东西,一个“返回顶部”链接对于像这样的长评论页面来说将非常有用。
滚动/滑动太多……
他不断发送新的 Web 标准。几个月后,每个时尚的网站都将使用内嵌边框半径和其他 Chris 集成到此设计中的内容。
总是喜欢好的重新设计。它与 v9 确实不同,但我仍然喜欢它。
我们使用什么字体进行评论发布?
很棒的工作,Chris!我实际上正在重新设计我自己的网站。我必须承认,从风格上来说,这是对 v9 的相当大的升级。我非常喜欢您如何进行堆叠颜色渐变以及页脚上的酷炫动画。不过我仍在尝试弄清楚您如何通过自定义搜索来执行搜索查询……:D
哇,很棒的重新设计,绝对比之前的版本更喜欢。易于阅读、简洁,当然也很美观。我唯一不喜欢的是主导航栏上的阴影。我认为如果您将其更改为下面的代码,效果会更好。
box-shadow: inset -2px 0 0 #CCC;
这么多评论。
也就是说,我真的很不喜欢它,抱歉。旧版本虽然有点繁忙,但外观要好得多。
我会称赞您在评论线程和移动版本上的改进,两者看起来都很好,并且有足够的间距。我真的很喜欢移动尺寸的开放菜单。
我认为桌面版本只是灰色太多,移动版本隐藏了很多灰色,所以看起来更好。我也不喜欢页眉,感觉像是浪费了很多空间。
说了我的想法,祝您愉快。
另外,您似乎在单词中间有一些非常奇怪的换行符,并且不是有效的连字符,只是单词中的换行符,这是编辑问题还是编码问题?
我喜欢新的设计。完美打造!伟大的工作,Chris,您的作品创造了新的令人惊叹的灵感。
@chris 干得好,伙计,你一直是我的灵感来源,我想适应新设计需要一些时间。
青蛙去哪儿了?有点想念青蛙:P
插图标题是新重新设计中最棒的部分,不过我在这条评论中看到的评论预览也很棒。
我的一个建议是增加正文副本的字体大小。在阅读并接受这篇关于 16px 字体的文章中发现的想法后,您的文章似乎难以阅读。
嗨,Chris!祝贺您进行了出色的重新设计。期待在 Lodge 中观看长时间的视频 :-)
我真的很喜欢网站的简洁外观。成为正方形很酷,尤其是在其他所有人都在遭受神秘的圆角流行病的时候。
关于 Snippets 部分的一个问题:在宽屏上,您使用某种垂直选项卡面板界面,左侧是代码片段类别,主要区域中是相应的链接列表。这在移动设备上转换为一个漂亮的垂直类别列表,相应的链接列表位于类别列表下方。
您是否考虑过在移动设备上将选项卡面板转换为手风琴小部件?我认为这可能会以更好的方式将选定的类别与相应的链接列表连接起来。我一直在考虑在我的项目中使用这种方法,但还没有找到关于此模式的任何好的示例。
再次感谢——干得好!
为什么您没有在重新设计中包含微数据格式,而在 Shoptalk 中却包含了?
归根结底,Chris 无法让每个人都满意重新设计,每个人都有不同的意见和品味,尽管我喜欢重新设计,但我需要时间来适应新的用户体验。
我不喜欢的是负面反馈,其中一些简直粗鲁无礼!
大多数人不喜欢变化,这可能是每个人都感到恐慌的主要原因。就像 Facebook 更改为时间轴时一样,您会逐渐适应它,并且您可能会发现您会喜欢它。
给它一个机会,克里斯和所有参与的人干得好!
哇!新的设计看起来很棒:)
我也期待着所有即将到来的屏幕截图和文章……克里斯,继续努力!
这是一个好的设计,但我喜欢V版。
很棒的外观,说实话我从来都不太喜欢你之前的任何设计,主要是因为它们的静态宽度,但很喜欢这里使用的动态宽度。
从一开始我就一直在关注css-tricks。在说任何话之前,我将给v10一点时间,尽管我不得不说颜色和排版绝对不是升级。你不能指望我们相信这是你最好的作品,克里斯。抱歉。
这是89,698美元的问题。你为什么不雇人来做设计?我的意思是,我知道css-tricks.com是一个个人博客,但我们之所以在这里,是因为你与前端世界相关的伟大技术,而不是你的设计技能。
我的意思是,来吧,退一步看看首页。想告诉我这是向新访客介绍包含无数精彩内容的库的最佳方式吗?
不。
我不得不在这里表示不同意见。
美学是主观的,但是网站的实际设计得到了极大的改进。它更加一致,组织性更好,视觉传达更清晰,并且似乎实现了克里斯为内容设定的目标。
这个网站是关于css技巧的,而不是关于如何制作最具视觉吸引力的艺术作品。
我认为新设计还可以,在有横幅的页面上效果很好。我觉得首页看起来有点无聊……但我支持改变,让我们看看这个设计接下来会走向何方。
就个人而言,我最喜欢的是v6 > v7 > v9.2。
当我第一次打开网站看到新设计时,我有点震惊。我的第一印象是我不喜欢它。然后几分钟后,它实际上让我喜欢上了哈哈
只有两件事我不喜欢,那就是
1) 在1920×1080分辨率下,所有内容都太大。我喜欢分辨率在1366×768左右时的尺寸。
2) 输入字段的3D效果很酷,但仅在白色背景下才好看。就像右侧的会员登录框,但不像我正在输入的这个评论框的灰色背景那样好看。有点让人想起Windows 98时代哈哈
除此之外,干得好!:)
很棒的新设计,干杯:)
说实话,我一点也不喜欢新的设计。旧网站在设计方面看起来更有力量。就像这里发布的大多数人一样,标题有点无聊,如果在开发时征求人们的意见,整个网站可能会做得更好。
克里斯,整个东西本来可以做得更好,当然不是你最好的作品:(
这个设计反映了我对响应式设计将使网页设计变得无菌的恐惧。它“不错”而且简洁,但很无菌且缺乏灵感。
有一段时间我一直在担心,构建**完全响应式**网站将使流程变得更加复杂,这几乎会迫使设计师设计更简单的网站。
这次重新设计无疑强化了这种担忧。
无论如何,我仍然喜欢你在这里提供的内容。
抱歉,我不认为这是一个好的风格;它看起来确实像是你在网站设计方面倒退了几十年。尤其是那个导航栏看起来完全不对劲。
此外,这个带预览更新的评论框表单即使在Chrome中也非常非常慢。实际上,这个包含所有评论的整个页面滚动速度也很慢。
看起来有点过时了
喜欢它!它简洁且专业。不确定为什么有些人讨厌它。这都是关于内容的,而新设计使内容更容易阅读。
你激励我去做一些我自己的重新设计
看起来很棒,克里斯:) 我可以问一下你使用的是哪个主题吗?它是自定义制作的还是来自主题铸造厂的主题?
我喜欢网站的可用性和功能性,这是重新设计中最重要因素之一,以及响应式方面。
但是,我相信我在这里代表其他人说,我觉得缺少的元素是“CSS技巧”本身。之前版本中的一些很酷的小片段,比如青蛙、时髦的悬停过渡、照片悬停效果等,使浏览网站变得有趣,并且毫不怀疑这是了解最新、最前沿CSS技术的网站。对于访问此网站的新用户,我并不认为他们会像几年前我第一次发现你的网站时那样有同样的感觉。
但是我知道,与所有网站一样,它们永远不会完成,而且我知道现在还为时过早,因此我将关注事情的进展。
祝贺新网站设计发布!
我认为人们对这个设计的评价太快了。我期待着看到它随着时间的推移如何“变形和发展”。我认为基本结构为未来提供了很多创造力。就像克里斯所说的那样——它是网络——它不应该是不变的,所以我们不应该对其第一次迭代进行苛刻的评判。
克里斯,干得好,但这并不是你最好的作品。恕我直言。
你的logo里的*在哪里?你仍然在某些地方使用它,但却没有把它放在你的logo里?!
克里斯,我将像以前一样经常来这里,并适应变化!拿出你的班卓琴,痛饮一杯冰镇饮料,享受这段旅程吧!!!
我不得不说我对这个设计有点失望,但公平地说,我刚刚开始接触它。
事情看起来更一致,也许更符合逻辑,但我认为更多的是我不喜欢它的外观。对于我的口味来说,它似乎有点过于直白了。例如,首页使用橙色、红色、绿色、黑色、紫色、青绿色和两种不同色调的蓝色作为页面上的标题。我可以看出他这样做是为了对页面上的不同元素进行分类,但我认为这使得页面看起来有点凌乱。他的旧网站过去曾经使用浅蓝色作为所有标题(我认为?)。我个人不喜欢他为导航所采用的外观。只是不太确定它是否有效。
但老实说,我为Kickstarter支付视频文件访问费用的原因是想看看他是如何解决问题的。他如何完成他的过程并弄清楚事情。我喜欢那些不太顺利的事情,你实际上可以看到并听到他试图弄清楚它们。像这样的东西对我来说非常有价值,而且他非常善于阐述自己的想法。我更喜欢旧的设计,但我也很高兴为此注册,因为我认为那里有大量信息,而这正是我最感兴趣的,而不是外观。
我认为之前版本的设计更好,我同意“设计不仅仅是对美学的直觉感受”,但这里的感觉是某种旧的东西
我同意Chris Howard关于响应式设计的观点,我担心它会使网络看起来非常单调乏味。我知道有些人会说这都是关于内容以及让所有人都能访问,但我担心我们可能会失去网络的一些美丽……
我最近才注册了CSS Tricks,我必须说我更喜欢之前的版本,我喜欢这个网站的一些东西,它简洁易读等,但它有点无聊且毫无生气。导航是我最不喜欢的东西,毫无灵感且乏味。抱歉。
但是你在这里做的工作以及你发布的示例非常棒,我将继续每天都回来。
请“填写此字段”的提示框被遮挡了。我使用的是最新版本的Chrome。
图片证明:http://imgur.com/aXWj0
CSS-Tricks 太酷了。
页面底部以前有个拿着饮料的人。我每次读文章都会对他举杯“干杯”。他去哪了?
它很好。非常好。响应式等等。
但是……我更喜欢旧版本。它在细节上做得更好。
一个罕见的问题:我能否以某种方式恢复/使用/获取旧设计?
我认为品牌标识有点缺乏光泽,灰色有点平淡,橙色看起来有点棕色。分层面板效果无疑是一段新颖的 CSS 代码,但在视觉上只是增加了不必要的复杂性。
主水平导航可以添加一些颜色编码来提亮页面,并且由于有很多部分选择,通过点击相应颜色的按钮快速跳转到正确的位置,而不是实际“阅读”它们,将会有所帮助。
我认为,当发布新文章时,需要评估网站设计是否在视觉上与内容冲突——而不是提供一个清晰、无杂乱的平台来吸收内容。
干杯
我
嘿,Chris,
我必须说我更喜欢旧的设计(v9.2)。当我看到它时,有点失望。我认为方块风格和单调的导航让我感到不适。
此致。
哦,不!
我们心爱的青蛙!
无论如何,我认为尽管设计如此,但现在功能性更好……
我不确定我是否同意外观感觉过时,更像是复古。橙色确实让我想起了 70 年代,而锐利的边缘则突显了这种复古感。让我困惑的是超链接的近似薰衣草色……它似乎与主要的配色方案(橙色)不太匹配(尽管在视频页面上它非常合理)。
并且,虽然标题设计精良,但往往会给网站带来一种花哨的感觉。我讨厌使用这个词,因为它含义过于丰富,但这是我唯一可以用来描述它的方式。有一些元素我真的很喜欢……然后有一些尴尬的东西,比如巨大的搜索链接,这让我不禁想“克里斯当时在想什么?”
我后悔没有参与 Kickstarter,因为我感觉 Lodge 会进一步解释这一切,并让人们更清楚地了解 XY 和 Z 如何结合到这个设计中。
嘿,克里斯,说实话,我很惊讶有多少人在这里给你负面反馈,却没有提出任何建设性的批评。即使我可能不完全喜欢或不会做你所做的一切,但我个人很喜欢这个设计。你不断地建立一个更大的网络,人们可以从中学习 Web 基础知识。继续努力!
我真的很喜欢新的按钮。
我一直在思考如何为我的按钮添加一点刚性感觉,而你在这些新按钮上添加的延迟完美地做到了这一点。
我真的很喜欢新的按钮。
我一直在思考如何为我的按钮添加一点刚性感觉,而你在这些新按钮上添加的延迟完美地做到了这一点。
不添加 html5shiv 是故意的吗?只是问问,因为我用 IE Tester 测试了一些网站,不知何故我最终来到了这里,并注意到网站崩溃了,我猜是因为 html5 的缘故。
首先……我喜欢你的博客,我认为你是一位非常优秀的老师,并且对 CSS 有着非常好的理解。但是……
好吧……你的(图形)设计很糟糕!不是特别糟糕,但糟糕到足以让身边的人看不下去。直到这个版本之前,都还好,因为“只有你”。但有了大约 60,000 美元的预算和成千上万人的关注,却仅仅设计出这样的东西,这真是令人尴尬。
我不确定这条评论能否让你看到,但如果我的观点无关紧要,那就问问你尊敬的一些设计师吧。
有些设计是后天习得的品味。也许我多用几次就会开始喜欢它。但就目前而言,我必须说我真的很喜欢旧的设计。它感觉更现代、更有趣,视觉上也更吸引人。这个设计——从方块到 Android 风格的字体——感觉像是笨拙过时的设计,而之前的设计本应该取代它。
而且那只青蛙很棒。拜托……你甚至不得不移除青蛙?:(
我喜欢它。不那么分散注意力,但青蛙去哪里了?我受到它的启发创建了一些类似的东西。:(
我喜欢这个设计。它简洁、清新、现代且专业,同时兼具所有这些特点。我一直认为网站的 v9 版本试图通过其图形外观变得过于复杂。太多不同的东西。
目前唯一让我烦恼的是 Firefox 15 中到处都是断词。
克里斯,干得好。
网站的新外观很好。恭喜。使用 Stack 是展示 3D 效果的好方法。:D
我喜欢深色背景的纹理。我访问了几次才注意到它。
我想在那个大橙色正方形上看到类似的纹理。我认为它需要“一些东西”。
抱歉,但 v9 版本好多了。我很想看看网站从现在开始如何发展。但目前我甚至无法理解视觉方向。抱歉,但这是一个糟糕的开始。它看起来就像一个初级设计师尝试的东西,所以拜托了,克里斯。
酷毙了!干得好,喜欢头像的大小!
哇,克里斯,关于这个新设计,我有很多(积极的)话要说——从设计的角度以及作为品牌——它简直太棒了。我能理解为什么人们怀念 v9 并希望它回来,但你真的在这个设计上付出了很多努力。就图形等方面而言,它远不止表面上的东西。
我喜欢你和内容策略师一起工作,以及你如何布局所有内容。即使是货币化,它也很完美,不像很多网站那样强加于你。
到目前为止,我还没有发现任何问题,我正在使用最新的 Firefox 更新(我猜是 15)。当我从我的手机(Android)上查看时,我遇到的问题是无法导航,因为文本和图标挤在一起,而且非常小。除此之外,它看起来很壮观!
我正在检查代码片段和年鉴,当我注意到一些代码上的滚动条时,它勾起了我以前使用 Javascript 样式化滚动条的回忆。我立即搜索了使用 CSS 样式化滚动条,css-tricks 是第一个列表,所以我点击了它。如果你将代码片段/块的滚动条样式设置为与橙色和灰色匹配,那将非常棒。
无论如何,好东西,伙计。
祝一切顺利,
Casey。
就我个人而言,我不太喜欢新设计,尽管有很多我喜欢的小功能。我还应该指出,当我尝试在我的 iPhone(4,Chrome)上阅读这篇文章时,它反复崩溃。
我爱上新外观了;)
你用什么设计这个的?我的世界?
哈!但不是,
我主要使用 CSS 和 Photoshop,以及多年来在网页设计方面的经验,以及了解什么适合 CSS-Tricks.com 的内容和 CSS 用途。
我认为 v9 提供了更好的阅读体验,而 v10 非常适合吸引注意力并整合网站的其他部分。V10 有一些很棒的排版,但方块布局使页面感觉更杂乱。此外,该网站似乎不如以前流畅。评论的实时预览对我来说非常卡顿。
实际上,在我的 iPad 2 上,网站看起来相当简洁。整体排版不错,而且色彩丰富,给人耳目一新的感觉。我同意一些评论,表单字段相当糟糕,看起来很不舒服,我认为需要简化它们。
有些人过于吹毛求疵了。设计是主观的,不可能让每个人都满意。
求求你,看在上帝的份上,在评论中添加一些分页功能,或者某种“显示更多评论”的系统。向下滚动页面需要花费很长时间,尤其是我只想发表评论的时候。
你好,
我注意到页面加载速度很慢:你们在这些网站上遇到同样的问题吗?我不认为是我的网络连接问题,因为其他地方速度很快。
克里斯,
CSS Tricks 一直是我学习 CSS 的首选网站。你的资料无与伦比!而且,我喜欢听你和 Shop Talk 上的其他人聊天。
但是,我必须说,这个新设计没有达到你所代表的标准(至少对我来说是这样)。它看起来沉闷、乏味且廉价。V9 中的模块很棒,现在它们都变成了相同的沉闷灰度。我对新设计的“外观和感觉”实在没什么好说的。
顺便说一下——我已经在所有现代浏览器(包括它们的夜间构建版本)上测试过,除了 IE10,你的字体都没有显示。使用“What Font”检查,我得到的只是普通的默认无衬线字体。我应该就此提交错误报告吗?
感谢 CSS Tricks 及其所有内容……但请把它恢复到第九版设计……
EricM
“第九版——第九版——第九版——第九版——第九版——第九版……拿着这个,兄弟,愿它能为你服务……第九版——第九版——第九版——第九版——第九版——第九版……”
你们都像小孩子一样。V9 已经不存在了。设计,设计,设计——在这个响应式时代,设计很难。你们谈论的设计是什么?几朵花和几只青蛙:D 青蛙已经不存在了!也许我们会看到龙。
遵循代码,设计就会到来.
我讨厌新设计。
V9 完美得无可替代,不过,我喜欢新的导航和标题……但表单超级丑,让我想起了使用表格创建且没有样式的表单。
V9 版本的网站存在很多非常糟糕的设计问题。所有这些问题现在都已在 V10 中得到解决。如果你有兴趣了解更多关于这些问题以及新设计如何(在许多方面实际上是经验证明地)变得更好的信息,请查看The Lodge。
我讨厌这个新版本。它让我恶心。V9 好多了。
你只是在夸大其词吗?如果不是,它让你恶心的方面是什么?你是否有看到屏幕上某些东西时会感到恶心的疾病或残疾?例如,癫痫?我很想知道这个设计中是否有某些东西会导致真正的疾病。
哈哈,Chris,由于 V10,我正在遭受鼻塞和喉咙痛的折磨。此外,我还起了皮疹。你能推荐一种用 CSS 制成的药膏吗?
说笑归说笑,我喜欢你对这个地方做出的改变。干得好。 :)
你好,Chris
更严肃地说,我确实发现文本让我的眼睛比平时更容易酸痛(尤其是评论中的较小字体)。对我来说,我认为这与行高有关。使用检查器将其增加到 1.7 似乎更容易看。我使用的是 MacBook Pro(1440 x 900 屏幕分辨率)。
除此之外,我喜欢新的设计。按钮和搜索是可爱的点缀。内容看起来更有条理,更容易浏览。不太喜欢橙色的 logo 块,但相信随着时间的推移,它会发生变化(或让我接受它!)。
超级棒。我喜欢新的网站。Chris,你做得太好了!
嘿,Tim,我喜欢你网站上的绝命毒师 logo(目前看起来比 csstricks 好)。我在 codepen.io 上找到了这个 logo,但从未点击过链接到你的网站。所以我很高兴我不得不点击你的名字。我将关注你的创意。目前我更像是一个前端性能狂,而不是 CSS 狂,但这将在下周改变。太棒了!
漂亮!我真的很喜欢旧的设计,但这个设计是它名副其实的继承者。
嘿,Chris,重新设计快乐。看看这些评论。你真是个受欢迎的人。我给之前的主题打 9/10,给这个打 8.0。(我对主题的评分通常是 1.0 或 2.0:D)。
我不喜欢这个新设计 :( 菜单样式很糟糕,所有这些伪 3D 边框让我想起了 Frontpage 2000 模板。我认为设计师想要“扁平现代感”,但也喜欢浅色投影和内斜角,这两种风格不太搭/很难完美融合,颜色也显得随意选择。尽管如此,我不得不说设计也是一件见仁见智的事情,我仍然喜欢这个网站!
我也是。V9 比这个好多了!
周围的灰色太多了,主导航看起来很复古,而且是那种不好的复古。抱歉这么说,但我感到失望,因为我对你期望更多或更好。背景设计可能有所改进,但实际用户看到的是另一回事。
您好。我想祝贺您完成了新的设计……但那样就是在说谎。对我来说,这不是好看或难看的问题。新设计让我头痛。我的头和眼睛真的对这种缺乏对比度的设计感到吃力。之前的那个设计对我的身体要好得多。
可能听起来很疯狂……但确实如此。你能添加一个切换按钮,或者在切换一些颜色选择器后让我设置一个 Cookie 吗?那太好了。
整个极简主义风格让人感觉很贫乏,而不是你之前那种丰富的布局。如果你咨询过 UI 设计等方面的专家……好吧,那你被骗了 :) 真的。这简直是混乱和贫瘠的极致。这让我想要吃阿司匹林然后去睡觉。
请稍微加点料。我也想念那只友好的青蛙!
从美学角度来看,我更喜欢之前的版本。它就像一颗宝石。我认为那是你在设计方面做得最好的作品。
这个版本也不错,别误会我的意思,但我认为这属于当你做了一些很棒的事情并且期望值很高时会发生的事情。
我注意到,当我键入这些文字时,我的光标速度非常慢。
Chris,你难道看不到区别吗?!在我看来,V9 很棒,而这个太糟糕了!
亲爱的 Chris,
logo 周围的大橙色区域不太好,在大屏幕上看起来很糟糕。
请不要把它与屏幕的左边缘连接起来
还有你的主菜单图标本可以做得更好(主页链接图标居然是暂停图标!!!??)
而且一切都太大了
L7
Chris,你有可能把 V9 的设计恢复回来吗?
或者也许很快设计一个 V11? :)
不错的设计,Chris!!!!
但你的 logo 可以做得更好。
很难理解有什么新东西
顶部导航不像以前那么有趣了。
同意。那很有趣,还有青蛙的大小调整。
嗨,克里斯,我对你十分尊重,你一直都回复我的邮件,非常感谢。我阅读了上面大部分的评论,我真的很想看到一个用图表展示优缺点的真实反映。不幸的是,这个设计不合我的口味。也许我希望能看到更多你网站的特色。我非常喜欢那只青蛙,也喜欢你旧的页脚,鼠标悬停在你的照片上时的那种轻松感。新设计中也有一些不错的东西,比如搜索框。我希望能看到你在主菜单上做一些很棒的技巧,但这次有点小失望。我希望我没有加入那些因为浏览网站而感到极度不适的人的行列。不过,访问这个网站我不会得疱疹或耳部感染,但为了以防万一在浏览时睡着,我需要设置闹钟,因为我无法看到v9那些漂亮的、古怪的颜色了。
保重,克里斯,一如既往,我期待着看到网站的进化。
PS,为什么你不给每个主菜单设置不同的颜色,每个菜单都有自己的图标,可以淡入显示?(这几乎是我希望看到的)
此致,C
就像Paul Irish说的:“AAAAAWWW YEAAAAHH!!”。我不得不进行一次“滚动马拉松”才能到达页面底部并留下评论,哈哈!克里斯,你重新设计的网站很棒,太棒了!感谢你成为互联网上最大/最有用的资源之一!
哦,我的天,你都做了些什么?
你的网站现在成了第二个作者的网站,我以前真的很欣赏他们,但现在他们彻底毁了它。
但是,往好处想,也许我能够赶上你(设计方面……应该很容易),然后对我不那么最新的网站做点什么。哈哈
我看到新设计很酷很简洁……
我看到评论框下面有一个评论预览……我想知道如何在WordPress中实现它……你能做一个关于它的教程吗?0_0′……?
谢谢克里斯……
我真的很喜欢新设计。简洁、简单且井井有条,而且在iPhone和iPad上看起来很棒。有时在视频方面遇到一些问题,但我相信它会得到解决。总的来说,克里斯,你做得太棒了!
嗨,克里斯,我喜欢新设计……就像我之前喜欢所有其他版本一样。既然10是一个“圆数”,你为什么不发布一篇帖子,包含CSS-Tricks所有设计版本的截图呢?那样会很棒,可以看到它是如何变化的……如果你已经发布过,而我错过了,请见谅 :)
@Miguel – 所有之前的版本都可以在这里找到
哇,克里斯,众筹和新设计做得不错。我在众筹活动进行时没有留意到,但你给支持者提供了一些很棒的福利。
众筹奖励之一是访问以前的CSS-Tricks主题,还有其他地方可以获取吗?例如Lodge的Bear版本或其他奖励?
网站看起来很棒,我现在才开始学习视频教程——已经开始享受了!
为什么CSS-Tricks的logo不是放在h1标签里(它只是一个a标签,带一个span),并且主导航不是放在ul标签里?在我看来,这样语义化程度较低,对SEO也不利,但你可能(也许,肯定)知道一些我不知道的东西。
我喜欢将我的h1标签用于文章标题等内容。不过,在首页上使用h1标签可能是个好主意,我应该去处理一下=)
我个人认为从语义上讲,导航不需要放在ul标签里,nav标签本身就能表达这一点。我曾经听一个使用辅助技术的人说,仅仅是一堆链接的菜单实际上比列表更容易使用。
老实说,我个人认为之前的版本更好……
我想念那只青蛙,伙计!把那只SVG青蛙找回来。
我喜欢你的博客和旧的设计,但v10真的不符合我的口味。我感到很抱歉:( 所有东西都太大了。这个设计让我想要立即按下⌘-。
这次重新设计完全是一场灾难。任何认为这个设计好看并且以设计为职业的人,都应该辞掉工作。
克里斯,正如你所看到的,反对的声音越来越多。你是否考虑尽快完全重建?我相信像你这样的人,重建/重新设计应该轻而易举?Ray的评论算是画龙点睛了,我倾向于同意他的观点。
哇,多么毫无意义的恶意评论。这里有很多巧妙的设计,还融入了真正令人惊叹的CSS。
如果你不喜欢网站的外观,那没问题(我承认我自己更喜欢v9),但变化总是让人一开始难以接受,没有必要如此恶意地贬低一个为网络社区贡献如此之多的人的工作。
祝贺你,克里斯,我无法想象阅读这么多失望的评论会是多么令人沮丧,但它确实是一个非常聪明的设计,我能看出你投入了很多努力。
我不喜欢它,抱歉这么说。之前的版本完美无缺。
完全同意。这个设计是一个倒退。
这个V.10似乎不那么风格化了,但我认为我有一个更高级的HTML工作要做,我理解CSS的演变将是下一步……如果我错了,请纠正我。此致,Mario
你好,
Chrome浏览器中字体“Gotham”出现问题。
屏幕截图:http://imageshack.us/f/525/20120910173003.png
你是H&FJ网络字体测试版用户吗?你是如何在标题和导航中使用Gotham字体的?
在我看来,从视觉上来说,这是一个倒退。我更喜欢v9.2。
当我浏览这些评论时……我注意到克里斯收到了很多赞扬,但也收到了很多批评。我认为当克里斯回应批评时,却忽略了赞扬,这很有趣。
好吧,网站看起来不错,兄弟。“简约是最高级的精致。”
*
我认为这是一种人类的反应。一个喷子就能毁掉任何人的一天,即使是在一片友好的氛围中。相信我,我爱你们所有人。人们来到这个网站并关心它,这是发生在我身上最好的事情。我也坚持我所知道的——这个设计比之前的版本都要好=)。
克里斯,你说的太好了。有时人们需要一点时间才能理解进步,仅仅因为我们是习惯的生物,不喜欢变化。继续突破界限,为更好的网络(和移动端)铺平道路。
我认为这个设计考虑得很周到,内容呈现得非常清晰且有用,你很好地解决了之前存在的所有问题。我认为像代码片段页面以及单篇文章的显示方式都非常棒。
但是,我仍然认为之前的首页看起来更好。它更有趣,总体上更吸引眼球。也许可以使博客文章/热门链接等的彩色标题部分不那么简单?使用更柔和的颜色,添加一些小图标,或者干脆全部移除?我还认为三列需要有更明显的区分,目前它们融合在一起,有点令人困惑。我注意到在截图中,你曾经在顶部使用过真正的标题。
另外:Chrome浏览器中的一些粗体字体有点“模糊”。出于这个原因,我最近避免使用Google字体。
还有:青蛙去哪了?!;)
抱歉,看来你没有使用Google字体API,我只是完全假设了,因为我认出了那种模糊感!
哦,不……我喜欢极简主义和简洁的设计,但是……在这种情况下,我必须承认我不喜欢这个。旧的设计更好。但没关系,保持你的作品质量,我就很开心;)
哇,多个验证错误,而且设计真的很糟糕,克里斯,发生了什么事?
个人来说,新设计逐渐被我接受了。简约且设计精良。不过我确实更喜欢上一个版本。尽管如此,我还是非常喜欢窄屏/移动设备上的导航栏。
我唯一的一个抱怨是日期的颜色对比度不够。我发现很难阅读。此外,在我的iPod 3代上出现了崩溃问题,当我尝试阅读评论时。在我看来,这可能是页面太长导致的问题,因为在我点击“显示更多”之前,它运行良好。
总的来说,克里斯,干得不错!
哦,就像之前说的,我怀念那个SVG青蛙 :(
青蛙死了 :D
非常棒的设计。我喜欢“评论预览”框。而且在整个页面中,颜色搭配得很好。
嗨,克里斯和大家,
我非常喜欢旧的设计,也喜欢这个新设计。我喜欢主导航和搜索栏现在的位置,而不是v9版本。我觉得它更容易导航,并且比以前更显眼。
新设计中的输入框有点难用。如果我没记错的话,在v9中,占位符会淡出或移到旁边。我认为这种响应性更好。
我喜欢网站的简洁性。在我看来,它运行得更好,并且使用类来为博文、热门链接等着色,是一种对博文进行分类的好方法。
说真的,没有青蛙,我以为我进错网站了!不过干得不错;)
我非常喜欢导航按钮和页脚——尤其是链接悬停时到你的头像的“脉冲”效果。
但除此之外,网站的其余部分虽然不难看,但我认为有点低于你的标准。感觉有点拥挤或嘈杂。我希望你不会觉得我们这些不满意的人太粗鲁。
我始终感激你不断传授的知识,尤其是你几年前在YouTube上发布的关于在PS中切图等设计的视频。 :)
嗯,我敢肯定青蛙是Treehouse的广告,伙计们。
嘿,克里斯!
这里只是一个简短的评论……
喜欢新设计……!
我昨天在推特上告诉你,我认为搜索表单的焦点存在一个bug。重新思考和阅读后,我认为你可能觉得它不太好。如果是这样,我真的很抱歉……
一如既往,非常感谢! :)
我一直很喜欢这个网站,它激励我做了更多的事情。当我看到这个新版本时,我很抱歉地说我不喜欢它。旧版本有趣、快乐且色彩丰富!这个版本看起来就像一个商业网站。我认为,如果添加足够的动画和更多交互,它可能会非常酷,但现在我还没有买账。
不过把青蛙放回来,一切都会好起来的。 :)
我喜欢你网站的文章,所以我肯定会继续回来获取你发布的优秀内容。话虽如此,我无法忍受这个新设计。颜色选择、布局、样式,除了评论区之外,几乎所有东西都糟透了。
但嘿,这只是我的意见。继续前进吧。我喜欢你们在这里做的其他所有事情!
缺点
✗ 青蛙不见了
✗ 颜色消失了或搭配得很奇怪
✗ 页眉视觉上混乱(标题与广告竞争)
✗ 首页视觉上太繁忙,难以快速浏览
✗ 纤细(页脚“闪烁”)和俗气元素(手写字体)的混搭令人困惑
✗ 盒子、按钮和导航上的阴影方向不一致
…
中立
– Metro/扁平化风格(不是个人喜好,很快就会过时)
优点
✓ 页脚
✓ 网站易于浏览
✓ 非常响应式的设计
✓ 易读的字体大小!
✓ 文章和评论整洁
总体
我不喜欢它。新设计的问题在于它不一致且缺乏个性。保留优点并注入个性,你就能赢得我们的芳心。
过去,我经常访问这个网站来学习更多关于CSS和HTML的知识。我现在仍然访问它。
我可以说,评论或某些其他方面过去需要很长时间才能完全加载。有时我访问一个CSS-Tricks页面,五分钟后页面仍在加载。这个问题已经消失了。保持开放的心态,我对此表示赞赏。
这个页面在最小宽度(例如手机)下也非常易读和易访问。
遗憾的是,这一切的代价是CSS-Tricks的灵魂。当在桌面尺寸下查看此页面时,该网站感觉像是由机器人构建的。唯一有生命的地方是此页面的最底部区域,特别是带有橙色星号和带有Codepen/Shoptalk纹理的页脚。
此外,字体大小的自动调整很痛苦。当我最大化这个网页时,所有东西都显得过大。我理解16px的字体大小是可行的,甚至受到一些人的鼓励,但此抱怨也包括关于调整大小的“所有内容”。整个膨胀方案导致了不愉悦的感觉,特别是因为我最初以13px的字体大小阅读此页面。
我希望你的重点放在技术方面,并且在未来能够添加必要的润色,使这个设计人性化。如果做不到这一点,至少要将此批评和其他人的批评考虑在明年的重新设计中。
当前设计中没有人的灵魂,给人一种印象,即你允许一个完全不同且更有才华的人设计了这个网页的先前版本。不幸的是,我们都知道这与设计当前版本的人是同一个人。
发生了什么事?
克里斯,我闻到一股新的Facebook群组的味道,“拯救CSS Tricks青蛙群组”
我以为我输错了网址,所以我用谷歌搜索了一下,然后又回到了这里。然后我以为可能是CSS或其他东西导致网站崩溃了。
总之,我想说我非常喜欢v9,但这个版本看起来不对劲。尤其是在大屏幕上。
我也这么认为,我不敢相信这是CSS tricks :( 我用谷歌搜索了一下。
嘿,Chris,
很棒的工作。我喜欢这个设计理念。简洁且矩形化。
我想请你帮个忙,你能发布制作这些3D按钮的教程吗?
谢谢
我把代码放在codepen.io上了,Ali
http://codepen.io/anon/pen/LftEz
谢谢亲爱的Paul。
我衷心感谢你。
嗨,Chris,
这里的工作太棒了!
你的网站是一座宝库,感谢你与我们分享这些知识。
虽然我不是棕色系的粉丝(是的,我不得不抱怨,抱歉),但我真诚地喜欢整体的重新思考。
有一些“卡通化”和几何化的东西我真的很喜欢。
来自法国的问候
哦,我还没找到青蛙。(好吧,打我吧)
我喜欢新设计。我喜欢它的简洁性。我喜欢网站的直观性,特别是覆盖层部分(例如评论回复)。3D效果很好,并且控制得当。我非常喜欢深灰色的主体背景,页脚也很棒。
我唯一(建设性)的批评是,使用的“Whitney”字体在Windows用户上的渲染效果不太好。
总而言之,我离不开CSS-Tricks,我感谢克里斯的奉献!
你好,
我从第6版开始关注。
我捐赠了25美元。
观看过网站上的所有视频。
现在登录THE LODGE也在观看 :)
但我很遗憾地说我不得不在你网站上使用“StyleBot” :(
这是我万万没想到会在宇宙中哪个网站上这么做的。
耻辱的是,这个网站只有一种颜色:灰色;
看起来很单调,一点都不个性化。
某些地方的可读性受到影响,因为对比度不够。
嗨,Chris,
我一直关注你的网站很久了,但我认为你最好的设计是v9.2……我不知道。我只是不喜欢v10的新布局和配色方案,它在设计方面似乎倒退了一大步。毫无疑问,从技术和可用性的角度来看,它一如既往地出色,但你们旧的设计似乎更有魅力,每个细节都倾注了更多的思考和努力(我想念那些青蛙……)。它看起来非常机械化,毫无生气,就像一台机器设计出来的一样。
第一次在我的iPhone上看到新设计,觉得它看起来很酷。我想注册小屋,然后在电脑上查看了网站,就停了下来。我关注这个网站很久了,这是我最不喜欢的一个设计。我不愿意这么说,但它看起来真的很丑,抱歉。
我个人认为这个想法很好,如今很多网站都试图过于花哨,这表明一些复古元素加上一些活力,效果远不止于此。
但是,标题等的主要字体确实让它大打折扣。它们看起来边缘像素化,这对于一个css网站来说令人失望。
我并不太喜欢新的重新设计。在我的24英寸宽屏上,主页看起来很杂乱,而且对眼睛有刺激。真的需要很长时间才能习惯它。我不得不说,在iPad/iPhone上,新设计看起来很惊艳。在这些设备上,情况正好相反,阅读起来是一种真正的享受。我不确定这到底意味着什么。
我刚刚查看了移动版本,同意你的观点。移动版很棒,非常清晰简洁。
嗨,克里斯,我等了一段时间才评论你的新设计。我得说,一开始我不喜欢v10。但现在我开始喜欢它了,我感受到了它的现代感。
我有一个建议。在评论区,头像下方,有一些空余空间,可以用于点赞/点踩系统,我认为这是一个让有用的评论脱颖而出的好方法,这样读者就可以阅读评分最高的评论。
我像往常一样不断回到这里寻找内容,每次看到这个设计我都会感到烦恼。我只是不知道在哪里留下这样的反馈,但我想这里就是了。
这个设计看起来真的很不专业,很老旧。考虑到之前的网站,我对此感到非常惊讶。除非之前的设计决策是由其他人做出的。这个设计绝对是一个失误。
你做得很好,设计真的很棒!
祝贺并致以最诚挚的问候
伦纳特·索特