When a website becomes an experience Bauhaus University Weimar

The University

The Bauhaus University Weimar is an art and design university in the tradition of the Bauhaus. Its website had grown over the course of 15 years: faculties, institutes, and projects had each added their own sections, and the structure followed the organizational chart rather than the users’ needs. The website had become an archive. With the 2026 relaunch, the university now has a website that follows the Bauhaus principle of “form follows function”: a single typeface, bold blocks of color, and the basic shapes of the circle, triangle, and square. Underpinning this is a completely rebuilt TYPO3 14 system that is faster, more secure, and significantly easier for the editorial team to maintain.
 

Design with attitude

The color has no substantive meaning, and that is intentional. Nine themes combining color and pattern are randomly selected each time the page is loaded, so the same page always looks different. There is only one non-negotiable element: contrast. Instead of stock photos, there are 90 generated patterns in SVG format, available in three sizes, each just a few kilobytes in size and freely scalable.

Rebuilt using TYPO3 14

Instead of updating the existing installation, we rebuilt the website from scratch on a clean TYPO3 14 installation, free of technical legacy issues. We transformed 43 old content types into 19 custom content elements. Twenty-four migrators automatically imported 15 years of content while cleaning it up in the process. Migrators work on data records that are already in the target system and modify them directly there. For example, they convert old content elements into new ones, move field contents to other fields, clean up HTML, or adjust links and file references.

A complete run of the entire migration took six hours. This allowed the editorial team to work in a stable, secure system from the very beginning, rather than having to transfer content manually.

A living styleguide

The design is housed in a style guide on its own domain and runs independently of TYPO3. The style guide and the website are rendered from the same code: What you see in the style guide looks exactly the same on the website. Colors, typography, and components can be reviewed and copied directly from there, rather than having to look them up in a PDF. This makes the style guide the authoritative foundation for the website’s future development and for the design of third-party systems.

Easy for the Editorial Team

Many editors work on the website. Therefore, every choice we leave out is a decision that no one can get wrong. The editorial team determines the importance of a heading (hierarchy level H2, H3, or H4) - its appearance is dictated by the design in the context of other elements on the page. For every piece of page content, the backend already shows how it will be displayed in the frontend.  Furthermore, the editorial team has access only to relevant configuration options.

Magic Container - the editorial team's favorite.

The “Magic Container” displays the same content either as a slider or as a tile grid with two to four columns and an optional filter. Editors simply add news items, contacts, galleries, or downloads to it. Every news item, every person, and every image automatically becomes its own tile. Incidentally, the editorial team adopted the name from the working title because they liked it so much.

19 news templates were consolidated into five.

We took 19 news templates that had evolved over time and streamlined them into five clearly defined ones. This allows editors to find the right template right away, ensures that all news items have a consistent look, and makes the system much easier to maintain.

Customizable templates in the page tree

For faculty, project, and staff pages, ready-to-use templates are available in the site tree and can be copied with just a few clicks. The structure and content elements are already in place, so editors simply need to insert their content. This speeds up content maintenance, makes it easier for new editors to get started, and ensures a consistent look and feel across the entire website.

Developed together

Three agencies with clearly defined roles: Atelier Disko was responsible for the concept and design; in2code handled the complete front-end and back-end implementation; and 3pc managed the intranet and search functionality. On the university’s side, three project managers oversaw the project, supported by many helping hands in the editorial department.

Everything started with a two-day kick-off meeting on-site in Rosenheim. Even before writing the first line of code, we established a branching model in a Git Flow workshop that was binding for everyone involved. This allowed three teams to work in parallel on a shared codebase.

A fixed weekly schedule kept the project on track: At the start of each week, we coordinated internally; later in the week, we held a regular meeting with the client and a large meeting with all participating agencies. This ensured that questions were quickly resolved, dependencies were identified early on, and everyone involved was always on the same page.

Lighthouse: 100% in all categories

The website achieved a maximum score in each of the following categories: performance, accessibility, best practices, and SEO. Before the relaunch, the scores ranged from 59 to 92. The Largest Contentful Paint - the time it takes for the largest visible content to load - dropped from 9.0 to 1.2 seconds. This is no coincidence: We monitored these metrics repeatedly throughout the project and adjusted our work accordingly.

Fast and secure

The site's performance isn't the result of a single measure, but rather many small ones: code splitting, responsive images, lazy loading, self-hosted fonts, StaticFileCache, HTTP/2, and more. Security is ensured by, among other things, a strict Content Security Policy for both the front end and back end, single sign-on via Shibboleth, and login credentials that aren't stored in the code.

Accessible to people and machines

We have placed special emphasis on optimization in the area of “agentic browsing.” The website is particularly well-suited for reading and interaction by AI agents. Each page is available in two formats: as HTML for browsers and as Markdown for AI agents, which uses only one-fifth of the data volume. Structured data (JSON-LD) describes, for example, degree programs along with their degrees and standard duration of study, while an llms.txt file helps language models navigate the site. The robots.txt file specifies that AI systems may read the content but should not use it for training.

Privacy policy without a cookie banner

Videos and Instagram posts are not loaded until users give their consent. Statistics are tracked using Matomo without cookies on the university’s own server. That is why the website does not need a cookie banner - not out of negligence, but because nothing is stored without consent.

Media without detours

The editorial team can easily embed Vimeo videos, live streams via Vimeo Events, Vimeo Showcases, and Podigee podcasts using just a URL - just like an image. No dedicated content element or plugin is required. The YaCy-based search also finds content outside of TYPO3, suggests terms as you type, and offers flexible filtering options.
 

uni-weimar.de is …

With its 2026 relaunch, the Bauhaus University Weimar is showcasing online what it stands for: design with a purpose. For us, this project is an example of what happens when design, technology, and content are considered together from the very beginning. With the Living Style Guide and a streamlined TYPO3 14, the university now has a foundation on which to continue developing its online presence over the long term.

Psssst…

At the TYPO3 University Days 2026, we had the opportunity to present the project in detail during a keynote speech. If you missed the presentation, you can watch it again here!

Sandra Pohl

College or university projects involving TYPO3?

Do you have any questions about this or other college or university projects involving TYPO3?

Our Professional Scrum Master and Product Owner, Sandra Pohl, will be happy to assist you.
 

Sandra Pohl  |  Product Owner & Project Manager