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.
Häufig bekomme ich folgende Frage zu hören: Schön, dass Du nur nach Webstandards arbeitest. Doch welche Vorteile bringen die mir als Homepagebesitzer?
Nun, eigentlich eine ganze Menge. Ich muß jedoch zugeben, wenn ich das mal präzise auf den Punkt gebracht mit Google suche, finde ich keine wirklich befriedigenden Aussagen. Übrigens nicht mal bei den Webkrauts, jedenfalls nicht für mich auf den ersten Blick ersichtlich. Dann bringe ich das Web jetzt einen Schritt weiter und präzisiere das mal.
Was sind Webstandards und worum geht es dabei?
Wenn wir von Webstandards sprechen, meinen wir damit die Standardisierung der "Websprachen", wie z.B. HTML, XHTML, CSS, JavaScript und dem DOM. Um die Standardisierung kümmert sich das World Wide Web Consortium (W3C)
Das World Wide Web Consortium (W3C) hat; zusammen mit anderen Gruppierungen und Standards-Organisationen; Technologien entwickelt, um Web-basierte Inhalte herzustellen und zu interpretieren. Diese Technologien, die wir "Webstandards" nennen, wurden sorgfältig entworfen, um für die größtmögliche Zahl von Internet-Nutzern den größtmöglichen Nutzen zu erzielen und gleichzeitig die Langlebigkeit von im Internet veröffentlichten Dokumenten sicherzustellen.
Lange habe ich mit mir gerungen, ob auch ich einen brauche und aufmachen sollte.
Voila! Da isser nun..
Hier wird sich regel bis unregelmäßig alles um die Themen drehen, die mir wirklich am Herzen liegen. Hauptsächlich gehts um Webdesign mit (X)HTML und CSS, Barrierefreiheit und vor allem Webstandards.
Den einen oder anderen Artikel über Windows werde ich mir jedoch nicht verkneifen können. Theorie wird hier nicht groß breitgetreten, ich werde eher anschaulische Beispiele bringen und genau erklären, warum ich etwas so gelöst habe. Grundsätzlich mag ich die Theorie, jedoch nur, wenn ich sie auch praktisch umsetzen kann.
Vielfach wird heutzutage leider immer noch JavaScript für Menüs mit Hover / Rollover oder Popup Effekten eingesetzt. Dabei lassen sich heute mit CSS ziemlich alle gewünschten Effekte einsetzen ohne das man auf das unsichere JavaScript zurückgreifen müsste. Wie man merkt, bin ich nicht gerade ein Freund von JavaScript; im Gegenteil; ich meide es wie die Pest, da es das Haupteinfallstor für Schädlinge aller Art ist.
Hier will ich einmal zeigen, wie man eine horizontale Navigationsleiste mit PopUp Effekten realisiert, indem man CSS mal etwas ausreizt.
Als Beispiel für eine solche Navigation nehmen wir einmal die Navigation meines alten Blogs. Eigentlich eine ganz normale, mit CSS realisierte nicht mal aufwändig gestaltete Navigationsleiste. Wenn man jedoch mit der Maus über die einzelnen Navigationspunkte fährt, poppen kleine zusätzliche Fenster mit Informationen auf. Die Fenster sind zudem noch teiltransparent gestaltet und alles funktioniert auch noch, wenn kein JavaScript im Browser aktiviert ist.
Wie genau funktioniert das und was ist dabei zu beachten?
Schauen wir uns mal den Ausgangscode an, eine einfache horizontale Blocknavigation, wie man sie wohl schreiben würde:
