← All iterations
Build Report

Build Report: Phases 1-2

What was built, how the code works and what changed for search engines. Where a technical idea comes up, it is explained in plain English on first use.

3iterations, one per inspiration
44pages in each iteration
14rumzer.com pages carried over
8new regulation pages
32glossary terms
0third-party code packages

01The goal and the fixed points

Rumzer wanted to test three redesigns of rumzer.com, each modeled on a very different software website: Zoho Desk (busy and feature-descriptive), Airtable (visual, showing the product itself) and Gusto (goal-oriented: what you can get done in one place). Phase 1 built all three as finished front ends. Phase 2 tuned all three for organic search.

Front end: the part of a website people see and click: the layout, text, images and animations. Its opposite is the back end, the server and database that store and process data. Phase 1 is front end only; nothing is sent or stored anywhere yet.

Priorities, in order, were layout first, then wording, then interactive touches, each matched to its inspiration. Some things could not change in any version:

  • Logos: the Rumzer logo and all six product logos, taken from the current site.
  • Product names: standardized to the logo wordmarks: MatCheck, RumzerCE, SCIPBridge, PFASTracker, RumzerLCA and RumzerPCF. The current site mixes spellings such as "SCIP Publisher" and "Rumzer CE".
  • Colors: Rumzer's five brand colors (#001c64, #003087, #0070e0, #ffd140, #f05042) appear in every iteration. Each version adds its own tints on top.
  • Content: every section of the 14 current rumzer.com pages survives in all three, reorganized to suit each style.

Nothing was invented to fill layout slots that the inspirations use for social proof. Where Zoho shows awards or Gusto shows customer counts, the new sites use real facts from rumzer.com instead: 400% throughput, 20+ regulations, 130,000+ substances, a free 30-day trial, 24-hour setup, 11 industries.

02The three iterations

Zoho Desk version

A two-level header with mega menus and a slide-out "Next Steps" drawer. A sign-up card in the hero, tabbed feature sections on cream and navy panels, a testimonial slider, FAQ and uppercase red calls to action. Signature page: features.html, a full feature catalog with sticky category tabs.

Airtable version

Calm headlines around a live MatCheck window: a question types itself, then cells show "Checking…" before results appear. One colored card per product tracks your scroll. Ten app screens rebuilt in HTML with invented sample data. Signature page: platform.html, a self-advancing tour of every module.

Gusto version

Serif headlines over line drawings, goal sections whose accordions swap the picture, a stats band that counts up and a rotating headline word. Signature page: how-it-works.html, a questionnaire that recommends products and services in the browser.

Mockup recreated in HTML: instead of pasting screenshots of the Rumzer app, the Airtable version draws the app screens with the same code a web page uses. They stay sharp at any size, can animate, and load faster than large images.

All three share the same safeguards: every animation switches off when a visitor's device asks for reduced motion, and every page was checked at desktop (1440px) and phone (390px) widths with no errors and no sideways scrolling.

03How the code builds the sites

The three sites are not 132 hand-written pages. They are produced by a small program, a static site generator, written for this project in plain JavaScript and run with Node.js.

Static site generator: a program that assembles finished web pages ahead of time from templates and data. The output is ordinary HTML files that any browser can open, with no server needed to put pages together on the fly.
Node.js: a program that runs JavaScript outside a web browser, so the same language that animates a page can also build it. The generator needs Node 22 or later and nothing else: no downloaded code packages, so nothing can break when someone else updates their library.

Content lives once, layouts live three times

src/content/+src/iterations/<name>/→src/build.mjs→zoho-desk/ · airtable/ · gusto/
  • src/content/ holds the facts every version shares: products, pricing rules, regulations, the glossary, legal text and the blog. Fixing a fact there and rebuilding fixes it in all three sites.
  • src/iterations/<name>/ holds what differs: each version's page layouts, wording, CSS (the styling rules) and JavaScript (the interactive behavior).
  • src/build.mjs combines the two. For each version it copies the images and fonts, then writes out every page and a sitemap.
node src/build.mjs          # rebuild all three
node src/build.mjs gusto    # rebuild one
node tools/check.mjs        # run the quality checks

Why the pages open straight from a folder

Phase 1 had to work by double-clicking a file, with no web server. That creates a subtle problem with links. On a hosted site, a link starting with / means "from the top of the site"; opened from a folder, it means "from the top of the whole hard drive", and breaks.

Relative link: a link written as a path from the current page, like "go up one folder, then into assets". It works the same whether the site is on a disk or on a server.

So every link is written relative to the site's top folder, and the build's relink step adds the right number of ../ ("up one folder") for pages that sit deeper, such as blog/ and regulations/. The build refuses to finish if any link starts with /.

Pricing logic kept intact

The pricing calculator follows the current site's rules exactly: price depends on product, item-count band and billing period. Annual billing is the monthly price times 0.9, each band gets a recommended tier, and 50,000+ items shows "Contact Us".

04Automatic quality checks

Two tools catch mistakes before anyone sees them.

tools/check.mjs: the rulebook

  • Links and files: every link and image on every page points to something that exists.
  • Folder rules: no link would break when the site is opened from disk.
  • Brand rules: the logos, product names and five brand colors are present in each version.
  • Coverage: src/content/coverage.mjs lists every section of the 14 rumzer.com pages. If any version drops one, the check fails.
  • Search rules (added in Phase 2): title and description lengths, one main heading per page, alt text on images, and more. A failure here now blocks the build.

tools/shoot.mjs: the screenshot robot

Headless browser: a real web browser (here, Chromium) running without a window, driven by a program. It loads each page exactly as a visitor would, so it sees what they would see.

It takes full-page screenshots at desktop and phone widths and records any error the page produces while loading, so layout problems can be reviewed as pictures rather than by opening 132 pages by hand.

05Copy fixes and editorial decisions

  • Typos fixed across the carried-over copy, such as "mananging", "Minimata", "RumerCE", "Ruzmer", "reuqests" and "the the".
  • Phone link fixed: the current site displays +1 (833) 665 0776 but dials a different number. The new sites dial the number shown.
  • Dead links removed or pointed at their real sources (ECHA, Forbes).
  • Pricing tooltips corrected where they reused the wrong text or named the wrong product.
  • Stale dates removed rather than updated, at your direction. For example, "rolling out an integrated PCF package in 2024" now reads "is rolling out".
  • Legal pages kept word for word and only restyled. Quirks in the source text are listed in HANDOFF.md for legal review, such as the DMCA contact that shows one address and links to another.

The blog

Each version has a blog with 13 articles drawn from the historical materials, lightly edited to remove outline notes, typos and client names. Topics include PFAS, Section 232 declarations, Prop 65, a three-part REACH series and right to repair.

Worth reviewing before publishing: the REACH series and the nanomaterials article closely follow two law-review articles (sources are cited on the page). The ROI article still contains figures with no source, such as a $10M average recall cost.

06Phase 2: what search engine optimization means here

SEO (search engine optimization): shaping a site so that search engines like Google understand each page and show it to the people searching for it. This project covers organic search only: the unpaid results, not ads.

Search engines read a page's visible text, but also information tucked into the code that visitors never see: the title shown in the browser tab and in results, a short description, labels on images, and machine-readable facts. Phase 2 worked on both layers across all three versions, without changing layouts, colors or product names.

The work ran in two halves: research first, then edits based on it. All research used public sources, fetched on 2026-09-27, with each file listing its sources.

07The research

Competitors

How iPoint, Assent, Source Intelligence, Z2Data and others title and structure their pages, and the gaps they leave. seo/research/competitors.md

Search results

What actually ranks for Rumzer's key queries, and who owns the informational results. serp-notes.md

Regulations

One research file per regulation: scope, obligations, dated deadlines and official sources. seo/research/regulations/

Category patterns

What compliance-software sites in general do well, ending in an adopt/avoid list. category-patterns.md

Scoring demand without paid tools

Search-volume numbers come from paid tools or from Google Search Console, which needs a live site, and neither was available. So each topic got a demand score from 0 to 4: one point each for appearing in Google's autocomplete suggestions, being targeted by vendors in their page titles, having regulator pages, and drawing Wikipedia readership. It shows relative interest, not traffic.

Deciding which new pages to build

A regulation got its own page only if all four were true: Rumzer's site already names it, a Rumzer product handles it, vendors (not only regulators) rank for it, and the research had at least six cited facts. There was a cap of eight pages. Nine regulations passed, and EU POPs was cut as the weakest. CBAM and the others went to a backlog for Phase 4.

08What changed on the sites

Visible content

  • New pages in all three versions: a regulations index; pages for REACH, EU RoHS, CE marking, SCIP, TSCA, PFAS reporting, Prop 65 and China RoHS; and a 32-term glossary. Each deadline shows its official source, and each page shows when it was last reviewed.
  • Keyword map: each page targets one main search phrase, and no two pages target the same one.
Keyword cannibalization: when two pages on the same site chase the same search phrase, the search engine has to pick one and both tend to rank worse. One phrase per page avoids that.
  • Titles and descriptions rewritten to the map, kept within 30–60 and 120–158 characters, which is roughly what search results display before cutting text off.
  • Headings, image descriptions and links: each page's main heading carries its phrase, missing alt text was added, and vague links like "Learn more" now say where they go. Blog articles link to the products and regulation pages they discuss.
  • Accuracy fixes: copy that contradicted official sources was corrected, with citations in seo/accuracy-fixes.md. Examples: the TSCA PFAS reporting window is not open yet (it opens by January 31, 2027 at the latest), and Maine's general PFAS ban starts in 2032, not 2030.

Behind the scenes, in each page's code

Canonical URL: a tag that says "this is the official address of this page". It stops search engines from treating copies of the same page as competing duplicates.
Robots meta tag / noindex: an instruction telling search engines whether to list a page. Every page is currently set to noindex, so none of these test sites can compete with the live rumzer.com.
Sitemap: a list of every page address on a site, written for search engines so they can find pages without following every link. Each version has its own sitemap.xml.
Structured data (JSON-LD): facts about a page written in a format machines read directly: "this is a software product with these prices", "this is an article published on this date", "these are questions and answers". Search engines can use it for richer results, such as FAQ answers shown right in the result.
Open Graph share image: the picture and title that appear when someone pastes a link into LinkedIn, Slack or a text message. tools/og.mjs generated 31 branded 1200×630 cards for this.

Switches for going live

node src/build.mjs --production=gusto              # make one version indexable
node src/build.mjs --site=https://example.com       # set the real web address

Only one version should ever be indexable. The three share their content, so listing more than one would make them compete with each other.

09Limits and open items

  • No traffic data: demand scores are relative. Real numbers need Google Search Console once a version is live on its final domain.
  • Blocked sources: ECHA and EUR-Lex block automated reading, so some EU facts were sourced from the European Parliament's Legislative Observatory or archived copies.
  • SCIP may change: the European Commission has proposed repealing the SCIP notification duty. It has not been adopted as of 2026-09-27; the SCIP page says so, and SCIPBridge copy may need revisiting.
  • Dated facts need re-checking as regulations move. Phase 4's monitoring is meant to take this over.
  • Photo licensing for the stock and hero images taken from rumzer.com is unknown.
  • Forms don't send yet: the contact form, sign-up card and questionnaire validate input but submit nothing. That is Phase 5.

Further open items are listed in HANDOFF.md.