Building an HTML-first site doubled our users overnight

TL;DR

A utility company replaced their complex React app with an HTML-first website built using Astro, resulting in a doubling of their users overnight. The move prioritized accessibility, performance, and simplicity. The development showcases the impact of lightweight web design.

A utility company experienced a doubling of their users overnight after replacing their previous React-based web application with a lightweight, HTML-first website built using Astro. This shift was driven by the need for better accessibility, performance, and reliability, especially in poor network conditions. The change underscores the potential of simple, standards-based web design for public services and high-traffic sites.

The company had faced multiple failed attempts to modernize their online application process, including a recent React app that was pulled after just three days due to customer complaints. The React version was criticized for being slow, inaccessible, and unreliable, particularly for users with outdated browsers or poor internet connections. In response, the development team built a new site emphasizing HTML-first principles, with minimal JavaScript, using Astro to enhance progressively where needed.

This new approach prioritized core web standards: the site works on all devices, loads quickly, and preserves user input even on flaky connections. Key features include form submissions that do not rely heavily on JavaScript, robust validation using custom web components, and accessibility compliance. The result was a site that not only improved user experience but also dramatically increased user engagement, doubling the user base overnight, according to the company.

Impact of Lightweight, Accessible Web Design

This development demonstrates that prioritizing web standards and simplicity can significantly improve user engagement, especially in public service contexts. The success of the HTML-first site highlights the importance of accessibility, performance, and reliability, which can lead to higher user satisfaction and retention. It also challenges the assumption that modern web frameworks are always necessary for complex applications, showing that leaner approaches can be more effective for certain use cases.

Web Development and Design Foundations with HTML5 (8th Edition)

Web Development and Design Foundations with HTML5 (8th Edition)

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

Previous Attempts and the Shift to HTML-First Approach

The utility company previously invested in a React app, which was quickly abandoned due to user complaints about speed, accessibility, and functionality. Prior efforts to modernize the site had failed, costing significant resources without success. The move to an HTML-first website, built with Astro, was motivated by the need to serve a broad, potentially underserved user base, including those with outdated devices and poor internet access. This approach was inspired by principles of progressive enhancement and web standards, emphasizing a lightweight, accessible experience.

“Switching to an HTML-first site using Astro doubled our users overnight. It proved that simplicity and accessibility are key to engagement.”

— Developer involved in the project

Svelte & SvelteKit for Beginners: Develop high-performance web apps with Svelte – the modern framework without the fuss

Svelte & SvelteKit for Beginners: Develop high-performance web apps with Svelte – the modern framework without the fuss

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

Unclear Aspects of the User Growth and Long-Term Stability

It is not yet confirmed how much of the user growth is directly attributable to the technical switch versus other factors such as marketing or external events. Additionally, the long-term stability and scalability of the new HTML-first site remain to be observed, as the case is recent and ongoing.

Full Stack Testing: A Practical Guide for Delivering High Quality Software

Full Stack Testing: A Practical Guide for Delivering High Quality Software

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

Next Steps for Monitoring and Expanding the Approach

The company plans to monitor user engagement metrics closely and gather feedback to refine the site further. They are also considering applying similar lightweight, standards-based principles to other digital services. Industry analysts will watch whether this approach influences broader trends in public and enterprise web development, especially in contexts requiring high accessibility and low bandwidth usage.

Website Hosting Services for Sale Write On Me Red 18x24 in Single Sided Yard Road Sign w/Stand

Website Hosting Services for Sale Write On Me Red 18×24 in Single Sided Yard Road Sign w/Stand

Yard Sign

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.

Key Questions

Why did the previous React app fail?

The React app was criticized for being slow, inaccessible, and unreliable, especially on outdated browsers and poor internet connections. It also attempted to handle complex client-side logic that was unnecessary for a simple form-based service.

How did switching to an HTML-first site lead to user growth?

The new site was faster, more reliable, and accessible on all devices, which improved user satisfaction and engagement. The simplicity of the design meant fewer technical barriers for users, leading to a rapid increase in usage.

Will this approach work for other types of websites?

While promising for public services and simple applications, the HTML-first approach may not suit highly interactive or real-time applications. Its effectiveness depends on the specific needs and user base of each project.

Are there any risks associated with this lightweight approach?

Potential risks include limitations in interactivity and scalability for more complex features. However, for the use case described, the approach proved highly effective and reliable.

Source: Hacker News

You May Also Like

10 Hacks Every Discord User Should Know

Discover 10 verified Discord tips to enhance privacy, streamline navigation, and unlock features like free Nitro trials. Stay ahead with these expert hacks.

The Travel App Cleanup: What to Install and What to Delete

What essential travel apps should you keep or delete to ensure a smooth journey? Discover the key tips to optimize your device now.

Mesh Wi-Fi or a range extender? Here’s how to know which one you actually need

Learn how to choose between mesh Wi-Fi systems and range extenders based on your home size, budget, and connectivity needs. Key factors explained.

RIP software hackathons. Long live the hardware hackathon

Hardware hackathons are gaining prominence as software development becomes more standardized, encouraging creative, physical tech projects.