如果您今天访问了 MDN 网站,您可能已经注意到它看起来相当不同。我们希望这是一个积极的变化。让我们解释一下!
MDN 在其 16 年的历史中经历了许多变化,从早期的维基百科到最近迁移到由 GitHub 支持的静态网站。在此期间,MDN 有机地发展,拥有超过 45,000 名贡献者以及无数的开发人员和设计师。网站的用户体验在整个网站中变得有些前后不一致,这并不奇怪。
在 2021 年中期,我们开始考虑对 MDN 的设计进行现代化改造,以创建一个干净且吸引人的网站,让用户尽可能轻松地浏览我们的 44,000 篇文章。我们希望为用户创造更完整的体验,重点是改进导航,并在所有页面上实现一致的外观和感觉。
以社区为中心的全新首页
MDN 社区是我们的内容能够同时保持高质量和可信度的关键。MDN 的内容经过仔细审查、讨论,当然,在某些情况下还会进行争论。任何人都可以为 MDN 做出贡献,无论是撰写内容、建议更改还是修复错误。
我们希望认可和庆祝我们优秀的社区,而我们的首页是进行此操作的完美场所。
新的首页以社区和简约为核心概念构建。我们改进了搜索功能,使其成为页面上的核心元素,同时还向用户展示了最新和最受欢迎文章的精选。
我们还将展示对我们的 GitHub 内容库的最新贡献,并添加了一个贡献者聚光灯,用于突出显示 MDN 贡献者。
重新设计的文章页面,以改进导航
已经过去很多年了,事实上是五年,自从 MDN 的核心内容呈现形式接受了全面的设计审查以来。在这几年里,MDN 的内容不断发展和变化,出现了新的内容结构方式,新的构建和编写文档的方式,以及新的贡献者。随着时间的推移,文档的外观和感觉与阅读和编写方式越来越脱节。
虽然您不会看到对文档本身的彻底改造,但您会发现 MDN 上的大多数视觉元素都得到了关注和改进,为我们的文档提供了更连贯的视图。此次重新设计让 MDN 内容得到了应有的重视,包括以下特点:
- 更一致的颜色和主题
- 对主要部分(如 HTML、CSS 和 JavaScript)的更好指示
- 改进的无障碍功能,例如更高的对比度
- 添加了深色模式切换按钮,以便轻松地在模式之间切换
我们对一些细微的改进和便利功能感到特别自豪。例如,页面内导航始终可见,以便在您滚动时显示您在页面中的位置。
我们还重新审视了浏览器兼容性数据显示方式,更清晰地显示了浏览器支持情况。因此,您不必将版本号记在脑海中,我们将更多地关注是和否图标来表示浏览器功能,并可以选择查看您对浏览器兼容性数据所期望的详细信息。我们认为您应该查看一下。
而且我们不会止步于此。我们所做的工作影响深远,在发布的设计方面还有许多改进和完善的机会。
由社区选出的全新 logo
当我们开始着手重新设计和扩展 MDN(超越 WebDocs)时,我们意识到是时候换一个新的 logo 了。我们想要一个现代且易于定制的 logo,它能够代表今天的 MDN,同时还能增强其身份,使其与 Mozilla 的当前品牌保持一致。
我们与品牌专家Luc Doucedame紧密合作,将我们的选择范围缩小到八个潜在的 logo,并向我们的用户社区发出呼吁,请他们帮助我们选择 logo,并邀请他们投票选出自己喜欢的 logo。我们仅用三天就收到了超过 10,000 张投票,很高兴与大家分享“MDN 人们的选择”。
获胜的是选项 4,使用下划线来传达编写代码过程的 M 字样徽标。感谢所有投票的人!
关于 MDN 的未来展望
将内容带到您最需要的地方
近年来,MDN 内容对作者来说越来越复杂,例如从维基迁移到 Git,以及从 HTML 转换为 Markdown。这对贡献者来说是一个福音,他们可以使用更强大且更熟悉的工具来创建更结构化和更一致的内容。
随着更强大的工具到位,我们终于可以为读者构建更显眼和更系统的益处。例如,你们中的许多人可能通过自己喜欢的搜索引擎访问 MDN,而不是通过 MDN 自己的网站导航。我们明白。从历史上看,维基百科使得大规模内容架构工作变得不切实际。但我们现在比以往任何时候都更接近于对网站结构和导航进行全面的改进。
展望未来,我们有雄心勃勃的计划,利用我们的新工具探索改进的导航、生成的标准化和支持摘要,并将 MDN 文档嵌入到开发人员最需要的地方:他们的 IDE、浏览器工具等等。
即将推出:MDN Plus
MDN 已成为有关标准、代码、工具以及作为开发人员创建网站所需的一切信息的值得信赖的中心资源。在 2015 年,我们探索了超越中心资源的方式,创建了一个学习区域,旨在为常规 MDN 参考和指南材料提供有用的补充。
在 2020 年,我们添加了第一个前端开发人员学习路径。我们看到了用户的大量兴趣和参与,学习区域目前占 MDN 每月网站流量的 10%。这让我们开始思考,我们还能为社区在这个领域做些什么。
去年,我们对用户进行了调查,询问他们希望从 MDN 体验中获得什么。最常被请求的功能包括通知、文章集合和 MDN 的离线体验。我们看到的总体主题是,用户希望能够以适合他们自己的方式组织 MDN 的庞大资源库。
我们始终在寻找方法来满足用户需求,无论是通过 MDN 的免费网页文档还是个性化功能。在接下来的几个月里,我们将扩展 MDN,包含一个基于我们从想要定制 MDN 体验的网页开发人员那里收到的反馈而开发的付费订阅服务。敬请关注有关 MDN Plus 的更多信息。
感谢 MDN 社区
我们感谢数千位为新 logo 投票的人,以及自我们开始这段旅程以来参与早期 beta 测试阶段的每个人。此外,还要感谢我们来自开放网页文档的合作伙伴,他们为我们提供了宝贵的重新设计反馈,并继续每天为 MDN 内容做出贡献。感谢你们所有人,我们才能让这一切成为现实,我们将在未来继续投入,进一步改善 MDN 的用户体验。
关于 Hermina
Hermina 是 Mozilla 的 MDN 产品主管,领导着 MDN 内容、工程和产品团队。她的工作地点是法国巴黎。