Projektbeispiel · G&F Facility GmbH
Vier Seitenpaare zeigen, wie sich der Auftritt der G&F Facility GmbH von der alten WordPress-Website zur neu entwickelten HTML-Website verändert hat.
Zur ReferenzübersichtAusgangslage und Ergebnis
Die frühere Website von 2019 beruhte auf WordPress. Für den Relaunch habe ich die Leistungen, Texte und Seitenführung neu geordnet und die Website individuell als HTML-Seiten aufgebaut.
Bei den Vergleichsmessungen war die Ladezeit der neuen Startseite im Mittel rund 90 % kürzer.
Auf der alten Startseite standen ein Brückenmotiv und allgemeine Aussagen im Vordergrund. Der neue Einstieg zeigt direkt den Bezug zur Immobilienbetreuung und führt zu den Leistungen oder zur Anfrage.
Auch die weiteren Seiten folgen einer klareren Struktur: Die Leistungsübersicht macht die einzelnen Angebote schneller auffindbar, die beispielhafte Leistungsunterseite zur Gartenpflege erklärt konkrete Arbeiten und die Kontaktseite bündelt die wichtigsten Wege zur G&F Facility GmbH.
Besonderes Augenmerk galt der mobilen Nutzung. Navigation, Inhalte und Kontaktwege sollen auch auf kleinen Bildschirmen gut bedienbar bleiben. Der Regler zeigt einen größeren Ausschnitt beider Startseiten; darunter lassen sich vier Seitenpaare in voller Länge vergleichen.
01 · Startseite
Früher prägten ein Brückenmotiv und kurze Qualitätsversprechen den ersten Eindruck. Die neue Startseite zeigt direkt den Bezug zur Immobilienbetreuung und führt zur Anfrage oder zu den Leistungen. Darunter folgen Dienstleistungsbereiche, das Unternehmen und ein kurzer Ablauf.
Vollständigen Screenshot ansehen
Vollständigen Screenshot ansehen
02 · Leistungsübersicht
Die alte Übersicht zeigte die Dienstleistungen in kompakten Kästen. Die neue Seite bietet zuerst Sprunglinks zur gesuchten Leistung. Jeder Bereich erhält danach ein Bild, eine Erklärung, Vorteile und einen Link zur Detailseite.
Vollständigen Screenshot ansehen
Vollständigen Screenshot ansehen
03 · Leistungsunterseite
Die neuen Leistungsunterseiten erklären gleich zu Beginn, worum es bei der jeweiligen Dienstleistung geht. Danach folgen klar getrennte Informationen zu den Arbeiten und ihren Vorteilen. Links zur Anfrage und zur Leistungsübersicht erleichtern den nächsten Schritt.
Vollständigen Screenshot ansehen
Vollständigen Screenshot ansehen
04 · Kontakt
Auf der alten Seite waren Kontaktdaten, Karte und Formular weit verteilt. Die neue Kontaktseite bündelt Adresse, Telefon, E-Mail, Formular, Standort und Notdienst. Die Standortkarte erscheint zunächst als Bild; Google Maps öffnet sich erst nach einem Klick auf den Routenlink.
Vollständigen Screenshot ansehen
Vollständigen Screenshot ansehen
Was sich außerdem verändert hat
Die Inhalte wurden neu geordnet und die einzelnen Leistungen genauer beschrieben. Klare Überschriften und kurze Abschnitte helfen dabei, passende Informationen ohne langes Suchen zu finden. Von der Übersicht führen erkennbare Links zu den jeweiligen Leistungsunterseiten. Dort sind auch die nächsten Schritte und Wege zur Anfrage sichtbar, sodass Besuchende sich leichter orientieren können.
Barrierefreiheit wurde von Anfang an berücksichtigt: mit sichtbaren Fokusmarkierungen, einem Sprunglink zum Inhalt, beschrifteten Formularfeldern, Alternativtexten und Rücksicht auf reduzierte Bewegung. Besonderes Augenmerk galt der mobilen Ansicht, damit Navigation, Inhalte und Kontaktwege auch auf kleinen Bildschirmen gut funktionieren.
Die Bilder liegen im WebP-Format vor. Je nach Bildschirmgröße lädt der Browser eine passend große Bilddatei. So müssen kleine Geräte keine unnötig großen Bilder laden. Die Website lädt keine externen Dienste nach und kommt deshalb ohne Cookie-Banner aus.
Ich schaue mir Ausgangslage, Inhalte und Ziele an und bespreche mit Ihnen einen passenden nächsten Schritt.
