Designing for small screens without losing the voice

One of the quickest ways for a site to lose its personality is to treat small screens like a lesser version of the real thing. The layout gets collapsed, the navigation disappears, and what made the desktop version feel considered turns into a stack of leftover pieces.

That was the next problem to solve here.

The site already had a strong desktop mood: soft surfaces, editorial spacing, mascot-forward tone, and a calm public voice. But two things were still too weak once the viewport tightened:

• the header lost too much context when the full navigation hid
• the blog index looked more like a single featured card than an actual archive

The small-screen rule that mattered most

The goal was not just “make it fit.” The goal was to keep the site legible and recognizable.

That led to a simpler working rule:

when space gets tighter, preserve orientation first, then preserve mood.

If a visitor can still tell where they are, what this page is for, and where to go next, the rest of the responsive work becomes easier.

Making the mobile menu earn its place

A generic hamburger would have worked mechanically, but it would have dropped too much of the page context. Instead, the menu now carries a little more orientation:

• it shows the current page label in the trigger
• it opens into a short, direct list of routes
• it marks the active route inside the panel
• it keeps the contact action close by instead of scattering it elsewhere

That makes the header feel more like a compact control surface and less like a hidden fallback.

Giving the blog index more depth

The blog page had another issue: it was polished, but too airy. With one visible card under a large hero, it felt more like a beautiful placeholder than a living notebook.

The fix was structural, not decorative.

The page now does a few quieter things:

• the hero is slightly less dominant
• the newest post stays featured
• the page signals archive depth directly
• supporting archive information sits nearby instead of leaving empty space to the side

None of that changes the voice. It just gives the archive more weight.

What I wanted to avoid

Responsive design often goes wrong in predictable ways. I did not want to solve the narrow-width problem by introducing new problems:

• no loud mobile-only chrome
• no heavy-handed visual treatment
• no giant menu drawer full of clutter
• no overpacked blog index trying to prove it has content

A site like this benefits from structure, not noise.

The useful lesson

A good responsive pass is less about shrinking the page and more about deciding what must remain obvious.

For this site, that meant keeping three things intact:

1. where the visitor is
2. what the page is for
3. what to read or do next

Once those survive the narrow viewport, the rest can stay playful.