设计与产品jeffhuang.com编辑精选
这个页面旨在长久存在
This Page is Designed to Last
2019 — 2021，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这是 Jeff Huang 写的一份关于如何让网页长期存活的建议清单，涵盖减少依赖、字体选择、URL 结构和版本管理等方面。文章引发了关于网页存档、技术门槛和数字保存的广泛讨论，评论既有赞同也有对具体建议的质疑。
为什么经久不衰：网页链接腐烂和平台更迭是持久问题，这篇文章提供的思路与引发的争论在今天依然切中要害。
HN 评论精选
反对文中具体建议，认为它们增加了不必要的技术门槛，偏离了互联网的初衷。
我基本同意网页应当设计得长久，但完全不同意作者给出的具体步骤。“引入的库越多越脆弱”在自托管所有脚本的情况下根本不成立；“偏好单页而非多页”与超文本模型背道而驰，请不要这么做；“坚持用 13 种网页安全字体”假设操作系统不会变——以前还只有 3 种呢。你想用什么排版就用什么，只要自托管 woff 文件即可。“消除坏链风险”靠……注册两个监控服务？为什么？这份清单对只想找个地方发想法的人很不友好，它假设你必须具备技术能力才能做出“为长久而设计”的页面，而这恰恰不是互联网的意义。是的，Geocities 消失了，Twitter、Facebook 甚至 HN 也会消失，但答案绝不是“我教学生把网站推到 Heroku、在 Wix 上发布作品集”，那是在设置完全不必要的技术门槛。
mark242查看英文原文
I fundamentally agree with the principle -- that pages should be designed to survive a long time -- however the steps the author lays out I completely disagree with. "The more libraries incorporated into the website, the more fragile it becomes" is just fundamentally untrue in a world where you're self-hosting all of your scripts. "Prefer one page over several" is diametrically opposed to the hypertext model. Please don't do this. "Stick with the 13 web safe fonts" assumes that operating systems won't change. There used to be 3 web safe fonts. Use whatever typography you want, so long as you self host the woff files. "Eliminate the broken URL risk" by... signing up for two monitoring services? Why? I think this list of suggestions does a great disservice to people who just want to be able to post their thoughts somewhere. There's an assumption here that you'll need to be technically capable in order to create a page "designed to last" and frankly that is not what the internet is about. Yes, Geocities went away. Yes, Twitter and Facebook and even HN will go away. But the answer sure as hell isn't "I teach my students to push websites to Heroku, and publish portfolios on Wix" because that is setting up technical gatekeeping that is completely unnecessary.
数字格式的脆弱性造成“数字缺口”，应优先选择可归档、未来可用的方案。
我学媒体科学时，印象最深的一次谈话是和维也纳电影博物馆的一位女士（那是少数保存实际胶片而非道具的电影博物馆之一）。作为数字原住民，我从未想过这一点，但她告诉我，数字拍摄或存储的电影存在集体记忆缺口。胶片存储的东西总能在某个地下室找到拷贝，并据此制作新的可用拷贝；而数字技术让这变得困难且昂贵得多，往往要拼凑最后能用的磁带播放器，还要维护机器和维修知识。硬盘上上百种编解码器无法在任何机器上运行，这些合在一起被她称为“数字缺口”。我以前从未这样思考技术。如今，这种稳健性、可归档性和未来适用性已成为我选择文件格式、软件等的重要考量。这也是我不喜欢纯粹依赖云方案的诸多原因之一：万一那家时髦创业公司垮了怎么办？我的数据会怎样？即使他们允许我导出可读格式，我难道不能一开始就选用可靠方案来避免这一切吗？我逐渐理解并喜欢上 Unix 的信条——小而独立的组织单元，尽量……
atoav查看英文原文
When I studied media science one of the most lasting experiences I had was a talk with one lady of the viennese film museum (on of the few film museums that store actual films instead of film props). As a digital native I never gave it a thought, but she told me that there is a collective memory gap in films that have been shot or stored digitally. With stuff that has been stored on film, there was always soem copy in some cellar and they could make a new working copy from whatever they found. With digital technology this became much much harder and costly for them, because it often means cobbling together the last working tape players and maintaining both the machines and the knowledge of how to maintain them. With stuff on harddrives a hundred different codecs that won’t run on just any machine etc this combined to something she called the digital gap. I had never thought about technology in that way. Nowadays this kind of robustness, archiveability and futureproofing has become a factor that drives many of my decisions when it comes to file formats, software etc. This is one of the main reasons why I dislike relying soly on cloud based solutions for many applications. What if that fancy startup goes south? What happens to my data? Even if they allow me to get it in a readable format, couldn’t I just have avoided that by using something reliable from the start? I grew to both understand and like the unix mantra of small independent units of organizations — trying as hard as possible not to make software and other things into a interlinked ball of mud that falls apart once of the parts stops working for one or the other reasons. Thinking about how your notes, texts, videos, pictures, software, tools etc. will look in a quasi post apocalyptic scenario can be a healthy exercise.
用自托管 WOFF 网页字体比依赖“网页安全字体”更能保证跨平台长期一致性。
我同意页面的总体观点，但有一个例外：最好使用 WOFF 网页字体，而不是 2005 年前后所谓的“网页安全”字体。随着安卓手机普及，它们大多没有 1990 年代“微软核心字体”（Verdana/Georgia/Arial 等）的授权，所以写“font-family: Georgia, Serif”不再能保证跨平台一致的外观。我使用经过大幅优化和子集化的网页字体栈，放在一个独立的 114KB CSS 文件中；我用内联字体而不是链接单个字体文件，以减少渲染页面所需的请求数。我使用 WOFF 以获得最大浏览器兼容性，尽管随着微软认真淘汰 IE11，这已逐渐不是问题。这样，我的网页在任何支持 WOFF 的浏览器中看起来都一样，不管某部手机或操作系统用什么字体来渲染“Georgia”之类。此外，除 Arial 和 Georgia 外，微软核心字体看起来相当过时；2021 年还用 Verdana 会让页面有种“2000 年代头十年制造”的感觉。对于不支持 WOFF 的浏览器，我也准备了相当长的字体栈，使页面在没有网页字体时看起来也合理。
strenholme查看英文原文
I agree with the general sentiment of the page, with one exception: It’s better to use WOFF webfonts for the fonts on the page instead of using what were “Web safe” fonts back in 2005 or so. With the rise of Android phones which, by and large, do not have licenses for the old 1990s “Microsoft Core Fonts” (Verdana/Gerogia/Arial/etc.), doing something like “font-family: Georgia, Serif” no longer guarantees a consistent look from platform to platform. What I use is a heavily optimized and subsetted web font stack which is placed in a single 114KB CSS file separate from the web page; I use inline fonts instead of linking to individual font files to remove the number of pages needed to load to render my page. I use WOFF for maximum browser compatibility, although this is becoming a non-issue with Microsoft seriously sunsetting IE11. This way, my webpage will look the same in any web browser with WOFF support, regardless of what fonts a given phone or OS use for “Georgia” or what not. In addition, with the exceptions of Arial and Georgia, the Microsoft Core fonts are quite dated looking; using Verdana here in 2021 gives the page a “made in the first 2000s decade” look to it. I also, for browsers without WOFF, have a fairly long font stack, so that the web page looks reasonable even without a webfont.
建议浏览器自动将书签保存为 WARC 存档，便于长期保存和检索。
浏览器书签操作没有理由不自动创建 WARC（网页存档）格式。而且，存储成本如此之低，以可搜索格式记录你访问过的每个网页也很现实。想象一下，本地机器上保存着过去 30 年的浏览历史。这在研究模式、深挖某个主题时尤其有用。[附 warcreate、wail、warcprox 等工具链接] 补充：我忘了提 webrecorder（在我之前研究个人网页使用存档时用过的最好用的通用网页记录应用）。
shasheene查看英文原文
There's no reason why a web browser bookmark action doesn't automatically create a WARC (web archive) format. Heck, with the cost of storage so low, recording every webpage you ever visit in searchable format is also very realistic. Imagine having the last 30 years of web browsing history saved on your local machine. This would especially be useful when in research mode and deep diving a topic. [1] https://github.com/machawk1/warcreate [2] https://github.com/machawk1/wail [3] https://github.com/internetarchive/warcprox EDIT: I forgot to mention https://github.com/webrecorder/webrecorder (the best general purpose web recorder application I have used during my previous research into archiving personal web usage)
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com