Why a Relaunch?
Our own website should always be up to date too. After a few years with fairly generic building blocks and an inconsistent look, we completely rebuilt wacon.de – technically on a current TYPO3 version, and visually following a consistent, modern design system.
Now Built on Google's Material Design
For the relaunch, we deliberately chose Material Design – Google's open-source design system, used for many years across billions of apps and websites, including in nearly all of Google's own products. Material Design defines consistent rules for colors, typography, spacing, and recurring components like buttons, cards, or form fields.
The benefits for our website – and going forward, for client projects too:
- Consistency: All pages and building blocks follow the same visual rules, making everything feel tidier and more professional.
- Proven usability: The UI components are based on extensive user testing by Google and are already familiar to many visitors.
- Accessibility built in: Contrasts, click targets, and states like hover or focus are already accounted for in the system.
- Faster development: A clear building-block system lets new content elements come together faster and more consistently.
More Speed and Better Readability for People and Machines
Beyond the visuals, we've also improved a lot under the hood: images are now automatically delivered at the appropriate size instead of full resolution, CSS and JavaScript are kept lean, and recurring building blocks are cleanly structured technically. The result is a noticeably faster site – important for visitors and for Google ranking alike.
The new site is also easier for search engines and AI systems to read: structured data (JSON-LD) describes content in a machine-readable way, an up-to-date XML sitemap helps ensure every page gets fully crawled, and the page structure follows clean, semantic HTML instead of nested layout tricks.
Convenient Instant Search
The new live search in the header shows results as you type – with no new page load required. This lets visitors find services, references, or know-how articles within seconds, even if they don't know the exact page title.
Light and Dark Mode
Anyone who prefers reading the website in dark mode, for example in the evening or in low ambient light, can switch between light and dark design with a single click. Both variants are fully implemented within the Material Design color system and offer consistently sufficient contrast throughout.
More Modern Content Elements and Better Mobile Support
Instead of a handful of rigid standard building blocks, numerous flexible, reusable content elements are now available – from comparison graphics to stat tiles to pricing and team cards. This lets editors design pages far more freely. At the same time, every page is consistently optimized for mobile devices: navigation, forms, and image galleries work just as reliably on a smartphone as on desktop.