10 Juli Umfangreicher Relaunch einer Kanzlei Website
Für einen unserer ersten Kunden, die seit 2004 betreute Heidelberger KANZLEI DR. ERBEN, wurde die seit 2011 unveränderte Typo3-Website komplett überarbeitet.
Die neue Website wurde neu aufgesetzt und in dem Content-Management-System WordPress realisiert, damit die Kanzlei in Zukunft über eine übersichtliche Benutzeroberfläche die Inhalte besser verwalten und aktualisieren kann.
Grundlage der neuen Website bilden die durch realkonzept entwickelten (und über die Jahre optimierten), prägnanten Corporate Design-Elemente Logo, Typgrafie und Farben. Im Kopf der Website stellt das Logo einen hohen Wiedererkennungswert über alle Seiten dar: Dieses ist eine abstrakte Umsetzung der das Heidelberger Stadtbild prägende, am Neckar gelegenen Stadtvilla. Darunter befindet sich das Hauptmenü sowie ein individueller Spruch bzw. ein Zitat. Dieses unterscheidet sich auf allen Unterseiten und macht neugierig auf die Inhalte.
Das Dunkelblau als Grundton der Hausfarbe sowie ein warmer Gelbton als Akzentuierungsfarbe fungieren als visuelle Leitelemente durch die Website und tragen mittels reduzierten Einsatzes zu einer hohen Nutzerfreundlichkeit bei.
Die Website wurde sowohl in deutscher wie auch englischer Sprache umgesetzt und richtet sich an die international ansässigen Mandanten aus der Automobilindustrie.
Die neue Navigation auf der Website
Top-Header: Sprachwahl und Suchfunktion Header:
Hauptseiten – 7 Hauptrubriken: klare Untergliederung der Themen – „Expertise“ und „Über uns“ beinhalten weitere Unterseiten
- Unterseiten (auch über Dropdown-Menü abrufbar) – Unter „Expertise“ befinden sich die Tätigkeitsbereiche mit weniger Unterseiten als bisher – Diese Unterseiten gliedern die Themen eindeutig – „Über uns“ beinhaltet sowohl die Anwälte mit deren CV wie auch die Inhalte der bisherigen Karriere-Seite – Unter „Philosophie“ werden Anspruch und Werte auf den Punkt gebracht, die bisherige Seite wird überarbeitet – „Neuigkeiten“ beinhaltet alle bisherigen Beiträge – in Kategorien eingeteilt und mit einem Archiv der älteren Events/News
- Meta-Menü (Fußbereich) – die Links zum Impressum/Datenschutz werden laut Webstandard im Fußbereich der Website angeordnet – hier erwartet der Websitebesucher diese Verlinkungen und das Hauptmenü wird zugleich schlank gehalten
Farbklima und Typografie
Der Website-Hintergrund durch ein Wechselspiel von grauen und weißen Flächen bestimmt, der für eine optimale Lesbarkeit sorgt und zugleich die Hausfarben und Bilder zur Geltung bringt.
Auf der Einstiegseite (HOME) dienen Sektionen mit grauem Hintergrund und Grafiken in den Hausfarben Dunkelblau/Gelb zum einen zur inhaltlichen und visuellen Trennung der größeren Textblöcke, zum anderen zur Auflockerung und Lenkung des Blicks durch deutliche Kontraste.
Die Hausfarben werden in konsequenter Weise laut Corporate Design-Definition eingesetzt: In Dunkelblau erscheinen in erster Linie die Überschriften. In Gelb werden grafische Akzenturierungselemente (z.B. Trennbalken) sowie Links in Gestalt interaktiver Elemente/Buttons gesetzt.
Für die Hausschrift wurde ein neuer Webfont gewählt, welcher gut lesbar ist: als Bold-Variante kommt dieser für Überschriften zum Einsatz, als leichte Regular-Variante für den Fließtext. Auszeichnungen werden in Bold gesetzt.
Startseite/Home (Ausschnitt: Seitenbeginn)
- KOPFBEREICH – Top-Header: Claim im Kopf angeordnet, rechts Sprachwahl und Suche – Header: KDE-Logo in high-Resolution (für Retina-Bildschirme optimiert) – rechts: Tel-Nr. und Mail-Adresse – Hauptmenü mit Dropdown – Vorschläge zur Unterteilung siehe Seite 1 – rechts: Social Media-Links – Drop-Down-Menü auf mobilen Endgeräten nach Klick auf das Menü-Icon ( = 3 horizontale Balken)
- KEYVISUAL MIT CLAIM – Es wird vorgeschlagen, die bisherigen Claims und Bilder für alle Haupt-Seiten zu übernehmen – Auf den Unterseiten erscheint hier der Seitentitel mit Breadcrumb-Navigation (siehe Seite 6)
- WILLKOMMENSTEXT – Unterhalb des Kopfbereichs wird der Willkommenstext zentriert dargestellt – Schriften und Farben laut Vorschlag und Erläuterungen (siehe oben)
Aufbau der Unterseiten am Beispiel „IT-Recht“
KOPFBEREICH (HEADER)
Im Kopfbereich der Unterseiten der zweiten Kategorie (d.h. alle Seiten, die nicht über das Hauptmenü direkt anwählbar sind) erscheint der jew. Seitentitel mit einer „Breadcrumb“-Navigation (hier: Home / Expertise / IT-Recht). Somit wird jederzeit ersichtlich, in welcher Tiefe der Website sich der Nutzer befindet und dieser kann einfach eine oder mehrere Seiten zurückspringen.
Dabei erscheint im Header der Unterseiten der zweiten Kategorie kein weiteres Bild, sondern dieses wird im Content zu Beginn angeordnet.
SEITENINHALT (CONTENT)
Laut Optimierungsvorschlag zur Navigationstiefe auf Seite 1 wird empfohlen, dass mehrere thematisch ähnliche Bereiche auf einer Seite zusammengefasst werden und durch Scrollen von oben nach unten (mittel deutlicher optischer Trennung) abzurufen sind.
Eine Zusammenlegung macht weiterhin Sinn bei Inhalten, die ansonsten auf einer eigenen Seite eher wenig Platz und somit auch keine lange Ladezeit in Anspruch nehmen.
Solch eine Zusammenlegung entspricht dem aktuellen Nutzerverhalten insbesondere auf den mobilen Endgeräten (Tablets, Smartphones). Der Nutzer möchte weniger auf viele einzelne Seiten-Links klicken, sondern eher durch eine Seite schneller hindurchscrollen, um an die gewünschten Informationen zu gelangen.
Weitergehende Informationen können bei Bedarf über einen Klick auf augenfällige Icons („+“) aufgerufen werden – diese bleiben in der Standard-Ansicht zunächst versteckt und stören somit nicht beim Scrollen durch den Seiteninhalt.
SEITENLEISTE (SIDEBAR)
Die Seitenleiste erscheint auf allen Unterseiten am rechten Rand und beinhaltet die relevanten Links und Informationen. Dabei werden neben einer augenfälligen Suchfunktion die wichtigsten Links im Bereich Expertise als kleines Menü dargestellt und sind somit schnell abzurufen. Auf Wunsch lässt sich hier ein Kontaktformular zur unkomplizierten Kontaktaufnahme zur Kanzlei integrieren. Zudem können wir auch die aktuellen Nachrichten in einer Überblick noch einmal präsentiert werden, wie auch ein Beitragsarchiv. Den Abschluss jeder Unterseite bildet der Fußbereich (Footer), welcher die relevanten Informationen vergleichbar der Startseite beinhaltet.