之前，当我为这个网站发起 Kickstarter 项目时，我提供的奖励之一是，对任何网站进行公开或私下的评论。唯一接受的人是 Gus Fune，他选择公开评论他参与的一个网站：epicawesome.co。感谢 Gus 让这次成为一个公开的学习机会！
这是桌面视图
但在您到达那里之前，网站有一个加载屏幕
这在 Flash 时代很常见，但现在您不太常看到它了。这个网站确实是一个普通的 HTML5 网站。有一个“预加载器”脚本，它必须做一些花哨的事情，确保在显示网站之前加载图像。当预加载器完成后，覆盖层会滑开，显示网站。
人们很容易纠结于网站的大小，并建议减小尺寸以避免预加载。但在这里我不太介意它。我的加载时间大约是 8 秒。如果没有预加载器，我可能会感到恼火，但显示加载进度让我保持耐心。请记住，我的宽带网络相当不错。如果我的 8 秒对其他人来说是 60 秒，我敢打赌他们不会有同样的耐心。
我建议进行一些低带宽测试。有一个名为 SpeedLimit 的 Mac 应用程序可以帮助您做到这一点，方法是降低您的快速网络速度。
这是网络瀑布图
DOM 就绪时间在健康的 1 秒内发生，这使得探索另一种加载策略变得更有吸引力。也许您可以只立即加载顶部最大的图像，然后等待滚动事件触发其余图像的加载。作为奖励，您将节省带宽。
我不会纠结于巨大的图像。看起来这正是您想要采用的风格方向，如果您愿意，可以这样做。我将图像通过图像优化器运行，但没有节省任何空间，所以您正在正确地进行优化！
当您向下滚动页面时，内容被划分为几个部分，每个部分都有新的颜色、新的样式和新的英雄背景图像。如果屏幕足够高，下一个部分就会显示出来，并且过渡相当突然。
虽然将这些图像分开而不是一个巨大的图像（出于缓存原因）可能比较好，但也许可以设计成让它们更平滑地相互转换。我还认为，检测一下视口大小并使每个部分正好占据一个浏览器窗口大小是个好主意，这样下一个部分就不会在滚动之前显示。
移动版本是这样的
不向小屏幕移动设备显示 7.7 MB 版本是一个明智的举动！
但是，这个版本与另一个版本差别太大，让我开始思考。这对您来说是否足以作为网络体验？如果是，那么这种极简主义是否可以出现在大屏幕版本上？大屏幕版本非常强烈且色彩丰富，您甚至可以将其描述为“极繁主义”！我想知道人们是否会意识到这是同一个机构。
我认为，移动设备上的用户可能希望了解的信息不仅仅是您的简介和电话号码。大屏幕版本解释了您的服务，展示了您与之合作过的客户，展示了以往工作的示例等等。我可能会尝试使移动版本的內容更加接近，并使风格方向更加接近。
移动设备检测也始终很困难。在视网膜 iPad 上，它会进入移动模式
我认为该设备可以很好地处理桌面版本。
一个简单的改进可能是提供某种“查看完整网站”的操作。
我觉得网站可以从规范一下排版中获益。我统计了大约 13 种不同的字体在使用。其中一些只是有趣的变体，我理解这一点，所以我不希望您认为我只是在重复一些关于在任何特定情况下可以使用多少种字体的随意规则。
以下是一些具体内容。
Tahoma 仅在此处使用
我觉得您可以选择其他已经在其他地方使用的字体，或者选择一种比 Tahoma 更能体现“场地标志字体”的字体。我认为这是一个绝佳的机会，可以更进一步，确保这些字母与图像中的线条对齐。这将证明您对工艺的专注，我知道我个人会欣赏这一点。
“SeasideResortNF”字体仅在两个地方使用。其中一个是这个语言切换器
我觉得这种字体设计用于比这大得多的尺寸，并且在这么小的尺寸下效果不好。这是一个将其替换掉并选择网站上其他正在使用的字体的绝佳机会。
“eurostileregular”字体在这里看起来不错
所以我会在这里再次使用它，而不是在网站上首次使用 Helvetica。
文本隐藏在灯后面的方式非常巧妙。
我可能会看看您是否可以以某种方式引入阴影来完成深度错觉，并可能放弃 Courier，而使用已经建立的其他字体之一。如果它来自打字机或类似的东西，当然可以，但现在看起来就像墙上的海报，可以是任何东西。
至于资源，我已经提到图像经过了很好的优化，这很棒。CSS 已被压缩，JS 也被压缩，所以这方面做得很好！由于这是一个单页网站，您可以将三个 JavaScript 资源（jQuery + 预加载器 + 脚本）压缩在一起。它们并不大，所以这样做不是一个坏主意。
样式表位于头部，脚本位于页脚，完美。
从语义上讲，在我看来它非常可靠。头部是<header>。部分是<sections>。每个部分都有一个合适的头部。仅用于样式的内容是<div>。
我有一个建议，就是将导航放在一个无序列表中。现在它只是<nav> <a>——这在语义上足够了，但在经过一些健康的社区讨论后，列表中的导航似乎是最佳实践。
评论 CSS 有点困难，因为老实说，我认为像这样的单页小型网站不需要对其架构选择进行过度审查。但为了进行评论，让我们找一些东西。
我特别关注style.less文件。
LESS可以进行包含，所以无需在顶部转储 Normalize.css 的内容。
@import "normalize.css";我喜欢 Normalize，但对于像这样的单页超风格化网站来说可能有点过头了。它的大约 2/3 内容处理了您在这个网站上没有的元素。而且您无论如何都会重置其他一些内容。例如，Normalize 设置了标题的边距和大小，而您稍后会重置它们。
有专门用于 box-shadow 和 border-radius 的 mixin，现在不再需要了。关于供应商前缀，我建议完全删除它们，并在构建过程中使用Autoprefixer。
样式表中使用了相当多的 ID。您可能在哲学上不同意我的观点，但我喜欢永远不要使用它们来设置元素的样式。我尤其要避免像您在某些情况下那样对它们进行标签限定，例如section#home。ID 是唯一的，因此例如永远不会有article#home。如果您喜欢为了可读性或提醒而使用标签，您可以使用/*section*/#home。对任何内容进行标签限定通常不是一个好主意，只有很少情况下您应该设置元素本身的样式（而不是使用有意义的类），所以这通常是需要注意的事情。
在底部，您有一个视网膜显示屏媒体查询，您可以将其简化为
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}希望这对您有所帮助，Gus！
如果其他人有任何有见地的评论，请在评论中分享。
哦，如果所有评论家都像您一样亲切和富有建设性！感谢您提供关于导航中列表的链接。这确实是一个非常令人困惑的对话。
虽然该网站与我制作的网站类型截然不同，但我仍然从这次评论中学到了很多东西。谢谢！
非常棒的评论！如果我的任何项目（无论是网络还是印刷）能够得到 1/5 的评论，我都会感到非常幸运。谢谢！
这是一种才能，能够在批判的同时保持完全友善。哇。对我来说，批判和友善似乎完全是互斥的。非常棒的分析。
我喜欢用大型彩色图像打造复古风格设计的想法。这与我们最近经常看到的极简主义、Helvetica 风格的扁平化设计相比，是一种很好的改变。顶部的史诗电影霓虹灯标志、整个太空科幻飞碟太空交易以及底部的复古电报员（或其他什么）都非常符合这个概念。
但是，在我看来，有一些东西不利于这种令人敬畏的复古感觉：首先，灰色的头部。它看起来很沉闷和无聊，削弱了网站充满活力和友好的外观。我可以想到两种改进方法
这基本上就是我所有的想法了。祝你好运！
嗨，Max，
我一直很喜欢你对美学的反馈。我正在记下很多笔记，很快就会进行调整和修改。
我想分享“精选作品”的问题：本地化。这可能是一个巨大的问题，尤其是在不同语言的作品大小不同的情况下。该网站最初是用巴西葡萄牙语制作的，然后我将其本地化为另外三种不同的语言。出现的一个问题是设置像这样的大标题中的短语。
对于未来的多语言项目，内容翻译肯定会在设计阶段之前进行。它可以节省你很多时间来修复问题，或者不得不坚持某个在特定语言中不完美的细节。我希望网上有更多关于国际化设计的资料。
你声称与可口可乐巴西合作过，但你的两个例子都是WordPress安装。为什么没有更多例子？
你能链接到一些知名品牌的案例吗？如果没有，这个宣传似乎具有欺骗性。
就我而言，我认为“加载”页面非常糟糕。但它可以让网站在自动网站测试中获得不错的分数:-)
你敢于公开接受批评，这一点很棒，所以谢谢你。
大部分工作都是通过广告公司完成的，由于合同义务，我们无法将案例上传到下面的部分，但它们允许我们指出我们曾与这些客户合作过。如果你将鼠标悬停在每个大品牌上，它会显示我们合作过的代理机构。
我希望将来我们能够上传一些案例，包括更具洞察力的反馈。如果你想查看，在Facebook粉丝页面上有更多关于项目的详细信息。
好吧，第二部分中的那个倾斜文本在我的屏幕上看起来很糟糕：http://i.imgur.com/dq9dEUn.jpg
我使用的是Vista，并使用最新版本的Firefox。
是的，在我见过的任何浏览器中，文本旋转都不完美。我在Mac上使用Chrome，它仍然有点偏差，当然没有Firefox那么糟糕。
@Dan – 你是对的，如果设计需要这样做，你可以执行以下操作。
-webkit-transform: translate3d(0,0,0);
基本上允许你的GPU进行渲染 :)
注意：translate3d需要谨慎使用，如果过度使用，它可能会严重影响网站的性能。我最近经常看到这种情况 :(
我注意到另一件事。“精选作品”部分基本上是你整个网站上最重要的部分。这是人们最感兴趣的内容。
因此，你应该提供更大的图片（！），也许为每个项目提供更详细的描述，并且*绝对*提供指向网站的链接。
法语翻译非常糟糕，有很多错误（看起来像是谷歌翻译）。对于一个专业的网站来说，这是一个不好的点。仅仅因为这一点，我不会联系他们。
嗨，Emmanuel，
我是负责翻译的项目经理之一。我自己不是说法语的人。你能指出一些问题，以便我能够解决吗？
如果禁用JS，网站无法加载。这是一个相当大的缺陷…
不过，你允许公开进行这种批评，这一点值得称赞 :)
我注意到它在我的Commodore 64上也无法加载，如果我禁用我的互联网连接，所有链接似乎都已损坏…
这绝对是我有史以来最喜欢的帖子！
另外，> 使用所有WC3指南开发的项目> – 你可能需要将其更改为W3C :)
“我渴望接受挑战。我喜欢与在各自专业领域表现出色且像我一样渴望挑战的团队成员合作。我希望在一个不仅应对局限性和挫折，而且寻求机会的环境中工作。”
当然，正如名字所反映的那样，该网站很棒。但网站的大小太大了，大约8MB。客户根本不会担心这个大小。他们只是展示自己的卓越来吸引客户。
查看这里…. http://tools.pingdom.com/fpt/#!/cczcHZ/http://epicawesome.co
@Gus Fun：以下是法语翻译的更正：http://pastebin.com/LHQwRYAM
顺便说一句，Gus，设计很不错。我喜欢复古风格；)
哇！你愿意提供这些，真是太棒了。
Benjamin的例子启发了我。西班牙语翻译的更正可以在下面的链接中找到。
http://pastebin.com/4cYb2znX
哇，伙计们！你们太棒了！我将在接下来的几个小时内发布它们！太棒了！
我完全同意这一点，但经常想知道哪些元素**最适合**直接设置样式，以及在什么情况下。是否有普遍的共识？
为段落添加一些边距…删除/添加/更改列表样式…设置pre/code样式…主要是基于文本的内容。
作为一个即将成为开发人员的人，我必须说我从你的设计风格中学到了很多东西。我喜欢视差滚动的简约使用 - 它不会过于突兀，并且颜色组合与复古主题完美融合。
移动端方案也是一个聪明的想法…如果让我给网站评分，我会给4/5
Chris，这是一个很棒的检查清单，可用于审查我自己的网站，感谢你发布它。
英语翻译也有一些小问题（例如，“plataform”代替“platform”）。
你显然非常精通英语（比我精通西班牙语或法语或俄语要好得多，这些语言我至少可以说自己是初学者），所以这不是对你英语的批评。而且，虽然我很乐意对该网站进行深度校对（直接联系我 - 真的，如果你需要，我随时提供），但我认为在LibreOffice或Microsoft Office（或其他软件）中进行拼写/语法检查，并安装一个好的英语词典就足够了（并且可以让你随时使用）。
只是一个快速的想法。:) 除此之外，除了那些比我更有知识的人已经提供的建议外，它看起来很棒！
从这个网站学到了很多东西。 :)
Coyier先生，你有一种鼓舞人心的温和而坚定、见多识广的批判风格。从技术角度阅读评论，我学到了很多东西，但你的表达方式和评论者社区充分体现了你写作和互动中所蕴含的积极意图和真诚。感谢你让我的日常阅读更加愉快。
仅仅因为所有图片都经过优化，并不意味着无法进行改进。查看瀑布图，似乎它们大多是PNG，但网站使用的是照片类型的图片，而不是低色调图形。
使用 JPG 格式并以 100% 的质量保存，可以节省一部分下载量（根据我的经验，大约可以节省 10%）。对于大多数（非设计师）用户来说，将质量降低到 80% 也不会出现明显的画质下降。即使是设计师，降低到 90% 也不会出现明显的画质下降。这样你可能会节省 30-50% 的文件大小！
当然有很多东西可以优化。其中一个最大的挑战是设计师不是编码人员（编码人员是我自己）。所以遇到很多挫折。
所有 JPEG 图片都经过了很好的优化，你可以将质量降低到 60% 没有任何问题。此页面中的所有 JPEG 图片质量都为 60。
大家好，
这并不是我的批评，我只是想指出一些我一直以来对这种设计感到困扰的地方。
1. 这种设计风格是不是有点过时了？我订阅了一些时事通讯，每次收到“鼓舞人心的网站”推荐时，我得到的都是带有视差效果的单页网站。当然，这很有趣……但设计师社区似乎已经沉迷于此一段时间了。
2. 可读性 – 当我打开这个网站时，我基本上必须与令人惊叹的图形和动画作斗争，才能找到我想阅读的相关文本。在大多数情况下，在这样的单页网站中，你必须成为一个真正的丛林探险家才能找到你需要的东西……而这个网站也不例外。文本与环境融合得太好，以至于普通人会认为那只是一张图片，而不会去阅读它（认为它只是用来填充空间的）。
3. 直观性？这种类型的网站一点也不直观。我知道它们是为了展示技能，但如果我是客户访问这个网站，我会留下这样的印象：创建者会在我的网站上也使用同样的东西。
抱歉在这里跑题了，我只是对最近将同样的东西作为前端尖端技术展示感到厌烦。
不幸的是，我的公司希望我在几周内为我们的作品集创建一个类似的网站……所以我猜我在这个主题上的意见并不重要。
尽管如此，很棒的网站！投入了很多工作，我对此表示尊重！干杯！
你使用什么图像优化器？
我使用了 OptiPNG，这是一个命令行工具。
阅读别人的评论能学到很多东西，这真是令人惊讶。不错的文章。
我喜欢这种类型的评论，很有帮助，可以从中学习，并且执行得很好。
我很想知道你针对哪些浏览器（也许是根据你的流量分析？）。我用 IE8 查看了一下，真是太变态了！;-)