前几天，我收到来自澳大利亚机构 The Competition 的开发者 Brendan Foster 的一封电子邮件。 他向我展示了一个有趣的 CSS 技巧，该技巧帮助他完成了他正在为 Margaret River Beverages 协助开发的网站布局。 我实际上认为整个网站都很有趣，而且我想到，在探索网站时记录下我的想法。 他很乐意。
Oooo 那个底部粗糙的纹理是怎么做出来的？
看起来非常清晰。
他们可以动态地为其设置样式，特别是如果他们删除了那些内联 fill 属性。 该网站上有很多纯色背景，因此这可能很方便。
一个轮播图，嗯？
作为网页设计师，我们通常不太喜欢轮播图，因为它们的存在只是为了让会议中的每个人都能 击掌庆祝并吃炸洋葱圈。
不过，这似乎不是在主页上塞满更多内容的情况，至少不是非常过分。 它的优点
- 它只使用不透明度进行动画，非常流畅。
- 其中的图像使用响应式图像。 具体来说是
<picture>元素。 它也是一个 WordPress 网站，因此我想知道他们是否正在使用旧的响应式图像插件，该插件是在该功能 成为原生功能 之前。 - 而且同样重要的是，该网站还具有...
非常棒的摄影作品
整个网站都充满了摄影作品。 对于像这样销售真实产品的网站来说，这是一个非常重要的内容。 一个“高级”品牌，它既是关于感知的生活方式，也是关于产品本身。
好的照片可以真正让网站脱颖而出。 这几乎就像作弊一样。 当它们使用响应式图像实现时，效果就更好了。
但是，这里有一些 **重大的胜利**。 在通过 WebPagetest 运行主页时，发现许多图像可以 被压缩得更多
图像总计 4,460.7 KB，目标大小 = 1,012.8 KB – 潜在节省 = 3,447.9 KB
3.5 MB 的带宽节省非常可观。
此测试还揭示了另外两件重要的事情
- 未启用 Gzip
- 未设置 Expires 标头
这两件事将对性能产生 **巨大** 的影响，幸运的是，它们都是可以快速解决的问题。 2 秒的首次字节时间也不理想，但这在设置 Expires 标头后可能会得到改善，从而减轻一些服务器负载。
很明显这是一个商店
我最近浏览了一些销售商品的网站，但是你无法真正辨别出来，直到你浏览到看起来像商品页面的部分，而且正好有一个“添加到购物车”按钮。 网站上始终存在的“查看购物车”和“结账”链接，更方便的是，它们会告诉你该网站是一个商店。
一个 SVG 图标系统。 真棒。
说到那个“结账”按钮，看起来他们正在使用一个图标，我想知道他们使用什么图标？
又是 SVG，非常棒。 在购物车按钮的情况下，不需要回退或辅助功能属性/元素，因为它只是视觉装饰。 有几个地方（比如菜单打开/关闭图标）可能需要进行一些 辅助功能工作，特别是将 <title> 添加到这些 <svg> 中。 可以考虑将 <symbol> 替换为 <g>，这样这些标题就可以随着 <use> 一起出现，以及 viewBox。
老式的边缘到边缘 Google 地图
所有灰度化的地图看起来很酷，但是它从边缘到边缘，这让我有点害怕，因为我以为这可能是一个滚动陷阱。
看起来在台式机上，这没什么大不了，滚动不会像你在实际使用 Google 地图时那样放大地图，因此你可以直接滚动过去。 但是，在移动设备上，边缘到边缘的地图确实会让你的滚动卡住
不过这不是什么大问题，因为他们将地图的高度锁定为不足以覆盖（至少大部分）移动屏幕的高度。
.contact-us #google_map {
height: 100%;
min-height: 655px;
}
@media (max-width: 767px) {
.contact-us #google_map {
max-height: 300px;
min-height: 300px;
}
}因此，如果你卡住了，你可以随时将手指移动到非地图区域。 这可能是 自适应地图 的一个好机会。
我能够在源代码中直接查看那个 CSS，这意味着它不是压缩的 CSS。 由于 Gzip 非常重要，因此 这没什么大不了，但是由于 Gzip 还没有开启，所以这是一个稍微更严重的问题。
一个不错的网格
很好地涵盖了所有可能的宽度
请注意，某些内容是全宽度的，而另一些则不是。 也就是说，一张总是会接触到右边缘的图片，以及它左侧的文字，不会紧贴左边缘。
主导航中的一些 SEO
这个页面很奇怪，对我来说。“高级软饮料”是他们唯一做的东西。 为什么专门为此创建一个页面？ 这不是主页吗？ 我最好的猜测是，对于他们来说，非常清楚这一点可能有一些商业价值，而且可能是一种 SEO 策略。
不过，他们在第二页的第二位，所以看起来效果不错。
产品上的字体和网站上的显示字体相同！
这可不是每天都能实现的。 也许产品设计团队和网页设计团队是同一家公司，他们将这作为他们最近品牌重塑的要求。
我查看了一下，想看看是什么字体
如果你在网上搜索，你会发现一种非常花哨的草书字体，它在 Google Fonts 等网站 上可以作为免费字体使用。 我能够使用 WhatTheFont，上传一个示例，并 找到它
我立即注意到的一些细微之处，无论出于何种原因
<html lang="en-AU">– 一看到这个，我就意识到这是一个澳大利亚网站！class="no-js"– 这个在<html>元素上的类可能是由一些样板代码添加的，但通常会删除该类的JavaScript没有运行。它可能只是没有在任何地方使用。- 说到JavaScript，有一个
<noscript>标签警告说该网站在使用JavaScript时效果最佳。从技术上讲是正确的，但它可能可以删除，因为该网站在没有JavaScript的情况下也能很好地运行。滑块会堆叠成一个图像块，甚至添加产品到购物车和结账也能正常工作。 @font-face块正在寻找一个丢失的`.woff2`文件，这是另一个潜在的性能改进。- 固定导航栏在向上滚动时有时会卡住，并遮挡页面顶部的一些内容。他们已经意识到这个问题并正在尝试修复。
- 正文中有一些字母间距。我认为那是针对偷窃者的吗？
作为设计师/开发人员，当你第一次深入另一个网站时，你会看什么？你的脑海里会想些什么？
Beau，我是这里长期潜水者，第一次发帖。
有人能详细解释一下搜索“.woff2”吗？
如果这是一个性能提升，请给我一块！
提前感谢。
我会从空中获取我的答案。
浏览器会发出一个永远不会返回任何有用的信息的HTTP请求。仅此一项就是一个性能问题。
亲爱的beau.js,
让我尝试详细说明
1) .woff2是一种字体格式 -> 换句话说，就像图像可能是.jpg或.png一样，字体也可以作为.woff2文件提供。
2) 在这个特定网站上，.woff2文件丢失了。你可以通过打开浏览器的开发工具并查看控制台输出来观察这一点。目前，谷歌Chrome控制台消息显示：“无法加载资源：服务器以状态404（未找到）响应”。
3) 让浏览器请求一个不存在的文件是服务器和客户端之间不必要的“往返”，因此删除该文件 = 网站加载更快。
感谢大家的回复。
我想我误解了这句话的含义，这句话暗示了删除对字体的搜索 - 将 - 是一个潜在的性能提升（避免了HTTP请求的必要性）。
呼，现在我明白了。
非常有帮助，谢谢！
嗨，Chris,
很棒的文章！能深入了解其他人的流程真是太好了。我真的感觉自己要过度使用WhatTheFont了，因为人们要么不知道他们的字体是什么，这使得链接媒体变得更加困难，要么他们被告知后就不愿记下来。
你有什么建议可以让人们选择摄影并与优秀的摄影师合作和获取资源吗？我实际上从未雇佣过摄影师，所有事情都是从库存或客户提供的资源开始的，正如你所想的那样…… 混合了质量低劣的低分辨率图像，一些管理人员让他们的员工拍摄的，其中一些必须被撤下，因为它们展示了一些非法内容，或者在某些情况下被盗；有时是客户从有限的库存市场中挑选的图像，缺少为利基市场服务的部分；比如专家机电工程师。
祝你周末愉快！（也许可以写一篇你自己的设计流程的文章/更新）
正如你提到的，性能通常是我注意到的第一件事。然后我会打开DevTools并（硬性）刷新页面，以实时查看真实的数字。我记得打开一个网站，它显示了一个不错的加载图标，持续了一段时间。加载完成后，我发现是什么导致了加载缓慢 - 一个20+MB的原始库存图片，使用的是原始名称。网站本身非常简单。至少图片很好看。
我还喜欢查看是否能确定该网站运行的平台，尽管这通常非常明显，以及网站的响应性如何（如果有的话）。
当我打开你示例中的网站时，我注意到蓝色横幅从屏幕顶部开始向下滑动，导致了一些视觉上的卡顿。一些关键的CSS或让横幅等待显示会很好。
我还喜欢直接查看页面源代码并滚动浏览它。你示例中的网站特别有趣，因为他们在第一次发送的.html文档中包含了这些SVG，而不是使用AJAX获取它们。因此，该响应中包含了大量的SVG数据。145KB的初始响应不利于加载时间。
感谢你发表这篇文章。我发现它非常有趣，也很高兴知道我不是唯一进行网站审计的人。: )
Bfos做得很好。也要感谢设计师Brett，来自Layton Creative。 http://laytoncreative.com.au/margaret-river-beverages/.
这就是我们过去学习的方式，对吧？右键单击>查看源代码。这在被所有在线教程淹没之前。
在审查网站时，我必须提醒自己要从不同的学科角度看待它，并分别对每个学科进行判断。可能存在一个美观的、性能良好的、工程设计精良的网站……但如果页面没有很好地传达信息，并且是一个糟糕的UX体验，那有什么意义呢？
我倾向于从几个不同的角度来看待它……
沟通 - 页面是否执行了它被设计用来执行的任务……呃，有一个轮播 - 但它是否正常工作？它是否执行了有助于可用性的UX任务？页面是否可以轻松地引导我执行任务？
标记 - 它是否有效？内容顺序是否正确？信息流的顺序是否正确？
美学 - 设计是否增强了体验？查看颜色对比度、字体样式/大小、图像的使用 - 摄影或插图哪个更适合？所有这些是否都适合不同的响应式配置文件？
增强功能/可用性/可访问性 - 页面上正在发生一些很酷的脚本操作，但如果我关闭JavaScript，我仍然可以使用该页面吗？是否有经过充分考虑的步骤可以让我完成任务？当信息隐藏在下拉菜单中时，屏幕阅读器可以访问吗？
优化 - 网站的性能如何？是否有任何脚本阻塞渲染时间？可以采取什么措施来提高感知加载时间？这些优化工作是否在不同的页面上也进行了？
某些网站在某些方面会比其他网站更强，这有点像是在各个方面之间权衡取舍，以改进一个方面，而不会让另一个方面崩溃，并优先考虑更重要的方面……并且显然要找到所有这些解决方案，并且要在我们愚蠢地同意了的那段时间内完成。
那是什么？谋生？我宁愿在这里看不到这样的文章。我来这里是为了学习技巧。
lol 我甚至不明白这种批评，但我理解这种嘲讽。
我非常喜欢这个分析，它非常有帮助。我只是被那些非常聪明的人使用“peak”来表示“peek”所困扰……
这是一些焊接护目镜。请不要看我的任何网站。这很有启发性。你的分析花了多长时间？
就我个人而言，我会以不同的方式处理产品网格。
参考：http://store.margaretriverbeverages.com.au/
我认为在这里使用flex过于复杂了，因此它没有正确显示。
查看：http://i.imgur.com/HM15RMk.jpg
可以使用像这样简单的东西：http://codepen.io/tomanagle/pen/xOrrBx
你只需要在某些元素上清除浮动，这取决于你的断点。
说我总是先看网站图标很奇怪吗？我喜欢把它看作网页体验的开始。
不过我确实很享受这篇文章。我总是发现看其他人的初始反应很有趣。
我首先要根据网站开发的技术来判断，比如纯HTML CSS和JS，或者WordPress，或者那些ASP.Net自动生成的代码文件。
之后我会尝试获取并理解网站使用的颜色组合，它们是如何加载图标的，它们是如何实现那种我一直想实现的酷炫效果的，以及开发人员使用了哪些JS库和CSS框架来编写网站代码。
检查 CSS 特定性，使用 jigsaw 验证 CSS，使用“nu”网站验证 HTML，检查谷歌页面速度，检查 js 代码，检查可访问性，如果它们是移动优先，则检查断点，以及另外 10-15 个测试 :)
直奔主题…
对于许多网站来说，如果不是大多数网站，都会使用主页来“吹嘘自己”，而在很多情况下，用户只是想直接获得信息和/或选择产品，订购它，提交，完成工作。我最近在寻找渡轮过境，它只是一艘渡轮，还有什么好说的呢，但我在主页上着陆，然后需要导航到预订页面，浪费我的时间。当然，大型商店不能在主页上显示所有产品，必须进行过滤。但是较小的产品可以从一开始就让人们得到他们想要的东西。
哈哈！很高兴看到这样的文章展示了我通常会做的事情
但是购物车和结账如何才能在没有 JavaScript 的情况下运作呢？
我不知道 Chris 的回复是什么，也不知道作者是否能提供一些见解，但可以尝试将表单目标设置为一个 iframe，你给它 0 宽度，0 高度（或 1 像素，或 display:none，实际上并不重要）。然后，你可以留在页面上并发布到购物车。
或者，你可以接受任何购买都定期发布，然后只将你返回到推荐来源，或者使用隐藏的输入将推荐来源与表单数据一起传递，这都很容易，但现在很少有人这样做。