commit 4f9b8c2e1a8d7e3f6b5c9a0d8e7f6a5b
Author: Dominique Blake-Hofer <itsystems@blake-hofer.net>
Date:   2026-05-21 10:53:00 CEST
Subject: Refactor Core UI into Modern 3-Column Pipeline Grid (90% Width)

Executive Summary: Evolution statt Bloatware

Im modernen Webdesign für kleine und mittlere Unternehmen (KMU) herrscht ein kritischer Trend: Der massive Einsatz von visuellen Page-Buildern, verschachtelten Div-Suppen und unzähligen JavaScript-Bibliotheken, um einfache Layout-Änderungen zu erzwingen. Das Resultat im Frontend sind katastrophale Ladezeiten, mangelhafte Werte bei den Google Core Web Vitals und unnötige Sicherheitsrisiken.

Als selbstständiger Software Engineer und Linux System Engineer folge ich einem fundamental anderen Credo: KISS – Keep It Simple, Stupid. Ein Web-Interface muss wie eine gut konfigurierte Linux-Maschine laufen: performant, sicher, logisch strukturiert und kompromisslos effizient.

Mit dem jüngsten Architektur-Update wurde das Frontend von blake-hofer.net einer vollständigen Neustrukturierung unterzogen. Die Mission: Die Transformation von einem sequenziellen, einspaltigen Fluss in ein hochmodernes, vollresponsives 3-Spalten-Dashboard-Layout, das den gesamten Bildschirmplatz (optimiert auf 90% native Breite) perfekt ausnutzt. Gleichzeitig wurden tiefgreifende technische Konsolidierungen – wie die vollständige Deprovisionierung veralteter Subdomain-Strukturen (blog.blake-hofer.net) – durchgeführt, um das Gesamtsystem auf einer einzigen Core-Instanz zu bündeln.

Dieser Artikel dient als technologisches Konzept und zeigt im Detail auf, welche optischen und strukturellen Modifikationen vorgenommen wurden und warum diese saubere Core-Architektur die ideale Blaupause für anspruchsvolle Unternehmens-Webseiten im B2B-Bereich darstellt.

1. Das Optische Redesign: Ein dreiteiliges Daten-Cockpit

Das neue Design bricht mit der klassischen, eindimensionalen Scroll-Logik starrer Webseiten und etabliert ein dreiteiliges Dashboard, das die Breite des Browsers optimal ausnutzt. Das visuelle Farbschema setzt dabei konsequent auf die etablierten Werte deiner Corporate Identity: Ein tiefer, satter Moosgrün-Ton (--moss-dark: #606c38) fungiert als primärer Anker, während ein energetisches, leuchtendes Hellgrün (--moss-bright: #84cc16) für präzise, unübersehbare Akzente sorgt.

+---------------------------------------------------------------------------------+
|                                  HEADER (90% Width)                             |
+---------------------------------------------------------------------------------+
| LEFT COLUMN (30%)     | MIDDLE COLUMN (45%)            | RIGHT COLUMN (25%)     |
|                       |                                |                        |
| High-End Web          | Core Services Grid (2x2)       | /etc/profile/about     |
| Engineering           | [Plugins]     [Themes]         |                        |
| & Integration         | [Customizing] [Hosting]        | /usr/bin/services      |
|                       |                                |                        |
|                       |--------------------------------| /dev/playstore_apps    |
| (Dynamischer Text aus | Split-Zone (50% / 50%)         |                        |
| service-texts.php)    | [Latest Logs] | [Deployments]  |                        |
+---------------------------------------------------------------------------------+
|                                  FOOTER (90% Width)                             |
+---------------------------------------------------------------------------------+

Die Architektur der drei Säulen im Detail:

A. Die linke Spalte (Die Core-Kachel)

Diese Spalte ist als permanenter, visuell dominanter weißer Kachel-Balken konzipiert. Sie dient als statischer Anker und enthält das technologische Fundament: Das übergeordnete Statement High-End Web Engineering & Integration. KMU-Kunden finden hier ohne langes Suchen sofort die harten Fakten zu Projekt-Konditionen, Stundensätzen und der Entwicklungsphilosophie, direkt injiziert aus dem CMS-Core.

B. Die mittlere Spalte (Die Impact- & Fokus-Zone)

Das Zentrum des Dashboards besteht aus einem hochflexiblen Grid, das die vier strategischen Business-Säulen abbildet: WordPress PlugIns, WordPress Themes, WordPress Customizing & Security sowie Managed Web Hosting. Jede dieser vier Kacheln verfügt über ein unsichtbares, hochentwickeltes Inline-Akkordeon. Klickt der Nutzer auf [ Details anzeigen ], entfaltet sich der Text fließend direkt innerhalb der jeweiligen Karte, anstatt das Layout zu zerreißen.

C. Die rechte Spalte (Ecosystem & System-Konfiguration)

Hier schließt sich der Kreis zur administrativen Ästhetik. Neben einer eleganten About me-Sektion, die dein Profil als Software und Linux Engineer schärft, liefert diese Spalte den direkten Zugriff auf die Navigation (/usr/bin/services) und listet die nativen, im Google Play Store publizierten Android-Applikationen auf (/dev/playstore_apps), inklusive dem neuesten Spiele-Projekt AXIS SHIFT: Neon Grid.

2. Technische Deep-Dives: Die Core-Optimierungen

Parallel zur optischen Transformation wurde der Unterbau radikal auf Performance und sauberes Routing getrimmt, um unnötige Server-Abfragen zu verhindern.

Eliminierung von Subdomain-Altlasten & Konsolidierung

Bisher lief der Tech-Blog über eine separate Subdomain (blog.blake-hofer.net), gesteuert durch komplexe Filter-Arrays im Server-Header. Da diese Subdomain deprovisioniert wurde, mussten sämtliche Weichen im Core umgeschrieben werden. Wenn die Domain bald vollständig gelöscht wird, führt ein einfacher Link auf /blog ins Leere.

Die Lösung wurde auf Server-Ebene über ein Query-Parameter-Mapping realisiert. Der Blog-Link leitet nun intern auf home_url('/?index=blog') um. In der zentralen Steuerungsdatei (functions.php) horcht ein hochpriorisierter Hook auf diesen Parameter, fängt den Request ab, injiziert die CMS-Core-Abhängigkeiten und rendert das hochoptimierte Blog-Archiv (template-blog.php) direkt auf der Hauptdomain – voll integriert mit dem nativen Header und Footer. Reste alter Subdomain-Skripte wurden restlos deprovisioniert, um Sicherheitsrisiken zu minimieren.

UX-Korrektur: Das Inline-Akkordeon-Wachstum

Ein massives Problem bei herkömmlichen Standard-Skripten: Klappen Karten innerhalb eines CSS-Grids auf, bleibt die Kachelgröße oft starr, der Text bricht unschön aus oder die Kacheln der Nachbarspalten verzerren sich asymmetrisch.

Im neuen Dashboard-Code wird dies durch eine dynamische JavaScript-Kombination gelöst: Sobald ein User ein Detail-Akkordeon triggert, berechnet das Skript die exakte Pixelhöhe des einzublendenden Textes in Echtzeit und öffnet den Container fließend. Gleichzeitig wird der übergeordneten Kachel auf Desktop-Systemen temporär eine spezifische Erweiterungsklasse injiziert. Dadurch dehnt sich die aktive Karte elegant über beide Spalten des mittleren Grids aus, während die restlichen Kacheln sauber nach unten nachrücken.

3. Architektur-Showcase: Logischer Ablauf der Datenverarbeitung

Um potenziellen KMU-Kunden die Professionalität des Systems zu demonstrieren, ohne proprietäre Algorithmen oder geschützte Codezeilen offenzulegen, lässt sich die Datenverarbeitung perfekt als logische Pipeline visualisieren. Das Zusammenspiel zwischen Frontend-Interaktion, WordPress-Core und externen Schnittstellen (wie der Terminbuchung oder der Stripe-Zahlungsabwicklung) folgt einer strikten, fehlerresistenten Struktur.

Die Request- & Routing-Pipeline

Wenn ein Client eine Anfrage an den Server stellt, durchläuft der Request eine optimierte Sicherheits- und Routing-Schleife, bevor überhaupt Datenbank-Ressourcen belastet werden:

[ Eingehender User-Request auf blake-hofer.net ]
                       |
                       v
    [ Sektion: Bot- & Spam-Schutz-Validierung ] 
    (Tarn-Honeypots prüfen IP & verborgene Felder) -> [ Bot erkannt? ] -> (Abbruch: 403 Forbidden)
                       |
                       v
         [ Sektion: Query-Parameter-Parser ]
    (Prüfung auf Sonderparameter wie ?index=blog)
                       |
                       +---> [ Parameter aktiv? ] -> (Injektiere template-blog.php & lade Core-Hooks)
                       |
                       +---> [ Kein Parameter? ]  -> (Rendere company-home.php im 3-Spalten-Grid)

Die interaktive Inline-Accordion-Steuerung (DOM-Manipulation)

Um ein absolut flüssiges Nutzererlebnis (60 FPS Animationen) ohne das Laden von schweren externen Frameworks wie jQuery zu garantieren, läuft die Akkordeon-Mechanik vollständig über natives, ressourcenschonendes JavaScript ab:

[ Klick auf Button "Details anzeigen" ]
                       |
                       v
[ Ermittle ID des Ziel-Containers & der Eltern-Kachel ]
                       |
                       v
[ Schleife: Schließe alle anderen aktiven Kacheln im Grid ]
(Verhindert visuelle Überlagerungen und Layout-Verschiebungen)
                       |
                       v
[ Berechne exakte scrollHeight des versteckten Textes in Pixeln ]
                       |
                       v
[ Injiziere max-height Wert & CSS-Erweiterungsklasse im DOM ]
                       |
                       v
[ CSS-Transition startet: Kachel wächst fließend auf Desktop-Systemen zweispaltig ]
                       |
                       v
[ Nach Ablauf der Animation (600ms): Setze max-height auf "none" ]
(Garantiert absolute Flexibilität, falls dynamische iFrames nachgeladen werden)

Die Konversion- & Buchungs-Pipeline (CTA-Infrastruktur)

Die Integration von externen Diensten (wie dem Google Calendar Appointment Schedule für die Online-Terminbuchung) wurde so gelöst, dass sie die Performance der Seite im initialen Zustand mit absolut null Millisekunden verzögert:

[ Initialer Seitenaufruf ] -> (Google-Calendar iFrame ist vollständig deprovisioniert / nicht im DOM)
                                                   |
                                                   v
                               [ Klick auf Button "Termin online buchen" ]
                                                   |
                                                   v
                               [ Triggere cta_calendar_expansion ]
                                                   |
                                                   v
                         [ Aktivierung des Containers & fließendes Aufklappen ]
                                                   |
                                                   v
                       [ iFrame lädt asynchron nach erfolgreicher UI-Transition ]
                       (Maximale PageSpeed-Punkte, da kein blockierendes Laden beim First Paint)

4. Fazit für KMU: Warum maßgeschneiderter Code gewinnt

Dieses Redesign-Beispiel demonstriert eindrucksvoll den unschätzbaren Vorteil von nativem Code gegenüber unoptimierten Standard-Systemen. Während Standard-Themes und visuelle Page-Builder bei komplexen Grids und dynamischen Verschachtelungen anfangen, hunderte Zeilen ungenutztes CSS und träge Skripte zu laden, erledigt diese maßgeschneiderte Lösung alles über natives CSS Grid und pures Vanilla JS.

Das Ergebnis für den Endkunden und KMU-Projekte spricht eine klare Sprache:

Brachiale Performance: Keine Render-Blocking-Scripts, die das Laden auf mobilen Endgeräten unnötig verzögern. Die Core Web Vitals verbleiben dauerhaft im tiefgrünen Bereich.
Höchste Conversion-Rates: Die Optionsträger für Kontaktformulare und die Google Calendar-Terminbuchung sind performant versteckt und belasten die Ladezeit erst, wenn der Kunde echtes Interesse zeigt und den Button aktiv anklickt.
Kompromisslose Sicherheit: Durch den konsequenten Verzicht auf drittherstellerabhängige Visual Builder oder überflüssige Plugins bleibt der Code über Jahre hinweg updatefähig, wartungsarm und extrem resistent gegen automatisierte Angreifer-Bots.

Wenn Sie Ihre digitale Infrastruktur und Ihre Web-Projekte ebenfalls auf dieses Performance- und Sicherheits-Level heben möchten, ohne sich mit trägem Overhead abzufinden: Initialisieren Sie Ihr nächstes Projekt direkt über die untenstehende Schnittstelle.

System Log: Die neue Dashboard-Architektur von blake-hofer.net