What Your Website Builder Is Actually Producing
Key takeaways
- The quality of the code a website builder produces is a governance and operations concern, not just a technical one — it affects donations, accessibility, and the cost of every future change.
- Many visual builders generate “div soup”: deeply nested containers, meaningless auto-generated class names, and duplicated inline styles that no visitor sees but that degrade everything underneath.
- Bloated code slows page loads, and slow pages drive the high bounce rates that lose nonprofit donors before they act.
- Screen readers depend on clean, semantic HTML, so div soup can leave a site that looks accessible to sighted users but is functionally unusable with assistive technology.
- Messy markup creates compounding maintenance debt, because developers must decipher the existing code before they can make any change — time the organisation pays for.
- Webflow can produce cleaner output because it exposes the real layout model, but the result still depends on the builder applying naming discipline — a carelessly built Webflow site can be nearly as disorganised.
Summary
The code that your website platform produces is not a technical matter in the abstract — it has direct consequences for the institutional performance of the website. Bloated, poorly structured HTML makes pages load slowly, which affects both user experience and the Lighthouse performance scores that have become proxy measures of institutional quality. Div-soup markup — the practice of wrapping every element in generic containers without semantic HTML — breaks screen reader navigation and creates accessibility failures that automated scans may not detect but manual testing will.These are not concerns for developers only. They are governance concerns for Communications Directors whose responsibilities include ensuring the website meets the performance and accessibility standards that institutional credibility requires. A Communications Director does not need to be able to write clean code. They do need to be able to ask the right questions about what their website platform produces, and to understand the institutional consequences of the answers.This post covers what different website platforms produce in terms of code quality and what that means for the institutional performance of a nonprofit website: how to check the code quality of an existing site without technical expertise, what the differences in code quality between Webflow, WordPress, Squarespace, and custom builds mean for performance, accessibility, and long-term maintainability, and how to include code quality requirements in a web brief so that future builds produce institutional-grade infrastructure rather than technically functional but governably compromised websites.
I want to show you something that will take ten seconds. Right-click anywhere on your organisation's website and select "Inspect" from the menu. A panel will open showing the actual code your website produces. If you've never done this before, don't worry — you don't need to understand what you're seeing. You just need to notice one thing: is it tidy and organised, or does it look like someone threw alphabet soup at a wall?
That code is what Google reads when it decides whether to rank your site. It's what screen readers parse when someone with a visual impairment tries to navigate your pages. It's what your next web developer will inherit when they quote you for changes. And for the majority of nonprofit websites I've audited, it's a mess — not because the design is bad, but because the tool that built it produces bad output by default.
This isn't a developer concern. It's a communications concern. It's an operations concern. It's a governance concern. Because the quality of your website's code directly affects whether donors complete their gifts, whether your site passes accessibility requirements, and how much every future change costs your organisation.
What most website builders actually produce
Imagine you inherited a filing cabinet from a previous colleague. You open it expecting organised folders — budgets here, reports there, correspondence filed by date. Instead, you find hundreds of unmarked Manila folders nested inside each other. Some contain a single sheet of paper. Others contain nothing at all. Every document has formatting instructions stapled to it individually, even when fifty documents share the same format. And scattered throughout are sticky notes in a language only the person who created the system could understand.
That's what most website builders produce under the surface. The technical term is "div soup" — layers upon layers of container elements that serve no structural purpose, each wrapped in another container for no discernible reason. Class names that look like random strings — .css-1a2b3c, .sc-bdVTJa, .elementor-widget-wrap — giving no indication of what they actually do. Inline styles duplicated on every element instead of being defined once and referenced. JavaScript bundles loaded on every page whether they're needed or not.
A site visitor doesn't see any of this. They see the same polished design regardless of what's underneath. But everything that determines whether the site works well — performance, accessibility, search visibility, maintainability — depends entirely on what's underneath.
Why this matters for your organisation
The connection between code quality and organisational outcomes isn't abstract. It's measurable.
According to M+R's Benchmarks research, nonprofits average a 60-70% bounce rate — meaning the majority of visitors leave after viewing a single page. Page load speed is a primary driver of bounce rates, and code bloat is a primary driver of load speed. When a page that should load in one second takes four, conversion rates can drop by more than 450%. For a nonprofit donation page, that's not a technical metric — it's lost revenue. At an average online gift of £137 and a typical conversion rate of 12%, even small performance degradation translates to meaningful fundraising losses.
Accessibility is equally concrete. The European Accessibility Act comes into full enforcement in June 2025, and screen readers rely on clean, semantic HTML to parse page content. When a screen reader encounters div soup — container after container with no semantic meaning — it can't determine what's a navigation element, what's a heading, what's a list, and what's decorative. Your site might look perfectly accessible to a sighted user while being functionally unusable for someone using assistive technology. For an NGO under public scrutiny, this isn't just a compliance issue — it's a reputational one.
Then there's the compounding cost that's hardest to see from the outside: maintenance debt. Every time your organisation needs to make a change — updating a campaign page, adjusting a layout, adding a new section — your developer has to navigate the underlying code. Clean, well-structured code makes changes predictable and efficient. Messy code turns every change into archaeology. Developers spend time figuring out what they're looking at before they can do what they were asked to do. You pay for that time. And the messier the code, the more time it takes, and the higher the risk that fixing one thing breaks another.
What Webflow does differently
Most visual website builders prioritise ease of use above everything else. They want you to be able to drag any element anywhere on the page with pixel-level precision. That flexibility comes at a cost: the tool has to generate complex positioning code under the surface to make arbitrary placement work. The result is deeply nested containers, inline styles, and auto-generated class names — the digital equivalent of that chaotic filing cabinet.
Webflow made a fundamentally different architectural choice. Instead of hiding how the web works behind an abstraction, it exposes the actual CSS box model — flexbox, grid, padding, margin — directly in its visual interface. When you create a layout in Webflow, you're working with the same concepts a developer would use if they were writing code by hand. The difference is that you're doing it visually.
This means the output maps closely to what you designed. A section with three columns isn't generated as seventeen nested divs with computed positions — it's a flex container with three children. Class names are whatever you named them in the designer, not auto-generated strings. Styles are defined as reusable classes, not duplicated as inline properties on every element.
The tradeoff is that Webflow has a steeper learning curve than tools that hide the complexity. You need to understand, at least conceptually, how layout systems work. But this tradeoff is precisely what makes Webflow suitable for organisations that need their website to be institutional infrastructure rather than a disposable marketing surface. The tool respects how the web actually works, and the output reflects that respect.
That said, "clean" is relative. Webflow's output still includes its own runtime JavaScript for interactions and forms, and class names can get messy if you don't maintain a naming convention. The platform produces clean code — but only if the person building in it applies architectural discipline. A Webflow site built carelessly can be nearly as disorganised as the alternatives. The difference is that Webflow gives you the ability to be disciplined. Most other platforms don't.
The hidden cost of "easy"
Platforms like Wix, Squarespace, and WordPress page builders (Elementor, Divi) market themselves on ease. And they deliver on that promise — getting a site live is fast and intuitive. But "easy to build" and "easy to maintain" are different things, and for an established organisation planning to operate a website for three to five years, the total cost of ownership tells a very different story.
Every time you need to make a change on a site built with one of these tools, the developer is working against the code the tool generated. On a Wix site, the class names are hashed and unpredictable. On a Squarespace site, the template system constrains what's possible in ways that aren't visible until you try to do something the template didn't anticipate. On a WordPress site using Elementor, the page builder adds its own layer of complexity on top of WordPress's existing complexity — plugins generating their own CSS, their own JavaScript, their own database queries.
The result is that maintenance costs escalate over time. Year one feels affordable. Year three, every change takes longer, costs more, and carries more risk. By year five, you're often facing a complete rebuild — not because the design is outdated, but because the underlying code has become unworkable. That rebuild costs £15,000 to £35,000 for an organisation of your size. The "easy" platform didn't save money. It deferred the cost and added interest.
What to ask your agency or developer
You don't need to understand code to hold your agency accountable for code quality. Here are five questions that will tell you a great deal about whether your website is built on solid foundations or accumulated compromise.
First: what does our Lighthouse score look like across performance, accessibility, best practices, and SEO? Lighthouse is Google's own audit tool, and scores below 80 in any category warrant explanation. If your agency doesn't know what Lighthouse is, that tells you something important.
Second: can you show me the heading hierarchy on any page? A well-structured page has a single H1, followed by H2s for major sections, H3s for subsections, and so on. If the hierarchy is random — H3 followed by H1 followed by H4 — the site's SEO and accessibility foundations are compromised.
Third: how many unused CSS and JavaScript files are loading on each page? Every file that loads but isn't used slows down the page for no reason. A clean build loads only what the page needs.
Fourth: what happens to the site if we need to move to a different agency in two years? If the answer involves the word "rebuild," you're locked in. A well-built site on a platform like Webflow can be handed over to any competent Webflow developer without starting from scratch.
Fifth: can someone on our team update a blog post without developer assistance? If content updates require going through a developer — or worse, through an AI coding tool — your content governance has a structural bottleneck that will slow your communications team down and increase your costs indefinitely.
If you want a thorough, independent assessment of where your current site stands, that's exactly what the Blueprint Audit provides — a structured diagnostic covering architecture, accessibility, security, and content governance, delivered as a Board-ready report with specific findings and actionable recommendations.
Frequently asked questions
Yes. Google's crawlers need to parse your HTML to understand what your pages are about. Clean, semantic markup — proper heading hierarchies, meaningful class names, minimal unnecessary containers — makes it easier for search engines to interpret your content accurately. Google also measures Core Web Vitals, which directly reflect code quality: how fast the page loads, how quickly it becomes interactive, and how stable the layout is during loading. Sites that score poorly on these metrics rank lower.
No. Visual appearance and code quality are independent. A website can look identical in the browser whether it's built with twenty clean HTML elements or two hundred nested divs with inline styles. The difference shows up in performance, accessibility, maintainability, and search visibility — none of which are visible by looking at the design.
Not necessarily. Each platform has legitimate use cases, and a well-maintained WordPress site with a quality theme can perform adequately. The concern is when these platforms are used for complex organisational websites that need to evolve over multiple years. If your site is a simple brochure with minimal updates, the platform matters less. If it's institutional infrastructure supporting multiple stakeholder groups, content governance, accessibility compliance, and donor journeys, the underlying architecture matters a great deal.
To a point. Caching, image compression, and CDN configuration can improve performance regardless of platform. But you can't fix structural issues — excessive DOM depth, inline styles, unused JavaScript bundles — without the platform changing how it generates code. You're optimising around the problem rather than solving it. Eventually, you hit a ceiling that only architectural change can raise.
No. Webflow has its own limitations — interaction-heavy sites still load Webflow's runtime JavaScript, the CMS has a 10,000-item limit, and the platform's pricing has shifted significantly in recent months. The distinction is that Webflow produces fundamentally cleaner output than its visual-builder competitors, and that clean output translates directly into better performance, accessibility, and maintainability for your organisation.
Three ways. First, open your site in Chrome, right-click, select "Inspect," and look at the Elements panel. You'll see the HTML structure — notice how deeply nested it is and whether the class names are readable. Second, visit PageSpeed Insights (pagespeed.web.dev) and enter your URL for a free Lighthouse audit. Third, ask your developer to run a WCAG accessibility audit and share the results. If they push back on any of these requests, that resistance is itself informative.
Start with an honest diagnostic. The Blueprint Audit is a structured assessment that reviews your site's code architecture, accessibility compliance, performance metrics, content governance, and stakeholder journeys. It produces a Board-ready report with specific findings — not opinions, findings — and clear recommendations. The audit costs £2,500, takes approximately two weeks, and the report belongs to your organisation regardless of what you do next. It's designed to give you the evidence you need to make an informed decision, whether that's remediating your current site or planning a migration.
