Test your design system not your website

Websites change a lot. That’s really the point of most websites.

Your design needs to adapt and change to fit the content on offer and the changing nature of the web. Whether it’s a modified navigation bar to accommodate new sections, a new type of article page or a complete design refresh, the key to success is continuous improvement.

With this constant change, how do you keep control over quality? Different screen sizes, different user interaction methods, different browsers and different device capabilities make manual testing laborious and repetitive. You may also have a big site with 100s of pages and many page types. Or even multiple sites which share a consistent brand and style. Do you just test a few example pages and hope the rest will be fine? Or do you delay releasing changes so that you have time to test thoroughly?

Get control over your design with a system

A great way to get control over this complexity is to create a living design system, often called a ‘style guide’, ‘pattern library’ or ‘component library’. Whatever you call it, the idea is to:

1. document your design system in one place
2. break your design into modular components
3. eliminate the need to affect production content until designs are ready
4. offer an environment for testing and debugging bugs
5. help your team collaborate and reach consensus more effectively

styleguides.io has a huge number of articles, tools and other resources to get you started with design systems.

For small sites and systems, your style guide might be just a single static page that you edit by hand. For larger sites, you might want to use one of the many tools that allow you to generate documentation, isolate individual components, display code examples and allow construction of component variants.

Make cross-browser testing less of a crapshoot

One of the biggest benefits of a style guide site is that it presents a controlled and consistent environment for manual and automated testing. Instead of finding a suitable page to test on your website, you can isolate an individual component and test it at various screen sizes, and across different browsers. You can do this yourself, or automate it using cloud-based tools. With automated testing, you can set up the tests to run at a regular scheduled time, or when anyone commits a change to the system, so that you have confidence that major unforeseen layout bugs are captured and reported back to the team.

If you’re just starting out with a design system, it’s important to keep it simple at first. Focus on your design process and not the tools, libraries or frameworks you use. If you work as part of a team, you’ll need to make sure that maintaining the style guide becomes a required part of the production workflow. You can even automate this workflow, so that your style guide outputs code and design assets to your website.