VideoCompress
Free In-Browser Video Compressor
Spent today rebuilding the navigation on VideoCompress. The site has 27 tool pages now — one per platform or target size — and the old header linked to exactly one of them.
The obvious fix is a dropdown with four categories. The part I didn't expect to matter: I put each platform's actual limit next to its name. WhatsApp 16 MB. Discord 10 MB. Email 25 MB. Telegram 2 GB.
That one column changed what the menu is for. Nobody scans it to find a tool — they scan it to answer "how big am I allowed to be?" The menu answers that before they click anything. It cost nothing to add; the numbers were already sitting in the page data.
Two other decisions I'd repeat:
The whole menu renders into the static HTML and just hides with visibility: hidden when closed. Every tool page is one internal link from every other page, and a crawler sees all of it without running any JS. visibility: hidden also drops the links out of the tab order, so it isn't an accessibility trade.
The bug that ate an hour: the mobile drawer was clipped to a 64px strip. The header has backdrop-filter: blur(), and a backdrop-filter makes an element a containing block for position: fixed descendants. Moving the drawer out of <header> fixed it. I would not have found that by staring at the CSS.
Next up: per-page keywords for the 27 landing pages, in all seven languages.
1 Comment
The interesting part is that the navigation stopped being just navigation and became a decision aid. Showing the limits upfront removes a question before the user even reaches the tool, which is a much stronger use of that space.