London onigiri stall website, redesigned from scratch with live catering prices
A new website for a London onigiri stall. It is 22 times lighter to load than the old one, and catering customers see the price as they build their order.
Finished and handed over. Not yet switched on at the client’s own web address.
- 22×
- Lighter to load than the old site
- The new homepage downloads 244 KB against the old site’s 5.4 MB, both measured in a real browser on 17 September 2026. Scroll the whole old page and it reaches 8.9 MB.
- 0
- Hard-to-read text left on the page
- 241 pieces of text checked against the colours behind them, with every menu band lit and both pop-up windows open.
- 13
- Screen sizes checked, from small phone to wide desktop
- Nothing spills off the side at any of them.
The old site was slow, and hid the important bits
ONI sell handmade onigiri at three London markets and cater events. Their old site looked fine but was heavy: 5.4 MB before you scrolled, mostly photos saved straight off a phone. And the thing people most want to know, where the stall is this weekend, was right at the bottom.
Catering had the same problem. You only saw the price after scrolling down to the form, and if you are working out whether you can feed forty people, guessing usually means leaving.
The menu became the design
In Japanese shops, each onigiri filling has its own colour on the wrapper. ONI already gave every flavour a colour, so the menu is built from them: eight full-width bands, each lighting up as you add that filling.
A bar at the bottom of the screen keeps the running total and tells you how many more you need for the next price break. Your order survives a refresh.
Easier to read, for everyone
Half of the old flavour cards had pale text that was hard to read on its colour. Each band now uses dark or light text, whichever reads best, so the brand colours stay and the words are clear.
The booking form has proper labels, the quantity buttons work from a keyboard, and screen readers announce the total.
Technical notes
Measured contrast on the old cards: teriyaki salmon 1.82, kimchi tofu 1.72, spicy tuna mayo 2.76 and miso mushroom 2.99, against the 4.5 that WCAG AA requires. The form used placeholders instead of labels, and the steppers had no visible focus state or accessible name. The basket total is now announced through a live region.
The photos got room to breathe
The food photos now run in one slow strip across the screen. You can drag it, use the arrows or tab through it, and it stops completely for anyone who has asked their device to reduce motion.
Technical notes
The strip drifts at about 21 pixels per second, measured across five viewport widths. Two things in that code look wrong and are deliberate. Scroll position is held as a float in JavaScript and written to the element each frame, because incrementing scrollLeft directly reads back rounded and loses a sub pixel every frame until the strip stops moving. And the wrap distance is measured from the first photograph to its copy rather than taken as half the scroll width, because half the scroll width also counts the track padding and the loop would jump by a gutter on every pass.
Checked on real screens
Every page was checked on thirteen screen sizes, from a small phone to a wide desktop. Nothing spills off the side, the headline keeps its three lines, and the photo strip loops without a visible join.
The reviews on the page are real ones from ONI’s customers, approved by ONI and loaded from their own records.
Technical notes
Horizontal overflow was tested at thirteen widths from 320 to 1920 pixels, and the reel was checked for a visible join at 360, 768, 1280, 1920 and 2560. Cumulative layout shift measured 0.0024. JavaScript is 10 KB gzipped with no framework. One third party request leaves the site, to Supabase for the reviews. The fonts are self hosted with unused axes clipped, taking Montserrat from 38 KB to 27 KB and DM Sans from 62 KB to 36 KB.
What this involved
Technical notes: what it is built with
Static HTML, CSS, Vanilla JavaScript, Supabase, Netlify.