Ratatatam

Behutsames Redesign für die mobile Zeit

15.08.14

Für die Rechtsanwältin Maria Schachten habe ich vor gut zehn Jahren eine einfache Website gestaltet. Sie enthielt ein Headerfoto von der Kundin und meine Portraitaufnahmen und tat ihren Dienst. Nun stand ein Redesign an. Da die Kundin mit dem alten Layout im Großen und Ganzen zufrieden geblieben war, sollten keine großen Änderungen vorgenommen werden und auf jeden Fall das Kopfbild gerettet werden. Leider stand es nur sehr klein zur Verfügung. Zum Glück gab es einen Weg, dieses akzeptabel zu vergrößern. Das Ergebnis:

redesign-raschachten01

Im Vergleich dazu das Layout aus dem Jahre 2003. Das Coding hatte mit tabellenfreiem Markup und einem sparsamen CSS die Jahre richtig gut überstanden. Bei der Arbeit fiel mir auf, dass ich gestalterisch in den letzten Jahren dazu gelernt habe. Ich habe eine sicherere Nase, was die Abstände und Proportionen betrifft. Insgesamt ist der Lernprozess noch beschleunigt worden durch die responsive Webzeit.

redesign-raschachten02

Responsivität für große und kleine Screens, mit angepasstem Headerbild für mobile Geräte:

redesign-raschachten03

Autor: Ralph Segert   Tags: , ,      

125 WordPress-Templates für ein Redesign

04.02.11

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.

Autor: Ralph Segert   Tags: , ,   2 Kommentare    

Mit Firefox 4 per Du in Vorbereitung

20.08.10

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.

Autor: Ralph Segert   Tags: , ,   2 Kommentare    

Schönes Webdesign für kleines Content Management

20.03.10

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!

 Website Seniorenheim Linz

Ein weiterter Artikel zum Thema schönes Webdesign und WordPress als CMS: 125 WordPress Templates für ein Redesign

Autor: Ralph Segert   Tags: , ,      


Ansichten:  ragini · Frank · aurora · Ping

Android Anleitung App Design Blogosphäre Bochum Buch CMS CMS Made Simple DJR Electropop ExpressionEngine Film Fotografie Fotolust Freiberufler Fussball GooglePlus Grafikdesign Icondesign Ingwer iPod Touch IT-Sicherheit Layout Leben Medien Musik Netz Politik Produkt Redesign responsive Webdesign Rezepte Ruhrgebiet Software Sprache Technik Teufel UX UX-Design Verpackungsdesign Videoanleitung Webdesign Webradio Wissen Wordpress

© 2017 Ralph Segert . Impressum