Design-History von PhilEcon

Hier gibt es Infos zu den früheren Versuchen zum WebDesign von www.PhilEcon.de (wird noch ausgebaut mit Screenshots und Links auf aktive Seiten).

---

Version 0.x Vorläufer (Beta-Versionen)

Versuche mit Tabellen-Layout führten zu schnellem Erfolg, bessere Wartbarkeit mit object-data gescheitert.

...

↑

Version 1 - XHTML1.1 + CSS in schwarz

Die erste offizielle Version hatte schon xhtml1.1 mit komplett externem CSS. Der Hintergrund komplett schwarz und einfache Navigationsstruktur.

Besonderheiten:

• Die Menüs links und oben bleiben mit aktuellen Browsern an der gleichen Stelle - funktioniert noch nicht mit MSIE, der hat kein standardkonformes CSS (hab schon eine Lösung gesehen, mal schauen ob es irgendwann funktioniert).
• Button Effekt für die Navigation im linken Menü - ganz ohne Bild! (leider ist nur der Text für href sensitiv und nicht der ganze Kasten - die Lösung mit div in href, die ich probierte und die funktionierte ist leider nicht standardkonform).
• Mouse-Over-Effekt (auch Hover-Effekt genannt) bei Navigation im linken Menü. Bei Mauskontakt (mit dem Text) ändert sich der Text und ein zusätzlicher Hinweis zum Ziel des Links erscheint. Wenn der Browser CSS nicht unterstützt erscheint der Hinweistext direkt mit dem Linktext (der dadurch recht lang aber auch aussagekräftiger wird).
• Ein kleines Problem gibt es auch noch mit der Anzeige des linken Menüs, wenn der Bildschirm nicht hoch genug ist, da es sich dann nicht scrollen lässt und der untere Bereich nicht klickbar ist (hier erweist sich der im folgenden beschriebene Bug des MSIE sogar als Vorteil). Falls wirklich jemand einen CSS-Browser auf kleinem Bildschirm verwendet: Über die Sitemap kommt man überall hin.

↑

Version 1.1 - Fixer Rahmen mit pure-CSS und harmonische Farben in Lila

Der Auftritt sollte professioneller aussehen und das triste schwarz verlieren. Also habe ich mich intensiv mit Farbharmonien beschäftigt, um am Ende den Wald vor lauter Bäumen nicht mehr zu sehen: die violetten Töne passen wohl zusammen - aber leider nicht zum Thema. So habe ich mich direkt nachdem diese Version online war entschlossen, sie müsse anders werden und nach einer Web-Pause mit viel Zeit an der neuen Version gearbeitet.

Technisch hat diese Version allerdings ein großes Highlight: völlig standard-konform und mit pure-CSS bleibt der Rahmen um den eigentlichen Text fix und somit ist die Überschrift immer im Blickfeld und sind die Menüs immer erreichbar. Nur der Textbereich wurde gescrollt. Für Firefox und Opera ist das freilich kein Thema (via position=fixed), es funktionierte aber auch wunderbar im MSIE!

Leider machten die großen Sonderlocken für den MSIE mehr Probleme, als es Wert war: Es funktionierte nicht überall gut, so gab es Probleme beim Scrollen mit Firefox unter Linux.

↑

Version 2

Dem Anspruch des Themas entsprechend habe ich in Version 2 seriöse und passende Farben gewählt (thanks to Agentur Springefeld). Die scheinbare Tristheit der Grauschattierungen wird durch einen Dunkel-Bordaux-Roten Rahmen und ein bildhaftes Logo aufgelockert.

Die komplizierte CSS-Technik musste einfacher werden, sollte die Seite doch unproblematisch auf vielen Browsern angezeigt werden (good viewed in many browsers). Das neue CSS ist zwar nicht kleiner geworden, allerdings gibt es deutlich weniger funktionsreiche Verschachtelungen. Der Tribut: im MSIE scrollt wieder die ganze Seite ohne fixe Bereiche. Auch für Firefox und Opera habe ich eine komplett fixe Überschrift aufgeben müssen, weil Links auf den Seiten nicht mehr vernünftig funktioniert haben (Probleme mit Ankern und position=fixed).

Die Navigation ändert sich endlich auch für die besuchten Seiten (Links auf die aktuelle Seite erscheinen inaktiv).

Ausbau der Inhalte zum eigentlichen Thema - der Doktorarbeit.

...

↑