marcelkoch.net revisited
Sonntag, 6. März 2011
Willkommen, lieber Leser, auf der neu gestalteten und entwickelten Version meiner Website.
Nach vielen Ideen und Grübeleien und sicher mindestens so vielen Stunden Arbeit präsentiere ich nun den aktuellen Stand für alle interessierten Link-Klicker bzw. URL-Eingeber. Ich spreche vom aktuellen Stand, da ich mir über einige unrunde Details durchaus bewusst bin. Diese werde ich im Laufe der nächsten Wochen beheben und auch sicher noch das eine oder andere Detail-Feature einbauen. Um für mich die Motivation zu bewahren und hoffentlich die eine oder andere Rückmeldung zu bekommen, stelle ich sie nun trotz dieser “Minor-Bugs” der breiten Masse zur Verfügung.
Layout
Die Grundidee zum Layout trage ich schon länger mit mir rum. Neben meinem Logo, das den Weg nach vorne und stetige Weiterentwicklung ausdrücken soll, wollte ich nun auch das Layout zur Untermalung eines meiner Prinzipien verwenden: Den Blick über den Tellerrand. (Selbstredend bin ich bei der Ausübung dieses Prinzips ein Amateur, versuche mit der Zeit immer besser zu werden.) Ich musste also die Möglichkeit für den Nutzer schaffen, nicht nur den aktuellen Inhalt lesen, sondern auch auf den nächsten einen Blick werfen zu können. Schnell kam mir der Gedanke, auf der rechten Seite eine Art Vorschau anzuzeigen – sozusagen ein Blick auf die nächste Seite während des Umblätterns. Erst probierte ich das Layout rein grafisch zu entwickeln und den Browser außen vor zu lassen, um freier denken zu können. Bald merkte ich aber, dass ich wohl doch erst einmal ausprobieren sollte, inwiefern mich die Browser in meiner Idee unterstützen würden. Ich war guter oder sogar bessere Dinge als gedacht… bis ich auf den IE6 traf. Dazu aber später mehr.
Ich experimentierte mit zwei Boxen, wobei ich die zweite nach rechts außen verschob und nur der noch linke Rand für den Benutzer zu sehen war. Nun fragte ich mich, wie ich nun den Blick auf die rechte Seite ziehen konnte, ohne zu sehr vom aktuellen Inhalt abzulenken. Ich füllte beide Boxen mit Blindtexten. Das führte jedoch bei der Benutzung der Suchfunktion des Browsers zu einer Verwirrung des Benutzers. Fand der Firefox nämlich den Suchbegriff im heraus geschobenen Text zeigte er zwar den Fund an. Die Markierung war aber nicht zu sehen. Safari ignorierte in diesem Fall meine Anweisung overflow-x:hidden;, was aus meiner Sicht nicht
minder für Verwirrung des Benutzers sorgen kann. Also entschloss ich mich, lediglich die Überschrift anzuzeigen und zwar vertikal als “Randnotiz”. Da ich diesen Text aber auch nicht finden lassen möchte und die Unterstützung für CSS-Rotationen mir nicht ausgereicht hat, rendere ich die Überschrift nun mit PHP GD als Bild. (Vielleicht sollte ich aber noch mal darüber nachdenken, ob der Text nicht noch gefunden werden sollte)
Es stellte sich mir nun die Frage, welche Inhalte ich denn auf dem “Tellerrand” anpreisen wollte. Um dem Benutzer nicht willkürlich Überschriften vorzuwerfen und eine Orientierung zu zulassen, werden lediglich Inhalte aus dem von ihm ausgewählten Bereich verwendet. Die Ausnahme stellt der Bereich “Übersicht” dar. In diesem ist der Besucher noch für keinen bestimmten Bereich entschlossen und offen für jeglichen Inhalt.
Um dem Benutzer ein Gefühl für die Bereiche zu geben, entschied ich mich für einen ein Pendant der Inhaltsbox als Header, der zum einen mit einem thematisch passenden Foto für den Wiedererkennungswert und zum anderen alle Unterrubriken bereit hält. Visuell bilden diese beiden Boxen einen Einheit, sodass der Besucher sofort den Bereich erkennen und den Inhalt fokussieren kann.
Browserunterstützung
Für mich war beim Kreieren des Layouts von Anfang an klar, dass ich sowohl auf die Neuentwicklungen von CSS3 setzen möchte, als auch den (meist unwissenden) Nutzer des IE7 und sogar 6 nicht ausklammern wollte. So setze ich auf die Methode des Progressive Enhancements. Browser, welche die neuen Features unterstützen, bieten den Benutzern auch ein schickeres Layout. Ein Benutzer des IE6 kann die Seite aber auch ohne runde Ecken oder Box-Schatten betrachten. Ihm wird in der Regel auch nicht mal auffallen, dass die Seite für ihn anders aussieht. Wie Jens Grochtdreis schon mehrfach gesagt hat: “Wer sieht sich eigentlich die Webseite mit mehreren Browsern an? Das machen doch nur wir – wir Webentwickler.”
Dennoch musste ich mich ganz schön verrenken, um die Grundidee des Layouts, besonders das Einblenden und Einfliegen der rechten Box, auch im IE6 und IE7 umsetzen zu können.