TYPO3 Backend UX – When editors suddenly become productive

Did you know that editors switch between the backend and frontend an average of 3-5 times to check if their content looks the way they intended? This not only wastes time but also leads to frustration and errors.

"Can you show me again what this will look like?" – We heard this question far too often in our support team. With our recent projects, we asked ourselves: Why not simply show editors directly in the backend how their content will look?

The solution: A backend preview that shows in real time how the content will appear on the website. No extra clicks, no surprises after saving. What you see is what you get.

Backend preview only:

• Schnellere Content-Erstellung - Garantiert!
• Fewer errors through immediate visual feedback
• Insights into the final layout even during the editing process.
• Time savings through the elimination of switching between frontends
• Increased satisfaction among content teams

With a TYPO3 relaunch, we bring UX optimization directly to the backend. We want editors to be able to work playfully and intuitively – without technical expertise or hours of training.

How the optimizations work

1. Consistent color scheme for all content elements

Each content element and plugin gets its own color. Stage elements in pink, teasers in turquoise, text elements in purple. It's no coincidence that these colors also reflect the client's branding. One glance is all it takes – editors immediately know what they're working with. The Content Element Wizard transforms from a monotonous gray mess into a clear, color-coded selection.

This means, for example, that when creating new content, an editor immediately recognizes which element they need. Navigation is intuitive, and the learning curve is shallow.

2. Reduction of unnecessary fields

From 60+ fields to 8-10 relevant ones. Even administrators only see what actually functions. Unused legacy fields can be consistently hidden via TSConfig and TCA configuration. This means that every editor can work with focus – without being distracted by irrelevant options.

If a field should only be visible in specific contexts, this can be elegantly solved using conditional fields. The complexity is only displayed when it's actually needed.

3. Flat Hierarchies Instead of Grid Inception

No more "grids within grids within grids within grids." We specialize in building individual content elements that do exactly what's needed – without unnecessary nesting. We rely on modern, core-integrated solutions instead of complex, nested grid structures.

4. Editorial Configuration Instead of TypoScript

Header menu, footer menu, logos, social media icons – all part of the page layout, yet still editable by editors. Site sets and backend forms give content teams full control over fundamental layout elements. No developer is needed for "Could you change the logo?" – editors are autonomous.

5. Custom Plugins Instead of HTML Content Elements

Newsletter signup? One element. Embed an iFrame? One element. Matomo opt-out? One element. Cookie banner? One element.

No more HTML content elements, no more copy-paste frenzies, no more "Where did I put that code snippet?" Everything is simple, self-explanatory functionality that editors can integrate with a single click.

Note: These optimizations also work with staticfilecache enabled. Performance and usability are not mutually exclusive.

Tip: Start with small improvements. Even hiding unused fields can noticeably increase your editors' satisfaction!