Darstellung der Kompetenzen und schönsten Projekte auf der Startseite
Die Startseite haben wir in einem dreispaltiges Raster angelegt, das Projektbilder mit Kompetenz-Kacheln kombiniert; jede Kachel verlinkt direkt auf die zugehörige Detailseite. Der Header mit Hauptmenü und ein reduzierter HTML-Footer wurden als globale Elemente umgesetzt. Divi haben wir dabei nicht als Baukasten, sondern als Plattform für eine vollständig individuelle Website-Entwicklung eingesetzt.
Startseite mit dreispaltigem Raster aus Projektbildern und Kompetenz-Kacheln
Invertierte Überschriften geben der Website einen authentischen Look mit WIedererkennungswert
Typografie, Farben und responsives Logo
Die Schriftart Carlito haben wir lokal eingebunden, sodass keine externen Schriftserver angefragt werden. Die Überschriften erhielten eine invertierte Darstellung – weiß auf schwarz, die oberste Ebene zusätzlich in Versalien. Als Projektfarben haben wir Grün (#bbb891), Beige (#f2ebdd) und Braun (#d2bd9e) hinterlegt und konsistent über alle Seitentypen angewendet.
Das Logo wird im Kopfbereich zunächst als Kombination aus Signet und Wortmarke ausgespielt und reduziert sich beim Scrollen auf das Signet. Für den Browser-Tab haben wir ein separates Favicon mit beigem Hintergrund eingebunden. Die Umsetzung folgt den Prinzipien einer durchdachten Konzeption und eines responsiven Webdesigns.
Projektübersicht und Werkliste
Zur Darstellung der Referenzen haben wir den Inhaltstyp “Projekte” verwendet. Jede Referenz haben wir als eigenständigen Inhalt angelegt, der über eine eigene URL erreichbar ist. Damit alle Projekte in einem einheitlichen Look präsentiert werden haben wir ein zentrales Layout erstellt und folgendermaßen aufgebaut: Darstellung Projektbild (groß), gefolgt von Galerie und zuletzt einem Steckbrief mit dem wichtigsten Eckdaten.
Zusätzlich haben wir eine Werkliste als strukturierte HTML-Tabelle umgesetzt, die alle Projekte mit ihren Eckdaten auflistet; eine darunterliegende Legende erläutert die Einträge. Diese strukturierte Aufbereitung der Inhalte ist Teil unserer Arbeit an Unternehmenswebsites mit klarer Struktur.
Alle Bereiche und Elemente auf der Website wurden so aufbereitet, dass Screenreader sie eindeutig erkennen und in korrekter Reihenfolge vorlesen können
Für Screenreader optimierte Überschriften-Struktur auf der Werkliste
Barrierefreiheit: Überschriften-Struktur und Screenreader
Zur Verbesserung der Barrierefreiheit haben wir die Überschriften-Ebenen stufenweise und semantisch korrekt aufgebaut. Dafür haben wir eine zusätzliche Überschriften-Variante ergänzt, die optisch wie normaler Text wirkt, technisch aber als korrekt eingestufte Überschrift ausgezeichnet ist, und sie an den Stellen eingesetzt, an denen zuvor eine zu tiefe Ebene stand.
Auf der Werkliste haben wir über eine eigene CSS-Klasse eine Überschrift hinterlegt, die ausschließlich von Screenreadern erfasst, im sichtbaren Layout aber nicht angezeigt wird. Schriftgrößen und Kontraste haben wir per CSS angepasst. Mit dem Angebot Barrierefreiheit verbessern setzen wir solche Anforderungen strukturell um – passend zu den seit 2025 zunehmenden gesetzlichen Vorgaben.
Migration, DSGVO und Go-Live
Zum Go-Live haben wir die Website auf einen externen Server (ArtFiles) umgezogen und unter der finalen Adresse live geschaltet – so läuft der Auftritt von Beginn an in einer stabilen, professionell gehosteten Umgebung. Der E-Mail-Versand des Kontaktformulars erfolgt zuverlässig über SMTP.
Die Inbetriebnahme erfolgte datenschutzkonform: Eine DSGVO-konforme Cookie-Lösung (Cookie First) sorgt für rechtliche Sicherheit, ohne dass sich der Kunde um die technischen Details kümmern muss. Zudem haben wir die nötigen Schritte unternommen, damit die neue Website schnell bei Google indexiert wird dort und eine gute Auffindbarkeit erhält.
