On the podcast today, we’re joined by Paul Lacey.

Paul has been working in web design and development since 1999, and in that time he’s witnessed the evolution of the industry from the early days without CSS, through the dot-com boom, to the modern era of design systems. He’s put together his own design systems for professional and client work, and brings first-hand, practical experience to our chat. Paul joins our regular hosts, Nathan Wrigley and David Waumsley, to help demystify what “design systems” actually are, and why they might matter to all of us, not just the largest organisations.

We kick things off by uncovering the surprisingly varied definitions of design systems, including perspectives from the Nielsen Norman Group and Figma. The conversation quickly turns to what design systems look like in real-world settings: are they just libraries of reusable components, or do they go deeper than the visual layer to include things like code, documentation, and accessibility?

Paul, David, and Nathan talk through the differences between style guides, design tokens, component libraries, and pattern libraries, and where the lines between them blur. We touch on how design systems operate in organisations of all sizes, from solo freelancers to giant institutions like the UK government, and how the goal of a design system isn’t just making things look good, but improving collaboration, maintaining consistency, and supporting accessibility.

If you’ve ever wondered how to get started with a design system, whether to build your own or adapt an off-the-shelf solution, or why some systems succeed while others become overly complex, this episode is for you. We also talk about the long-term benefits and pitfalls: does consistency stifle creativity? How do design systems need to evolve alongside technology? And how do they stay resilient in an ever-changing industry?

If you’re curious about design systems—or want to build more efficient, accessible, and lasting websites—this episode is packed with insights, practical tips, and plenty of honest stories about what happens when theory meets practice.

On the podcast today, David and Nathan are back with the second episode in their new series, where they break down the key components that make up a website. Today, they’re talking about website navigation, and asking the surprisingly sticky question: why is it so bloody awful?

David has done a deep dive into the ins and outs of navigation, putting together an exhaustive list of all the pieces involved. Nathan admits he used to take a much simpler approach, just add the top-level links and hope Google did the rest, but David’s research proves there’s a lot more going on beneath the surface.

They start by exploring the shifting meaning of terms like “menu,” “navigation,” and “nav,” both from a developer and a user’s perspective. Is it a noun? Is it a verb? Is it a technical role? As they discovered, even big names in UX like the Nielsen Norman Group can’t seem to agree.

From there, they walk through the many different types of website navigation: main links, hamburger menus, even on desktop, breadcrumbs, dropdowns (on hover or click), mega menus, and more. And it’s not just the styles that are confusing, there’s a tangle of terminology too, with “dropdowns,” “flyouts,” and “pull downs” meaning different things to different people.

David and Nathan share their frustrations with modern navigation: hidden menu items, ambiguous links, and the accessibility pitfalls of complicated dropdowns. They talk about why menus can be especially tricky on mobile, and how easy it is for even pros to get lost in their own site’s nav. David explains his approach of keeping things simple, stopping at HTML and CSS wherever possible, and only grudgingly adding JavaScript when absolutely needed.

They then explore the design, SEO, and accessibility issues that come with modern navigation patterns: from accidentally hiding important links from both users and Google, to building mega menus that are impossible to navigate by keyboard, to the sheer overwhelm of too many choices.

The conversation is packed with real-world frustrations, rants about hover-based menus, and practical tips on creating accessible, user-friendly website navigation. If you’ve ever been baffled by your own website’s menu, or just want to build smarter, simpler navigation that works for everyone, this episode is for you.

On the podcast today we have the usual suspects - Nathan Wrigley and David Waumsley.

This is the first in a new series where Nathan and David take a deep dive into different website components - today’s focus is on accordions. You know the ones: those hide-and-show sections you often see on FAQ pages, product details, or anywhere there’s a need to tidy up lots of information into collapsible panels. But what makes an accordion actually a good solution for your site, and when does it start to get in the way?

Nathan and David kick things off by defining what an accordion is (with a nod to the UX authorities and the W3C) - and clarifying, with a bit of humour, what does and does not count as an accordion out in the wild. They look at the types of accordions - exclusive, non-exclusive, and toggle - and discuss how these patterns got established in web design.

They also reflect on their own use (and sometimes overuse) of accordions in client work, especially handy within page builders, and how their thinking has changed as the web’s evolved.

Then it’s onto the technical side: the code needed. David explains why, until recently, JavaScript was essential for accessible accordions, but now, thanks to advances in HTML (details and summary elements), CSS (with exciting new features like interpolate size), and improved browser support, you can build robust accordions without a single line of JavaScript - plus some important gotchas and accessibility considerations to watch for.

They round things off by discussing when accordions add value - helping reduce overwhelm and improve scanability (is that a word?!) - and when they can cause problems, like increasing "interaction cost," fragmenting information, or raising accessibility and SEO concerns. There are design details to consider, as well as practical recommendations for ensuring your accordions are friendly for both users and search engines.

And if you want to see these concepts put into practice, the episode is paired with a follow-up video where David and Nathan demonstrate real code snippets and examples at noscript.show/learn/12.

If you’ve ever wondered whether you’re using accordions for the right reasons, how to build them the modern way, or want a clearer picture of their pros and cons - you won’t want to miss this episode.

Timestamps:

00:00 Accordion Design and Definition

06:22 FAQ Page Building Approach

07:52 HTML-Only Accordions Evolve

12:04 "Content Organization: Pros and Cons"

13:47 Logitech Product Page Analysis

16:56 "Accordion Utility in CMS Design"

22:02 Browser Styling Challenges and Limitations

24:49 Schema Markup for FAQs

27:43 "Purpose of Hiding FAQ Content"

29:56 "New Development Wrap-Up"