Engineering

How this website is built

A short tour of the Manta Studios site: static pages from Astro, no client framework, no web fonts, a strict security policy and tests that run the whole site with JavaScript off.

This website is the home for Manta Studios’ games, digital toys and digital experiences. Here is how it is put together.

Static pages, no framework in the browser

Every page is built once, at deploy time, with Astro and served as plain HTML from Cloudflare’s network. Nothing renders in the browser that could have been rendered in advance. The only JavaScript that ships is a few small modules for the mobile menu, the scroll-in reveals and the contact form, and the site is built to work with all of it switched off: the menu falls back to a plain list, the reveals stay visible, and the contact page offers an email address when the form cannot run.

Text first

There are no web fonts. The type comes from a tuned system font stack, which means no font requests, no invisible text while a file downloads, and nothing to shift the layout when it arrives. There are no hero images either; the first thing painted on every page is the words. The colours, spacing and type sizes live in one set of design tokens, and every component reads from those rather than carrying its own values.

Locked down by default

The security headers are set once for the whole site: a strict Content-Security-Policy with no inline scripts, HTTP Strict Transport Security, and the rest of the modern set. The only server-side code is one small function behind the contact form, which checks a Turnstile token and forwards the message. Everything else is a file.

Tested the way it will be used

An automated browser suite runs every page in Chromium, Firefox and WebKit, at phone, tablet and desktop sizes, and once more with JavaScript disabled. It checks accessibility with axe-core, keyboard navigation, the 44-pixel target size on every control, the metadata on every page and the structured data behind it. Lighthouse runs against performance budgets in continuous integration, so a regression fails the build rather than reaching the site.

Content as data

News posts are Markdown files with a validated schema, so a malformed entry fails the build instead of shipping a broken page. Game information is stored as structured data and used to generate the catalogue.

Follow the RSS feed for studio updates.

Keep reading

More from the studio

Studio News

A new chapter for Manta Studios

Manta Studios is focused on games, digital toys and digital experiences. Raymond Saliba shares what comes next for the independent studio.

Raymond Saliba