Was geschieht, wenn eine Agentur für “Integriertes Kommunikationsdesign” einen Website-Entwurf macht, ich diesen dann webgerecht umsetzen darf, um danach alles auf WordPress zum Laufen zu bringen? Man arbeitet länger als erwartet und darf sich ausgiebig üben in problemlösendes Denken. ;-) Gemeint ist hier das bereits zweite Redesign unseres Kunden Brinkmann_Dewert. Mein erstes Redesign war mittlerweile fast 7 Jahre alt und es bestand das Bedürfnis nach etwas ganz Neuem.
Zuerst habe ich den Layout-Entwurf webkompatibel gemacht. Er brauchte eine dauerhafte Hauptnavigation und einen Footer, die im ursprünglichen Entwurf nicht vorgesehen waren. Zudem galt es, den Entwurf schmaler anzulegen, damit er unter 1024 Pixeln ohne horizontales Scrollen sichtbar sei. Dazu musste ich das Layoutraster durchschauen und die Elemente und Abstände neu berechnen. Eine halbe Seite Additionen von Kästen, Buttons und Abständen standen da als Selbstbriefing geschrieben, bevor ich auch nur eine Klasse CSS schrieb. ;-) .
Die zweite Herausforderung: In den Buttons und Kästen sollte die neue Schrift des Logos erscheinen. So musste ich also einen Großteil der zahlreichen Layoutelemente als Grafiken anlegen. So entstanden fast 200 Grafiken allein für das Layout – die über 40 Fotos, die ich teilweise recherchiert und ausgewählt habe, nicht mitgezählt (die Portraits und Fotos auf der Startseite hat ein echter Profi gemacht). CSS-technisch galt es, diese Grafik-Armada geschickt in den Hintergrund zu verbannen und gleichzeitig möglichst viel Editierbares in WordPress zu belassen. Deutlich macht das die Seite der Mitarbeiter. Dort kann der WP-Admin die in Hover-Bereichen liegenden Daten der Mitarbeiter ändern, ohne ins Template zu müssen, das gleiche gilt für die fachbezogenen Team-Seiten, die übrigens eine nützliche Navigationsidee aus dem Büro Rempen zeigen.
Wie man sich beim Durchklicken der Site wird denken können, gab es einige CSS-Lösungen zu finden, die auch noch vom IE 6 verstanden werden wollten. So sollte sich zum Beispiel die Box mit den Home- und Zurück-Buttons nicht nur unabhängig von den eingepflegten Inhalten der Seite immer schön rechts unten anordnen (gut zu sehen auf der Seite Fachgebiete), sondern auch vertikal und bündig mitwachsen auf Seiten, die längere Texte haben. Das ging nicht ohne valide Tricks und einigen Conditional Comments, aber – wie alles im Layout – ohne Javascript.
Desweiteren war bei der WordPress-Integration darauf zu achten, die weit über 2500 rechtsrelevanten Artikel, die das fleissige Anwaltsteam seit 2003 gepostet hat, mit ins neue Layout zu übernehmen oder andersherum, die Layoutvorlage behutsam und stimmig zu erweitern und unter Aktuelles erreich- und navigierbar zu machen. Webdesigner, die alltäglich mit WordPress zu tun haben, werden sicher eine Ahnung davon bekommen, welche Aufgabe es im Hinblick auf die unterschiedlichen Contentbereiche war, das Search-Template in den Griff zu bekommen. :-)
Ich möchte mich an dieser Stelle herzlichst bei Heinz Klein bedanken, der sich für mich und segert.net stark gemacht hat bei der Vergabe des Auftrags. Zudem hat er mich bei der Arbeit mit zahlreichen Anregungen begleitet und fleissig und erfolgreich den Großteil der Inhalte eingeflegt.
___
Ralphs am 4.02.11 Redesign Webdesign Wordpress [ 2 Kommentare ]
Vorige Tage habe ich mir endlich die Beta 3 von Firefox 4 installiert und gestaunt, wie schnell der Feuerfuchs geworden ist. Vor allem flashintensive Seiten wie mein Webradio und das Backend verursachen jetzt kaum noch Wartezeiten. Das Interface hingegen scheint mir nicht unbedingt verbessert worden zu sein, was auch im Hinblick darauf schade ist, dass ich für das Update meiner Anleitung Mit Firefox per Du sehr viele Screenshots neu erstellen muss. Überhaupt wird Mit Firefox 4 per Du mir recht viel Arbeit machen, denn ich plane ein etwas opulenter angelegtes Redesign sowie eine Neustrukturierung der Inhalte, die nicht mehr in Kapiteln, sondern nach Hauptthemen geordnet werden. Zudem werde ich das Tutorial komplett auf WordPress umstellen, dann wird es schlicht einfacher zu pflegen sein.
___
Ralphs am 20.08.10 Anleitung Redesign Software [ 2 Kommentare ]
Während Verena die Kunst des kleinen Icons ausübt, backe ich kleinere Brötchen und mache Redesigns mit Fotorecherche für den Kopfbereich und kundenfreundlicher WordPress-Implentierung, geschehen für das Seniorenheim der Verbandsgemeinde Linz. Schön war an der Arbeit, dass Perun mir den entscheidenden Tipp für ein PlugIn geben konnte, das dafür sorgt, dass eine Navigation mit Untermenüpunkten nicht dauerhaft geöffnet ist. Stattdessen soll nur das Submenü zu sehen sein, das ein Besucher aktuell geöffnet hat. Vielen Dank an Perun und seine schnelle Hilfe. Ich hatte zuvor vieles ausprobiert und auch zahlreiche PlugIns getestet, aber keines arbeitete wirklich im gewünschten Sinne. Aber auf das PlugIn Fold Page Menus bin ich nicht gestossen. Sachen gibts!
Ein weiterter Artikel zum Thema schönes Webdesign und WordPress als CMS: 125 WordPress Templates für ein Redesign