A premium product page, built and measured in a day
B3TTER is our own concept build: a full product site for an insulated stainless steel bottle, scoring 100 for accessibility on the live URL with 56 MB of source photography shipped as 1.5 MB.
Snapshot
- Client
- B3TTER — a GoodGround concept brand
- Industry
- Outdoor gear, direct to consumer
- Services
- Design, front-end build, image optimisation, accessibility, SEO setup
- Build
- Hand-written HTML, CSS and JavaScript. No framework, no build step, no third-party requests.
The challenge
Most product pages for physical goods fail in the same two places. The photography is heavy enough to stall the page on a phone, and the interactive parts — colour pickers, review sliders, image galleries — are built with a mouse in mind and fall apart for anyone using a keyboard or a screen reader.
We wanted to prove both problems are solvable at the same time, on a page that still had to feel expensive. So we set the brief against ourselves: 56 MB of studio renders and lifestyle photography, a live colour switcher, a review carousel, an animated statistic grid, and a hard requirement that none of it drop a single accessibility point.
The solution
The product carries the colour, the interface stays silent
The entire interface is monochrome. Every bit of colour on the page comes from the bottle itself, which is what makes a six-colourway range read as a range rather than as decoration.
The finish switcher crossfades six real photographs rather than recolouring one. Each shot is preloaded and stacked, so changing colour never flashes white while an image loads, and the swatches respond to arrow keys as well as clicks.
A bento grid that actually packs
The specification section is a bento grid of mixed tile sizes rather than a row of identical cards. Uniform card grids are the visual default of every template on the internet, and varying the spans gives the section a focal point instead of an even field.
It packs exactly: four columns by three rows at desktop, two by three at tablet, with no orphan tiles and no gaps at any width. We verified that by mapping every grid cell and checking coverage, not by looking at it.
56 MB of photography, shipped as 1.5 MB
Twenty-seven source images arrived as PNGs and JPEGs totalling 56 MB. Every one was converted to WebP, resized to the largest size it is actually displayed at, and trimmed to the product's real bounds so the layout is not fighting empty transparent space.
The finished page ships 1.5 MB across 28 files, with alpha preserved on every product cut-out. Nothing is loaded from a CDN, an analytics script or a font service, so there is no third-party request anywhere in the page.
Accessible because it was checked, not because it was assumed
Every interactive part is reachable and operable by keyboard: the colour switcher, the review slider, the mobile menu and the navigation. The slider exposes only the visible quote to screen readers, and the auto-advance stops the moment anyone hovers, focuses or clicks.
All motion — the hero settle, the scroll reveals, the counting statistics, the carousel — is switched off under prefers-reduced-motion rather than merely slowed down.
The results
Every figure below was measured on the live URL. Each one tells you how to check it yourself.
100
Lighthouse Accessibility
Run Lighthouse against the live URL in Chrome DevTools.
100
Lighthouse Best Practices
Same audit, same run.
56 MB → 1.5 MB
Photography payload
Compare the source renders with the shipped assets in the Network panel.
0
Third-party requests
Open the Network panel and filter by domain. Everything is first-party.
0
Console errors
Open the Console on the live URL.
These are build-quality measurements, not business outcomes. B3TTER is a concept brand with no customers, so there is no traffic, revenue or conversion data to report, and we are not going to invent any. What these numbers show is how the page was built — and every one of them can be checked in your own browser in under a minute.
Want a website like this?
Tell us what you sell and who you sell it to. We will tell you honestly whether a new site is the thing that will move the needle.