Back
Building an HTML-first site doubled our users overnight
SiTech AI Team3 წთ. საკითხავი

Building an HTML-first site doubled our users overnight

A developer's account of replacing a failed React application with an HTML-first form built in Astro: the utility company behind it saw form completions double on launch day, without requiring JavaScript.

A developer's account of rebuilding a public-service web form with an HTML-first approach has resonated with engineers: replacing a failed React application doubled the number of people completing the form on launch day.

The client was a utility company run as a regulated monopoly. Customers could apply for its services through an old ASP form or through a manual process that cost the company far more. With customer satisfaction below a 96 percent threshold risking millions of pounds in fines, the application flow carried unusual weight.

Two failed attempts and a React app pulled in three days

Two earlier attempts had already failed at significant cost. The most recent, built by contractors abroad, stayed online for three days before customer complaints forced it offline. The author describes loading spinners, global JavaScript state, an inaccessible interface, and one fatal choice: image upload was essential, yet the app kept images and all other form data in localStorage, which is limited to about five megabytes.

The replacement was built with Astro and an HTML-first approach, where JavaScript lives only in web components that progressively enhance a site already working without it. The reasoning: this is a public service, so it must work on every machine possible, over poor connections, and must never lose data once entered.

Form posts, redirects and validation under one kilobyte

Requirements followed from that: a unique identifier for every form session, submitted data and uploads persisted on the backend at each wizard step, a form completable without JavaScript and on outdated browsers, and WCAG AA accessibility. Each step became its own page; submitting a valid step redirected the browser to the next one — the form-post-and-redirect pattern that Remix helped revive.

Validation became a separate project. The developer wrote an HTML web component that wraps any form, reads its native validation attributes and renders errors in the element referenced by aria-describedby instead of the browser's popup tooltips. It clears an error once the user reaches a valid value and re-checks on blur and submit. The component weighs under one kilobyte; a general-purpose version, validation-enhancer, is now published on npm.

What happened after launch

On launch, form completions doubled. Analytics could not account for the new users, the author notes, because JavaScript-based analytics never sees visitors who bounce when scripts fail. The backend session model also paid off: one person submitted a completed form a month after starting it.

The story ends on a note the author calls sad. Leaving the contract, he explained to his replacement that the site always worked without JavaScript; the answer was that this meant a lot more work for the team. Bouncing users on old browsers, weak connections or assistive technology is not acceptable, he argues — least of all from a monopoly public service.

SSiTech

SiTech — AI-powered web development

We build fast, modern websites and bring AI into real business workflows. Have a project or a question? We'd love to help.