DOMiD - Documentation center and Museum of Migration in Germany

[schwarzdesign]

We recently relaunched DOMiD, the Documentation center and Museum of Migration in Germany. Concept, design and implementation by schwarzdesign.

Features

• Bilingual site with German and English
• A section-based design focusing on flexibility and ease-of-use for editors
• Multiple forms built with FormBuilder that can be placed on any page
• Separate feeds for news & press releases
• Lightning fast page loads with almost perfect ratings in Lighthouse
• Completely accessible and SEO-friendly

Notable tech decisions

Forms and form placement

There are multiple forms for different services that DOMiD offers. Those are built with the FormBuilder. The editors don't have access to the FormBuilder itself, but we still wanted to allow them to control which form is displayed on what page. For this purpose, every page has a select field to select which form to include (if any). Additionally, the form placement has additional fields for a headline and a description, so a generic contact form can be reused in different contexts.

Section-based design

Most pages are built through Repeater Matrix sections. There are multiple section types available, for example:

• A generic text / image column with up to three columns of text and images
• An accordion (rendered as <details> elements).
• An image gallery
• Downloads (for files and images, displayed as a list of downloads)
• External Embed (e.g. YouTube)

All sections have an optional headline and a selection of three different background colours. In addition, text columns may be rendered as a coloured block with some padding. This allows for interesting and diverse layouts.

Testimonial database

One of the available sections is for testimonials or statements (you can see one at the bottom of the homepage). Because one testimonial may be displayed on multiple pages and the client wanted to be able to switch the displayed testimonial on the fly, there's a separate content type for statements. The statement content type has fields for the statement text, author, and author image. The testimonial section only has a page reference field to select which statement to show. This way, the testimonial definition is separate from the placement on a page.

Modules used

• Form Builder
• Pro Fields (Repeater Matrix in particular)
• Unique Image Variations
• ALIF - Admin Links in Frontend
• Sitemap
• Wire Mail SMTP
• Developer Tools: Tracy Debugger, Duplicator, ProcesWire Upgrade

Migration museum

As a sidenote for anyone living in Germany, this month the German Bundestag has approved funding for DOMiD's first Migration Museum ("Haus der Einwanderungsgesellschaft")! The museum will be build in Cologne and is scheduled to be finished by 2023. We're looking forward to it! Check out this page if you want to learn more, or find out what people are saying about it here.

[dotnetic]

I like the design of the site, but here is some criticism too:

There are german passages on the english site. For example the citation from  Dr. Mark Terkessidis on the home page, or the "Suchen" button on the search page.

The font in the logo is really bad to read:

Fonts before sponsors logo look also bad (bad antialiasing)

[schwarzdesign]

@Jens Martsch - dotnetic Thanks for the feedback!

The search button was missing a translation, I have fixed that. As for the rest of the contents, not everything is translated just because of editorial time constraints (also diminishing returns, not all pages are that important). We usually go with the default behaviour (inheriting from the default language when a translation is missing), because in most cases it's still better to fallback to German instead of having empty sections. Of course, ideally everything would be translated!

[Nicolas]

Nice site.

Thanks for the insights about how it was built and what are the modules involved.