Devlog: preunec.de neu gebaut

Wir haben preunec.de nicht neu gestrichen — wir haben die Seite auf einem neuen Fundament neu gebaut. Das ist ein Devlog, also gibt es einen Blick hinter die Kulissen, aber geschrieben für alle: zuerst, was sich für Sie als Besucherin ändert, dann eine verständliche Tour, wie das Ganze funktioniert. Kein Code zum Lesen — nur Ideen und ein paar Diagramme.

Kurz gesagt — Die Seite spricht jetzt Ihre Sprache, aktualisiert sich in dem Moment, in dem wir veröffentlichen, bleibt schnell und respektiert Ihre Barrierefreiheits-Einstellungen. Hinter den Kulissen besteht sie aus schaltbaren „Bereichen", mit Inhalten, die jeder im Team bearbeiten kann — ohne Entwickler.

Was sich für Sie ändert

Auch wenn Sie nie darüber nachdenken, wie eine Website entsteht — ein paar Dinge sollten sich besser anfühlen:

• Ihre Sprache. Die Seite gibt es auf Deutsch, Englisch und Türkisch und wählt automatisch die passende.
• Immer aktuell. Wenn wir eine Neuigkeit oder einen Beitrag veröffentlichen, erscheint er sofort — kein Warten auf einen Rebuild.
• Schnell und leicht. Seiten laden zügig und bleiben flüssig, trotz der animierten Optik.
• Respektiert Ihre Einstellungen. Wenn Ihr Gerät Apps um reduzierte Bewegung bittet, hört unsere darauf und beruhigt die Animationen.

Warum wir neu gebaut haben

Die alte Seite funktionierte, aber sie arbeitete gegen uns. Jede neue Sprache, jeder neue Bereich und jede kleine Idee wurde zu langsamer Handarbeit. Wir wollten eine Basis, die drei Dinge ohne Umstände kann: mehrere Sprachen sprechen, sich in Sekunden ändern und schnell wirken.

	Vorher	Jetzt
Sprachen	überwiegend Deutsch	Deutsch / Englisch / Türkisch, automatisch
Bereich hinzufügen	brauchte Entwickler	per Klick eingeschaltet
Inhalte pflegen	im Code	ein einfaches Admin-Panel
Bewegung	fest	reich, und respektiert „reduzierte Bewegung"
Fundament	in die Jahre gekommen	modern und wartbar

Die große Idee: Bereiche, die man an- und abschalten kann

Stellen Sie sich die Seite als Baukasten vor — Services, Produkte, Projekte, den Blog. Jeder davon ist ein Bereich, den wir per Klick an- oder abschalten können, und die Änderung ist sofort da. Ein abgeschalteter Bereich verschwindet überall zugleich: von der Seite, aus dem Menü und aus der Suche.

flowchart TD
  A["Sie öffnen eine Seite"] --> B{"Ist dieser Bereich eingeschaltet?"}
  B -->|Ja| C["Anzeigen"]
  B -->|Nein| D["Überall ausblenden: Seite, Menü, Suche"]

Als Pseudocode — die Alltagssprache-Version der Regel — ist es einfach:

wenn eine Seite aufgerufen wird:
  wenn ihr Bereich AUS ist  →  ausblenden (Seite, Menü, Sitemap, Suche)
  sonst                     →  anzeigen

Diese eine Idee erlaubt es, mit derselben Website sehr unterschiedliche Zwecke zu bedienen, ohne sie jedes Mal neu zu bauen.

Drei Sprachen sprechen

Die Seite versucht, Ihnen Inhalte in Ihrer Sprache zu zeigen. Ist ein bestimmter Teil noch nicht übersetzt, bricht nichts und es gibt keine leere Seite — die Seite fällt elegant zurück und weist dezent darauf hin, dass sie das Original zeigt.

flowchart TD
  A["Diesen Inhalt anzeigen"] --> B{"In Ihrer Sprache verfügbar?"}
  B -->|Ja| C["Ihre Sprache anzeigen"]
  B -->|Nein| D{"Auf Deutsch verfügbar?"}
  D -->|Ja| E["Deutsch (Standard) + kleiner Hinweis"]
  D -->|Nein| F["Vorhandene Sprache + kleiner Hinweis"]

um Inhalte in Ihrer Sprache zu zeigen:
  versuche Ihre Sprache
  sonst falle auf Deutsch zurück (unser Standard)
  sonst falle auf eine vorhandene Sprache zurück
  (nie halbfertige Entwürfe zeigen)

Schnell bleiben

Inhalte liegen in einer Datenbank, die wir über ein Admin-Panel bearbeiten. Bei jedem einzelnen Besuch alles neu aus der Datenbank zu holen, wäre langsam und verschwenderisch — also hält die Seite eine kurzlebige Kopie im Speicher und ist klug damit, wann sie sie erneuert.

flowchart TD
  A["Eine Seite braucht Inhalte"] --> B{"Wie frisch ist unsere Kopie?"}
  B -->|Gerade geholt| C["Schnelle Kopie nutzen"]
  B -->|Etwas alt| D["Jetzt zeigen, im Hintergrund erneuern"]
  B -->|Datenbank-Aussetzer| E["Letzte gute Kopie weiter zeigen"]

Der letzte Punkt zählt: Hat die Datenbank einen kurzen Aussetzer, liefert die Seite die letzte gute Version weiter, statt auszufallen. Und ändert eine Redakteurin etwas, wird die Kopie sofort erneuert — Sie sehen also immer das Neueste.

Sicher bleiben

Beiträge (wie dieser) werden in einem einfachen Textformat geschrieben. Bevor etwas auf der Seite erscheint, wird es gesäubert, sodass nur sichere, gewöhnliche Formatierung übrig bleibt.

bevor geschriebene Inhalte gezeigt werden:
  normale Formatierung behalten  →  Überschriften, Listen, Links, Bilder, Tabellen, Diagramme
  Riskantes entfernen            →  Skripte, unbekannte Tags
  Bilder müssen über eine sichere (https-)Verbindung laden

Diese Regel „Bilder müssen sichere Links sein" ist der Grund, warum jedes Bild hier sicher gespeichert und über eine geschützte Verbindung geladen wird. Sie führte auch zu einer schönen neuen Erleichterung für unsere Redaktion:

Einfügen-zum-Hochladen. Unser Team kann jetzt ein Bild direkt in den Editor einfügen oder hineinziehen; es wird automatisch hochgeladen und in den Beitrag gesetzt — kein Hantieren mit Links. (Die Diagramme in diesem Beitrag entstehen aus reinem Text im selben Editor.)

Bewegung, die Sie respektiert

Die Seite hat Scroll-Animationen, eine 3D-Studio-Szene und ein paar versteckte Überraschungen. Aber Bewegung ist nicht zum Angeben da: Ist Ihr Gerät auf reduzierte Bewegung eingestellt (eine verbreitete Barrierefreiheits-Option), bemerkt das die Seite und beruhigt automatisch alles. Freude sollte nie dem Komfort im Weg stehen.

Das Studio: unser Spielplatz

/studio ist der Ort, an dem wir uns austoben — eine sprechende Figur, schwebende Punktwolken-Schrift und Shader-Szenen. Nichts davon ist nötig, aber es ist der Teil der Seite, der am meisten nach uns aussieht: die kleinen Experimente, die eine Firmenseite davor bewahren, sich wie eine Broschüre anzufühlen.

Wie es ausgeliefert wird

All das oben wird zu einem einzigen, in sich geschlossenen Paket geschnürt und läuft als eine saubere Einheit — stellen Sie sich eine versiegelte Kiste vor, die wir überall schnell und vorhersehbar ausrollen können. Langweilig im besten Sinne.

Was als Nächstes kommt

In dieser Runde fertig:

• Drei Sprachen, automatisch gewählt
• Schaltbare Bereiche, vom ganzen Team bearbeitbar
• Schnelle, robuste Inhalte mit einfachem Admin-Panel
• Einfügen-zum-Hochladen für Bilder und Diagramme in Beiträgen
• Ein echtes Leseerlebnis: Inhaltsverzeichnis, Fortschrittsbalken, Teilen

Als Nächstes:

• Suche über alle Beiträge
• Titelbilder und reichere Link-Vorschauen
• Mehr Devlogs — dies ist der erste von vielen

Eine Firmenseite ist meist eine Broschüre. Uns ist lieber, sie ist ein kleines, lebendiges Produkt — eines, das in Ihrer Sprache funktioniert, Ihnen nicht im Weg steht und sich wirklich gut liest.

Schauen Sie sich um. Und wenn Sie Lust haben, eine ungewöhnlich schnelle Tastenfolge zu tippen — vielleicht finden Sie etwas.