Here’s a rewritten version of the article with a more concise and conversational tone, while preserving the original meaning and structure:

—

Designing a Retro-Inspired Website with Modern Tools

In a recent project, I had the pleasure of designing a new website for Emmy-winning game composer Mike Worth. Mike approached me with a clear vision: a bold, highly visual site that blends his love for 1990s animation—think classic Disney shows like DuckTales—with cutting-edge web standards.

The challenge? Capture the expressive, nostalgic feel of ’90s web design without slipping into parody, all while keeping the site accessible, performant, responsive, and semantic.

Throwback Inspiration

Working on Mike’s site was a refreshing trip back to a time when web design felt more spontaneous and less constrained by best practices. Some might call those early designs “whimsical,” but I prefer the term “expressive.” They were playful, yes—but also purposeful.

Back in the day, websites often featured integrated graphics that combined branding, content, and navigation. Think of the original Space Jam site from 1996—an iconic example. But I wanted to look beyond that.

Brands like Nintendo and Cheestrings used homepage graphics that doubled as navigational elements. Goosebumps, for instance, merged cartoon-style illustrations with bright, functional layouts. These designs were anything but boring.

Back then, we built these layouts using sliced images in tables or image maps—tools that have mostly faded from use today.

Revisiting Image Maps

Image maps were introduced in HTML 3.2 and allowed developers to define clickable areas over images using

and

elements. They were commonly used for navigation, maps, and interactive graphics before CSS, SVG, and JavaScript took over.

Despite being old-school, image maps still have their perks: they’re lightweight, accessible when used properly, and supported by modern browsers. Here’s a quick refresher:

–

defines the clickable regions.
–

defines each clickable shape (circle, rectangle, or polygon).
– These can be enhanced with alt text, ARIA labels, and titles for accessibility.

For Mike’s site, which includes a large illustrated map with clickable regions, I wondered if image maps could still be relevant.

Trying It Out

Initially, I tried embedding clickable anchors directly into an SVG. That worked fine when the SVG was inline, but not when used as an image source. Image maps, however, worked well—though defining all those coordinates manually was tedious. Thankfully, tools like Image-Map.net make it easier by letting you draw shapes over an image and generate the markup.

One issue: image maps use fixed coordinates, so they don’t scale with responsive layouts. I added a bit of JavaScript to recalculate coordinates based on image size, making the map responsive.

Still, I wasn’t satisfied. I wanted larger, irregular clickable areas—not just circles. And I wanted hover states and animation.

SVG to the Rescue

Each in an SVG defines its shape using coordinates relative to its viewBox. To convert these into absolute coordinates for an image map, I used Raphael Monnerat’s PathToPoints tool. It generates the required coordinates, which you can then plug into your

elements.

But image maps come with limitations:

– They’re hard to maintain.
–

elements can’t display hover states or animations.
– They use fixed pixel values, which don’t scale well.

Ultimately, I needed a better solution.

A Better Approach with Inline SVG

Instead of relying on image maps or external SVGs, I created an inline SVG with individual elements for each clickable region. Each path was wrapped in an tag and placed at the end of the SVG source to avoid layering issues.

Then, I styled them with CSS:

#links a {
opacity: 0;
transition: all 0.25s ease-in-out;
}

#links a:hover {
opacity: 1;
}

This gave me full control over interactivity. I could animate hover states, add labels or icons, and even preview modal content—all within the SVG.

Why This Works

This method allowed me to retain the expressive feel of ’90s design while using modern, scalable, and accessible techniques. I could even add gloss effects, titles, or images inside each anchor to enhance the user experience.

Try it out yourself—inline SVGs with interactive paths offer a flexible, responsive alternative to image maps.

The Takeaway

Designing Mike Worth’s site was a great reminder that expressive design doesn’t have to sacrifice modern best practices. While image maps sparked some nostalgic inspiration, they weren’t the right fit for this project.

Instead, I found a way to channel the spirit of ’90s web design—bold, fun, and full of personality—using today’s tools. That’s what great design is all about: picking the right tool for

Discover more from WIREDGORILLA

Subscribe to get the latest posts sent to your email.

Similar Posts