Mikkel Manniche
Dansk English Deutsch

TPOnlineMedia.com

I built the whole digital foundation for TPOnlineMedia: the website in Danish, English and German, an admin panel and an automatic website check that shows what's wrong with a website, written so anyone can understand it.

Next.js Supabase Edge Functions Accessibility Visit site
tponlinemedia.comScroll inside the window
The full front page of TPOnlineMedia.com

The challenge

The site had to work without a server that needs running and maintaining. At the same time it had to be fast, accessible and findable by search engines in three languages.

The website

The website is a static export with no backend of its own. Requests go straight from the browser to Supabase, where the public key can only insert data, never read customer information back out.

In September I rebuilt the site in a dark design with a single typeface throughout.

The website check

You enter an address and get a report with measurements split across five categories: SEO, speed, security, technical setup and conversion, written so it can be read without knowing how to code. The report itself points out what should be fixed first.

How a check runs7 steps · same engine as the validation

  1. Address and email are validated, and a hidden field catches bots without giving them a report
  2. The attempt is reserved in the database first — 4 per email per hour, 8 per IP, 10 per domain, 150 in total, otherwise it's rejected straight away
  3. The page is fetched securely, https first and http only if https fails; bot protection from Vercel or Cloudflare is recognised and passed on to the team instead of counting as an error
  4. Robots.txt, sitemap, favicon, https redirect and compression are fetched in parallel with the page itself
  5. The measurement is converted into pass/partial/fail per check, and into a score for each of the five categories
  6. The report is saved, and Google's PageSpeed measurement is fetched in the background, without the visitor waiting for it
  7. The report is sent in the customer's own language, and an English note lands with the team at the same time

The same engine runs when a customer uses the site, and when the validation holds the check up against an independent measurement.

Before the check went live, it was held up against an independent browser measurement of 22 real websites. In the last run, 548 of 550 measurements agreed. The two that didn't were caused by a page that sends its security header differently from one time to the next.

The admin panel

The panel gathers enquiries from all three language versions, pipeline, calendar and traffic, measured without cookies. Replies are sent from the panel, and the customer's reply lands in the same thread.

The lead tool for Germany is a call list, not a mail tool. Cold B2B email requires prior consent under UWG §7, while calls to businesses may be made on the basis of presumed consent.

Results

The front page went from 11.3 MB to 1.9 MB by switching 13 screenshots from PNG to WebP at the same size, with no visible difference.

Contrast is measured automatically on all 28 pages and over 7,000 text elements, with none below the requirement. All pages have been tested with an automatic accessibility tool at desktop and phone width with no errors.

The site's security rule for which domains content may be loaded from now blocks everything else, after 33 pages across all three languages were reviewed in the browser with not a single violation.

0/ 550

Measurements that agreed with an independent browser measurement of 22 real sites

0

Accessibility violations found with axe on all 28 pages, at 1440 and 390 px

0

CSP violations across 33 pages in all three languages, reviewed in WebKit

Get in touch