Accessible and Flexible: The New Newsletter Design for the Hamburgische Staatsoper

Half the production effort per campaign, accessible and mobile-optimized mailings.

• Production time per campaign: −50%
• Mobile click rate: +18%
• Cost of image editing: €0
• Tested on: over 50 email clients

The previous email templates were rigid and offered the team little creative freedom. Every image adjustment required external graphics software. The HTML structure did not meet accessibility requirements, for example for screen readers.

• Rigid templates with high maintenance effort
• External image editing for different screen formats
• Insufficient accessibility (BFSG)
• Weak mobile optimization and unstructured HTML code

starmate set up a modular template system and integrated it into the Staatsoper's EMS:

• Email marketing: A few flexible components replace many rigid individual elements.
• Template redesign: Images can be displayed in the desired aspect ratio in the editor, and different images can be set for desktop and mobile.
• Accessibility: A semantic heading concept (H1, H2) and a revised HTML structure make the mailings readable for screen readers. The design is fully responsive.

The Staatsoper creates campaigns significantly faster, and subscribers receive easy-to-read, modern newsletters.

• Reduced production effort
• No external image editing for different screen formats
• Accessible implementation according to BFSG requirements
• Better click rates through consistent mobile optimization

“Our new starmate templates are a real game changer. We save an enormous amount of time on image editing and production because everything is built modularly. The fact that our newsletters are now also fully accessible and perfectly readable on mobile is indispensable for us as a leading opera house.”

Clara-Maria Voigt, Online Communications Officer, Hamburgische Staatsoper

Good design succeeds when it includes everyone. At the Hamburgische Staatsoper, we were able to show that accessible email marketing looks good and is functional at the same time.

The biggest hurdle used to be the effort of preparing images. With flexible aspect ratios directly in the editor, this step is no longer needed, and the clean HTML code helps screen readers.

Chris, Consulting

1. UI/UX & accessibility audit: Analysis of the existing newsletters and definition of the accessibility criteria.
2. Wireframing & component design: Design of the flexible content blocks and the heading system.
3. Code development & optimization: Semantically correct HTML code for desktop and mobile.
4. Integration into the EMS: Dynamic placeholders and flexible image display.
5. Test phase & go-live: Tests on over 50 email clients and launch.