23. April 2009

the-netBRain´s neuer Glanz

Update: Da ich darauf hingewiesen wurde, das zu diesem Thema Screenshots vom alten Design ganz cool wären, habe ich sie ans Ende des Beitrags eingefügt.

Bisher habe ich mit the-netbrain.de und bainblog.the-netbrain.de zwei unabhängige kleine Projekte betrieben.

Beide Projekte waren bisher als statische Webseite ausgelegt und mit einem jeweils anderen Design hinterlegt. Mal ganz abgesehen davon, dass mir das Design von the-netbrain.de so überhaupt nicht mehr gefiel, war es auch noch; wenn auch erst auf den dritten Blick ersichtlich; leicht fehlerbehaftet und buggy. Die Fehler offenbarten sich jedoch erst beim zoomen der Seite, es war halt nicht elastisch. Außerdem hatte ich die Farben und das fixe Layout satt und so hat es mich auch nicht gerade inspiriert, mal neuen Inhalt einzufügen.

Genauso erging es mir mit dem Brainblog. Das Design gefiel mir zwar immer noch, jedoch war auch diese Seite statisch und ohne Finesse. In Zeiten immer mehr wachsender Bildschirmgrößen und Auflösungen ist eine statische Webseite meiner Meinung nach einfach nicht mehr Hip und Aktuell.

So setzte sich also fast direkt nach dem Relaunch/Redesign von nordische-messer-world.de der Gedanke an ein Redesign dieser Seite fest, diesesmal aber als elastische, fluides und modernes Design.

Ziel des Relaunches

Das Ziel war ganz klar ein Layout zu erschaffen, was einfach, aber dennoch modern ist. Wichtig war mir vor allem, dass es auch bei unterschiedlichen Auflösungen funktioniert und sich dynamisch an wachsende Bildschirmgrößen anpasst. Gemacht ist dieses Layout hier vor allem für größere Auflösungen, funktionieren tut es aber auch mit einer Auflösung von nur 1024 Pixeln ohne hässliche horizontale Scrollbalken (sollte es jedenfalls).

Und so skaliert dieses Layout der Auflösung entsprechend. Berücksichtigt habe ich selbstverständlich auch die Zoomfunktion der Browser, relativ stufenloses Zoomen der Seite ist nun möglich.

Besonderheiten des Layouts

Wie schon oben beschrieben, skaliert das Layout nun beim Zoomen der Seite hervorragend mit, somit kann jedermann seine optimale Schriftansichtsgröße per Browserzoom einstellen.

An Browsern wird alles unterstützt, was heutzutage halbwegs aktuell ist. Rücksicht genommen habe ich auch auf unseren allseits geliebten Freund, den Internet Explorer 6. Ältere Versionen des Internet Explorer unterstütze ich aus Prinzip nicht mehr, wenn also mit einem IE 5.5 oder so etwas die Seite nicht richtig angezeigt wird, tja - Life sucks. Update auf einen vernünftigen Browser oder stirb.

Aufbauen tut auch diese Seite wieder auf dem CSS Framework YAML von Dirk Jesse. Auch hier wieder aus Zeitnot. Geht einfach viel schneller, weil man die Browserbugs nicht einzeln finden und eleminieren muß. Aber nicht falsch verstehen, diese Seiten sind natürlich händisch in XHTML 1.0 Transitional Strict HTML5 und CSS programmiert und selbstverständlich valide und fehlerfrei. Voraussetzen kann man das heutzutage ja leider nicht und so ist es immer noch die Ausnahme, eine korrekt validierende Seite vor sich zu haben.

Im Footerbereich sind übrigens Links zu den Validatoren eingebaut, sodass jeder Nutzer meiner Seiten die Validität selbst überprüfen kann.

Zwei Projekte unter einem Dach...

Nun sind meine beiden Projekte; Webseite und Blog, in dieser einen Seite zusammengefasst und auch Tante Google wird per Redirect erfahren, dass die alten Artikel meines Blogs eine neue Heimat bekommen haben. Alle alten Artikel (waren ja noch nicht so viele) wurden in dieses neue Projekt übernommen und integriert. Desweiteren wird es auch demnächst einen Hinweis in alten Blog auf den Umzug geben.

Die neue Navigationsstruktur

Ich habe versucht, die Navigationshirarchien so logisch wie nur möglich aufzubauen. Los gehts auf der Startseite mit Anlesern zu den neuesten Artikeln der jeweiligen Bereiche. Die horizontale Navigation führt durch die einzelnen Themenbereiche der Seite und enthält dort; wo nötig; noch eine weitere vertikale Navigationsebene, um durch die teilweise umfangreichen Unterpunkte zu leiten.

Das Verständnis der neuen Navigationshirarchie soll eine kleine Tour durch die Webseite erleichtern, diese ist auch auf der Startseite (Home) zu finden.

Dies soll nun vorerst alles zum neuen Layout sein.

Screenshots des alten Designs:

Der Weblog

Die Webseite

Bis die Tage, Euer Andreas..