HTML 优先构建网站让用户量翻倍2026 年 6 月 10 日这是一个关于以 HTML 优先构建网站如何让一家公司的用户量在一夜之间翻倍的故事。客户是一家公用事业公司客户申请服务时要么用网站上陈旧的 ASP 表单要么遵循手动流程手动流程成本更高。而且这是受监管的垄断企业客户满意度降至 96% 以下可能面临数百万英镑罚款。此前尝试失败此前两次解决该问题的尝试都失败且成本高昂。最近一次另一个国家的承包商开发的 React 应用上线仅 3 天就因客户投诉而下架它到处是加载指示器和全局 JavaScript 状态毫无可用性还试图将图片等表单数据存储在只有 5MB 限制的本地存储中。大胆决定与逻辑做了大胆决定使用 [Astro](https://astro.build/) 构建网站新版本以 HTML 优先JavaScript 仅用于渐进式增强网站功能。逻辑是这是公共服务应能在尽可能多的设备上运行在网络连接不佳时正常工作表单输入数据不能丢失。受轶事启发得出需求受 [Terence Eden 的轶事](https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/) 触动得出一些需求如表单每个会话有唯一 ID提交数据存储在后端能不使用 JavaScript 完成表单能在过时和性能不佳的浏览器上完成表单符合 WCAG 可访问性标准团队选 AA 级用 JavaScript 和现代 CSS 提升用户体验。基本设置与模式复兴最终基本设置是表单向导每一步对应独立页面用户点击下一步表单提交API 判断数据有效则浏览器重定向到下一步。因 [Remix](https://remix.run/) 出现表单提交和重定向这一古老 Web 应用模式小范围复兴向同事解释这种模式花了些时间因为大家习惯重度客户端 Web 应用而此项目只是大型表单不需要展示实时数据给在新建住宅区田野中拿着十年历史安卓手机的用户传输 20MB JavaScript 代码很荒谬。解决表单验证问题解决了表单验证以及表单和表单错误渲染问题见过很多团队在处理 React 验证库上浪费人力。构建了 [HTML Web 组件](https://adactio.com/journal/20618)包裹 HTML 表单利用 HTML 验证功能使其更现代阻止 HTML 验证弹出提示框将错误信息放 aria-describedby 元素中输入有效时清除验证信息失去焦点和提交时再次评估。代码大小不到 1KB失败时表单回退到浏览器内置验证功能浏览器验证失败则后端 API 处理验证。重写组件与成效重写了 Web 组件新版本 [validation-enhancer](https://www.npmjs.com/package/validation-enhancer)供通用使用这是用过的最好的表单验证库。推出新版本后完成表单的人数翻了一番数据分析人员不知用户来源基于 JavaScript 的分析工具无法统计因 JavaScript 故障流失的用户。“保持后端会话绝不丢失用户数据”的方法有成效有人开始填写表单一个月后才完成。项目后续与行业思考因合同工作性质离开项目向接替者解释系统即使没 JavaScript 也能正常工作他却震惊于工作量增加。拒绝旧浏览器用户、网络连接不佳用户及使用辅助技术的用户不可接受应摒弃软件行业扩张阶段的无序状态将自己视为成熟行业构建能在 3G 网络下的 PlayStation Portable 上运行的 Web 应用这样就能为所有用户服务且 30 年后依然能正常工作。[ 查看 Alistair 在 GitLab 上的信息 ](https://gitlab.com/alistairldavidson) [ 在 Bluesky 上关注 Alistair ](https://bsky.app/profile/moh-kohn.eurosky.social) [ 在 Mastodon 上关注 Alistair ](https://mastodon.scot/moh_kohn) [ 给 Alistair 发邮件 ](mailto:hellomohkohn.co.uk)
HTML 优先构建网站，公用事业公司用户量一夜翻倍！
HTML 优先构建网站让用户量翻倍2026 年 6 月 10 日这是一个关于以 HTML 优先构建网站如何让一家公司的用户量在一夜之间翻倍的故事。客户是一家公用事业公司客户申请服务时要么用网站上陈旧的 ASP 表单要么遵循手动流程手动流程成本更高。而且这是受监管的垄断企业客户满意度降至 96% 以下可能面临数百万英镑罚款。此前尝试失败此前两次解决该问题的尝试都失败且成本高昂。最近一次另一个国家的承包商开发的 React 应用上线仅 3 天就因客户投诉而下架它到处是加载指示器和全局 JavaScript 状态毫无可用性还试图将图片等表单数据存储在只有 5MB 限制的本地存储中。大胆决定与逻辑做了大胆决定使用 [Astro](https://astro.build/) 构建网站新版本以 HTML 优先JavaScript 仅用于渐进式增强网站功能。逻辑是这是公共服务应能在尽可能多的设备上运行在网络连接不佳时正常工作表单输入数据不能丢失。受轶事启发得出需求受 [Terence Eden 的轶事](https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/) 触动得出一些需求如表单每个会话有唯一 ID提交数据存储在后端能不使用 JavaScript 完成表单能在过时和性能不佳的浏览器上完成表单符合 WCAG 可访问性标准团队选 AA 级用 JavaScript 和现代 CSS 提升用户体验。基本设置与模式复兴最终基本设置是表单向导每一步对应独立页面用户点击下一步表单提交API 判断数据有效则浏览器重定向到下一步。因 [Remix](https://remix.run/) 出现表单提交和重定向这一古老 Web 应用模式小范围复兴向同事解释这种模式花了些时间因为大家习惯重度客户端 Web 应用而此项目只是大型表单不需要展示实时数据给在新建住宅区田野中拿着十年历史安卓手机的用户传输 20MB JavaScript 代码很荒谬。解决表单验证问题解决了表单验证以及表单和表单错误渲染问题见过很多团队在处理 React 验证库上浪费人力。构建了 [HTML Web 组件](https://adactio.com/journal/20618)包裹 HTML 表单利用 HTML 验证功能使其更现代阻止 HTML 验证弹出提示框将错误信息放 aria-describedby 元素中输入有效时清除验证信息失去焦点和提交时再次评估。代码大小不到 1KB失败时表单回退到浏览器内置验证功能浏览器验证失败则后端 API 处理验证。重写组件与成效重写了 Web 组件新版本 [validation-enhancer](https://www.npmjs.com/package/validation-enhancer)供通用使用这是用过的最好的表单验证库。推出新版本后完成表单的人数翻了一番数据分析人员不知用户来源基于 JavaScript 的分析工具无法统计因 JavaScript 故障流失的用户。“保持后端会话绝不丢失用户数据”的方法有成效有人开始填写表单一个月后才完成。项目后续与行业思考因合同工作性质离开项目向接替者解释系统即使没 JavaScript 也能正常工作他却震惊于工作量增加。拒绝旧浏览器用户、网络连接不佳用户及使用辅助技术的用户不可接受应摒弃软件行业扩张阶段的无序状态将自己视为成熟行业构建能在 3G 网络下的 PlayStation Portable 上运行的 Web 应用这样就能为所有用户服务且 30 年后依然能正常工作。[ 查看 Alistair 在 GitLab 上的信息 ](https://gitlab.com/alistairldavidson) [ 在 Bluesky 上关注 Alistair ](https://bsky.app/profile/moh-kohn.eurosky.social) [ 在 Mastodon 上关注 Alistair ](https://mastodon.scot/moh_kohn) [ 给 Alistair 发邮件 ](mailto:hellomohkohn.co.uk)
