# Obeco GmbH – Webseite Redesign **Projektdauer:** Mai – Juni 2026 **Live seit:** 17. Juni 2026 **URL:** https://www.obeco.de --- ## Was wurde gemacht? Die Webseite der Obeco GmbH wurde von Grund auf neu gestaltet. Ziel war ein modernes, übersichtliches Erscheinungsbild, das die Leistungen klar kommuniziert und auf allen Geräten gut aussieht. --- ## Ergebnis auf einen Blick | Bereich | Vorher | Nachher | |---|---|---| | Design | Veraltetes Layout | Modernes Petrol-Farbschema | | Navigation | Statische Links | Dropdown-Menü + mobiles Hamburger-Menü | | Startseite | Text-Liste | Interaktive SVG-Kacheln mit Direktlinks | | Blog | Externer Blogspot | Integriert unter obeco.de/blog.html | | Footer | Kein Logo | Obeco-Logo + Impressum/Datenschutz | | Kontakt | Nur Text | Foto + Kontaktdaten mit Icons | --- ## Neue Gestaltung ### Farbschema Durchgängiges Petrol-Design: - Navigation & Buttons: `#0d6e6e` - Überschriften & Footer-Hintergrund: `#0d4f4f` - Seitenhintergrund: `#f7fafa` (helles Mintgrau) - Kartenrahmen: `#b2d8d8` ### Startseite - Vier klickbare Leistungskacheln als SVG-Grafik (System Automation, Policom, IT-Datenschutz, Bild + Ton) - Jede Kachel führt direkt zur zugehörigen Unterseite - Responsive: funktioniert auf Desktop und Smartphone ### Navigation - Dropdown-Menü für Leistungen - Mobiles Hamburger-Menü (kein JavaScript-Framework, reines Vanilla JS) - „Kontakt"-Button farblich hervorgehoben - Blog-Link in der Hauptnavigation auf allen Seiten ### Unterseiten Alle 13 Unterseiten wurden vereinheitlicht: - Einheitlicher Seitenbanner (Petrol) mit „← Startseite"-Link - Footer mit Obeco-Logo auf jeder Seite - Konsistente Typografie und Abstände ### Kontaktseite - Profilfoto von Joachim Berger (rund, 120×120 px) - Kontaktdaten mit Icons (Telefon, E-Mail, Adresse, VCF-Download) ### Logo - Logo neu eingefärbt in Petrol (`#0d6e6e`) - Separates Footer-Logo (weiß, transparenter Hintergrund) --- ## Blog – „Aus der Praxis" Der frühere externe Blogspot-Blog wurde vollständig in die Webseite integriert. ### Wie es funktioniert 1. **Redaktionssystem:** Ghost CMS läuft lokal auf einem Heimserver (LXC 108) 2. **Schreiben:** Posts werden im Ghost-Backend geschrieben (http://192.168.2.196:2368/ghost/) 3. **Export:** Ghost exportiert die Inhalte, ein Script wandelt sie ins Obeco-Design um 4. **Veröffentlichen:** Fertige HTML-Dateien werden per FTP zu Host Europe hochgeladen ### Was live ist - **blog.html** – Übersichtsseite mit 82 Posts als Kacheln (3-spaltig) - **blog/** – Ordner mit den 5 neuesten Posts als vollständige Artikel - Die alte Blogspot-URL (`obeco-policom-weblog.html`) leitet automatisch auf `blog.html` weiter --- ## Technische Umsetzung | Was | Womit | |---|---| | HTML/CSS | Statische Dateien, kein CMS für die Hauptseite | | Icons | Tabler Icons (CDN) | | Logo-Bearbeitung | ImageMagick 7.1 | | FTP-Upload | WinSCP | | Blog-Redaktion | Ghost CMS 6.45 (lokal, LXC 108) | | Hosting | Host Europe (unverändert) | --- ## Noch offen - [ ] Ghost-Footer bereinigen (Zeilen „Sign up" und „Erstellt mit Ghost" ausblenden) - [ ] Blog-Workflow automatisieren (neuer Post → automatischer Upload) - [ ] Datenschutzerklärung auf DSGVO-Aktualität prüfen - [ ] Demo-Musik, PDFs und Visitenkartendatei auf Server prüfen - [ ] Canonical-Tag auf Startseite ergänzen - [ ] Open Graph / Social Media Meta-Tags hinzufügen - [ ] sitemap.xml und robots.txt überarbeiten --- ## Dateien & Pfade | Datei | Beschreibung | |---|---| | `C:\Daten\RedesignObeco\` | Lokales Projektverzeichnis (alle Webseiten-Dateien) | | `C:\Daten\RedesignObeco\PROJEKT-STATUS.md` | Technische Detaildokumentation | | `C:\MoniBase\Anwendungen\Blog-Redesign\PROJEKT.md` | Blog-Projektdokumentation | | `O:\Obeco\VORLAGEN\Logo 2013\` | Logo-Quelldateien | --- *Zuletzt aktualisiert: 2026-06-17*