. segert.net weblog . » Kleine Geschichte eines Redesigns

In meinem letzten Praxisbericht namens Individuelle Website für einen Einzelhändler erwähnte ich die Bedeutung von authentischen Fotos für die Wirkung einer Website. Die folgende hier vorgestellte Arbeit für die Kanzlei Brinkmann, Dewert & Partner GbR aus Essen lebt zwar auch von Fotos, hier hat aber der damals vorhandene Schriftzug der Gestaltung seinen Stempel aufgedrückt. In diesem Bericht geht es aber nicht nur um das Logo und das Layout, sondern auch um das Coding im Sinne der Webstandards und die Integration von WordPress.

Vorgeschichte

Ende 2002 sind wir mit einem Sonderangebot dem Vorurteil begegnet, dass wir unglaublich teuer seien. Das hat Heinz Klein aus der Kanzlei Brinkmann, Dewert & Partner GbR, der auch ein Fan des Kritletters war, auf die Idee gebracht, uns nach einem Angebot zu fragen. Wir kamen sehr schnell ins Geschäft und gut zwei Monate später war die neue Website im Netz.

Das Typo-Signet

Webdesigner kennen wohl das Problem, dass sie mit Logos zu tun haben, die schwer in bildschirmgerechte Layouts zu integrieren sind. Meistens gibt es proportionale Missverhältnisse oder zuviele Elemente, die in kleiner Variante auf dem Bildschirm ausfransen oder untergehen. Nicht selten steht das Logo nicht einmal digitalisiert oder nur als minderwertiges JPEG zur Verfügung. Zentral für ein gelungenes Webdesign ist aber meiner Meinung nach, dass das Logo harmonisch ins Layout integriert wird. So sollte das Logo das Layout und das zu entwickelnde grafische Erscheinungsbild mitbestimmen, wenn es nicht wie ein Fremdkörper wirken soll.

Wenn der Kunde offen ist, könnte man Nachbau und Modifizierungen anbieten. In unserem Fall bestand das Logo aus einem Schriftzug in der Schrift “Times”. Wie man sich denken kann, war der Nachbau kein großes Unterfangen. Wir haben aber eine andere Schriftart (Venetian) gewählt und den Schriftzug zudem in Kapitälchen gesetzt, die wir manuell skaliert haben. Um das Ausfransen der feinen Kurven durch Anti-Aliasing zu entschärfen, haben wir einen leichten Schatten hinzugefügt. Das Ergebnis sieht vertrauenswürdig aus und war zudem printkompatibel. Letzteres ist übrigens manchmal ein gutes Argument für den Kunden, sich auf Nachbau, Aufwertung oder Modifizierung des Logos einzulassen und moderate Mehrkosten zu tragen.

Das alte Layout und die Portraits

Um nun das seriös wirkende Typo-Signet im Layout zu betonen und einen gebührenden Platz zu finden, hatten wir die Idee mit dem schwarzen Balken (der dann zur Freude des Kunden zum Bestandteil des Logos wurde) und einem feinen Strich als Fortführung desselben. Beides begrenzt in einfachster Weise oben und unten den Inhalt. Gepaart mit einem leichten Grau als Hintergrund für den Content (zur weiteren Betonung und Abgrenzung des Kopfes und des Footers vom Inhalt) schien damit ein rundes Layout geschaffen.

Um die Individualität der Website weiter zu betonen, haben wir Portraits der Anwälte erstellt, die konsequent in schwarz/weiss sein sollten. Das war eine Herausforderung erhöhten Grades. Bewußt ohne Blitz und mit analoger Kamera sind wir von einem Büro zum anderen gewandert und hatten für jeden Anwalt (von 10) um die 5 bis 10 Minuten Zeit. Mit einer Ausnahme gab es zufriedenstellende Ergebnisse, die wir auch dadurch erreichten, dass Verena ab und zu eines der Opfer in ein Gespräch verwickelte, das für Lockerheit sorgte. ;-)

Das Ergebnis unserer damaligen Arbeit kam beim Kunden insgesamt sehr gut an, auch wenn im Nachhinein die Icon-Navigation, die mit Hilfe von Javascript erläutert wurde, nicht gerade benutzerfreundlich war, was später durch Feedback von Besuchern bestätigt wurde. Die Team-Seite zum Beispiel sah vor drei Jahren wie folgt aus:

Damit die Website auch mit einer gewissen Aktualität aufwarten konnte, hatten wir die Idee einer Linkvorstellung auf der Startseite, die Silvan Rehberger für den Kunden auf PHP-Basis mit Archiv-Funktion entwickelte. Silvan hat übrigens für das aktuelle Redesign die über 1200 Linkbesprechungen perfekt in WordPress importiert, denn die neue Startseite der Kanzlei basiert auf WordPress, was man ihr wohl nicht ansieht.

Rechtfertigung des Redesigns

Wenn eine Website auf HTML-Tabellen beruht und kein maschinenfreundliches Markup hat, wäre das für ein Redesign bereits Rechtfertigung genug. Hinzu kamen aber auch Schwächen des Hauptmenüs, die ich oben bereits erwähnte. Desweiteren war uns die Brotschrift mittlerweile zu klein gesetzt. Auch die Auflistung der zahlreichen Link-Kategorien wie auch die Präsentation von Suche und RSS-Feed schienen uns verbesserungswürdig. Desweiteren gab es hier und dort Schwächen in der Navigation. So war zum Beispiel der Weg zur Wegbeschreibung über das Impressum zu lang.

Die Hauptnavigation

Den entscheidenden Tipp der recht großflächigen Buttons gab uns der Kunde selbst, also unser Ansprechpartner Heinz Klein, der unsere Arbeit mit konstruktiver Kritik und einem unbestechlichen Auge zu begleiten wusste. Nachdem er meinen ersten Entwurf in Photoshop gesehen hatte, wies er mich auf eine Navigation hin, die wir vor zwei Jahren für sopic.com umgesetzt hatten und die ihm sehr gut gefiel. Das wiederrum brachte uns auf die Idee, mit großen Schaltflächen zu arbeiten, die per se besonders orientierungsfreundlich sind und direkt auf die Inhaltsbereiche der Website hinweisen.

Beim Experimentieren mit CSS-Buttons und Hintergrundverläufen kam uns die Idee, den schwarzen Balken des Logos in die Navigation zu integrieren und so für ein wenig Bewegung beim Darüberfahren mit der Maus zu sorgen. Gleichzeitig ergab sich daraus die Idee für die Buttons im aktiven Zustand. Wenn man will, kann man das auch als ein dezentes spielerisches Variieren des Corporate Designs der Kanzlei betrachten, wenn Corporate Design nicht ein zu großes Wort dafür wäre.

Das Coding

Beim Aufbau der CSS-Datei und des Markups haben wir konzentriert darauf geachtet, im Sinne der Webstandards zu arbeiten. Im Markup sind konsequent alle Menüs in Listen gesetzt, aber auch Auflistungen wie unter Team. So konnten wir den bösen br-Teufel weitestgehend verbannen. Eine Ausnahme macht die Seite Portfolio. Dort macht das br Sinn, um Tätigkeitsgebiet und die Namen der Anwälte in zwei Zeilen zu setzen, was die Übersichtlichkeit erhöht.

Beim Schreiben der CSS-Datei sind wir von einer Grobstruktur einer XHTML-Seite ausgegangen. Diese Struktur - kombiniert mit einer sinnvollen Anordnung des CSS-Codes - hat den Vorteil, dass das Erstellen neuer Websites beschleunigt wird. Sie ermöglicht uns eine schnelle Orientierung im CSS-File und erlaubt zudem, dass wir mit ein paar Verschiebungen im (X)HTML-Dokument neuen Layoutanforderungen gerecht werden können. Die Struktur der (X)HTML-Datei für die Startseite liest sich so:

#kopf
h1

#navi
ul, li

#sidebar
h2 (Suche)
form
p (bild)
h3 (Kategorien)
ul, li
h4 (Metadaten)
ul, li

#inhalt
h2
p
h3
p

#footer
p

Die Strukturierung des CSS-Listings orientiert sich an den Hauptelementen der Site. Das erlaubt uns ohne Suche und auch nach längere Zeit eine schnelle Orientierung und Anpassung. Zu erwähnen ist, dass WordPress und die statischen Seiten zwei getrennte CSS-Files haben. So läßt sich später WordPress zu einem Weblog mit Kommentierung etc. ausbauen und sauber vom statischen Layout trennen. Die folgende Auflistung stellt die kommentierten Bereiche der CSS-Datei für WordPress dar.

• Layoutgerüst - 7 Container, wahrlich keine Divitis ;-)
• Linkformatierung - ohne die Hauptnavigation
• Grundformatierungen Text - nur für die h-Varianten und das p
• Textklassen - Sonderformatierungen für besondere Absätze und sonstige textliche Layoutelemente wie Footer, Infoleiste, Datum etc.
• Spezielle Klassen für Überschriften - um z.B. unterschiedlich formatierte h2 in der Sidebar und im Inhaltsbereich nutzen zu können
• Hauptnavigation in Listenform - mit Linkformatierung
• Subnavigation Inhaltsbereich - als Liste
• Navigation von Seite zu Seite - mit floats
• Subnavigation Sidebar - als Liste und teilweise mit eigener Linkformatierung
• Archiv - dieser Bereich enthält nur eine spezielle Listenformatierung
• Grafik - Formatierung von Fotos und sonstigen grafischen Elementen
• Sonstiges - zum Beispiel hr für das Deaktivieren der Floats
• Suche - Suchfeld, Button und form-Tag

Beim Schreiben der CSS-Datei habe ich auf eine gewisse Einheitlichkeit geachtet, die nicht jedermanns Sache sein muss, mir bei konsequenter Anwendung ein gewohntes Schreiben ermöglicht. So arbeite ich gerne ohne Einrückungen, da sie mich vor allem beim Ändern von Code nerven. Eine Paradeklasse soll zeigen, welche Form und welche Abkürzungen ich favorisiere:

.parade /* Kommentar */ {
color: #333;
background-color: #eee;
font-size: .8em;
margin: 31px 0 10px 10px;
background: url(images/bg-grafik.gif) no-repeat top left;
}

Was die weitere Optimierung im Sinne der Barrierefreiheit angeht: Wir haben auf der Startseite auf einen versteckten Skip-Link verzichtet, wegen des Weblog-Charakters. Dafür haben wir oberhalb von h1 einen versteckten Link namens “Kurz-Information” untergebracht. Dieser könnte Benutzer eines Screenreaders zu einer Seite führen, die die wichtigsten Informationen über die Kanzlei mit Kontaktdaten zusammenfasst.

Integration von WordPress

Oben hatte ich bereits die Integration von WordPress erwähnt. Die Startseite der Website und der Bereich Linkarchiv wird von WordPress verwaltet, die anderen vier Hauptmenüpunkte führen zu statischen Bereichen der Website, die nur selten einer Aktualisierung bedürfen. Sicher hätte man alle Inhalte mit Hilfe eigener Templates in WordPress integrieren können, was aber im Angebot nicht eingeplant war.

Das Gemisch des Hauptmenüs im “header”-Template von WordPress mit aktiven und inaktiven Buttons war - mit ein paar Versuchen und einer zusätzlichen Zeile PHP von Silvan - unkompliziert realisiert. Silvan hat zudem noch die Suche aufgewertet, in dem die gesuchten Wörter im Volltext und in der Headline farblich markiert werden.

Insgesamt war die WordPress-Integration eine gute Erfahrung im Hinblick auf das Aufsetzen kompletter Websites in WordPress. Diese Weblog-Software ist damit also nicht nur tauglich für das komfortable Führen eines Weblogs.

Fazit und Kritik

Mit der Arbeit ist eine Website entstanden, die auch Trends und Moden überdauern kann, ohne ihr modernes Aussehen allzu schnell zu verlieren. Das Hauptmenü zeigt zudem, dass es nicht immer Aqua-Style sein muss, um altbackene Schaltflächen zu vermeiden. Für uns sind desweiteren große und zentral positionierte Buttons interessanter denn je geworden.

Kritisch beurteile ich den Einsatz der großen Bilder im Dokumentenfluss wie zum Beispiel auf der Seite Kontakt. Besser wäre ein Einsatz als Hintergrundbild innerhalb einer Klasse gewesen. Da aber auf fast jeder Seite ein anderes Bild - von der alten Website übernommen - eingebunden ist, haben wir es dabei belassen, zumal bereits genügend Zeit ins Land gegangen war.

Soweit ein dann doch etwas ausführlich gewordener Praxisbericht, der uns daran erinnert, wie wir in Kürze weiter zu arbeiten haben. ;-) Kritik und Anregungen sind willkommen, ich lerne ja gerne im Netz und an alles kann man einfach nicht denken.