Nachdem Design & Konzept fertig waren, war der erste Schritt das entwickelte Design in XHTML & CSS zu übertragen. Je nach Aufwand des Designs kann so eine Templating-Phase locker mal länge dauern, als die Entwicklung des Designs an sich. Ich beschränkte mich normalerweise beim Templating auf die Kompatibilität bis IE6 zusammen mit Safari, Opera und Firefox.

Erst wenn man dieses Template erfolgreich in allen Browsern getestet hat, sollte man den Schritt in ein CMS gehen. Spätere Änderungen am Template werden bestimmt nötig, sollten sich aber ausschließlich auf kleine Text-Formatierungen oder Listen beschränken. Grundsätzlich muss man aber erstmal die Aufteilung des Layouts in DIVs bewältigen...

Aufteilung des Designs

Wer sein Design im Schnippel-Modus denkt hat bei XHTML schon fast verloren. D.h. es geht nicht mehr darum, ein Design in ein Zeilen/Spalten-Raster zu zerlegen und dann entsprechende Grafiken zu platzieren, vielmehr sollte man seine Seite in tatsächlichen Inhaltselementen denken. Also was ist Überschrift, was ein Absatz, wie sehen Listen aus, bzw. was in meiner Seite ist überhaupt eine Liste.

Ein Menu zum Beispiel ist eine typische unsortierte Liste von Links. Genau dementsprechend sollte man sie auch im XHTML-Markup vermerken, nämlich als UL mit entsprechenden Links in den LIs. Per CSS sorgt man dann dafür, dass diese Liste auch entsprechende aussieht, wie man es möchte.

Mit DIVs letztendlich legt man ein der Seite Bereiche fest, in denen sich der Inhalt abspielt. Dieser kann man entsprechend platzieren und sich der Größe des Browserfensters anpassen lassen. Man sollte dabei zwar nicht sogenannte Divitis ausarten beim Verteilen der Inhaltsbereiche, manche Effekte bzw. Features benötigen aber schon den intelligenten Einsatz von mehreren DIVs.

Die Blog ist 4 Haupt-DIVs unterteilt in denen jeweils das gleiche Zusatz-DIVs eingebettet ist. Die Haupt-DIVs sorgen für den Hintergrund & die Elementformatierung in den einzelnen Bereichen. Die eingebetteten Layouter-DIVs sorgen für das liquide Layout. Damit der Inhalt nämlich bei sehr breiten Browserfenstern nämlich nicht allzu breit wird, halten die Layouter ihn auf einer max-width. Falls sich das Browser-Fenster allerdings verkleinert, soll der Inhalt sich mit verkleinern. Das das ab einer gewissen Größe nicht mehr aussieht muss man dabei in Kauf nehmen.

Jeffrey Zeldman schrieb dazu in seinem sehr zu empfehlenden Buch "designing with web standards" ungefähr Folgendes: Man sollte immer dafür sorgen, dass eine Webseite in so gut wie jedem halbwegs aktuellen Browser funktioniert. Menschen mit sehr exotischen Systemkonfigurationen sollte man dabei nicht außen vorlassen. Allerdings sollte man wegen solchen Konfigurationen keine schlaflosen Nächten haben, denn Menschen die mit solchen Konfigurationen surfen, sind vermutlich schlimmeres gewöhnt als eine nicht vollständig schöne Seite (ich würde zitieren, aber finde die Seite nicht).

Kompatibilität mit Browsern

Wie ich ja oben schon erwähnt hatte, ist diese Seite kompatibel bis IE6 und dann noch mit den anderen modernen Browsern. Das aber allein das schon vor dem Hintergrund des liquiden Layout etwas tricky ist, will ich mal an dem CSS-Code für den erwähnten Layouter verdeutlichen:

*.layouter {
    position: relative;
    width: auto !important;
    width: 850px;
    max-width: 850px;
    margin: auto;
    padding: 0 25px 0 25px;
    overflow: hidden;
} 

Hier sieht man nämlich schon einen kleinen Workaround für den den IE6. Der versteht nämlich max-width nicht und musst deshalb mit anderen Angaben gefüttert werden. Vielmehr versteht der IE6 die width-Angabe wie max-width. Das heisst er wird, wenn der Inhalt breiter ist als width, das umgebende DIV entsprechend dem Inhalt anpassen. Außer, wenn man overflow: hidden setzt, dann verschluckt er ihn.

Da der IE6 weiterhin aber auch die !important-Deklaration nicht versteht, lässt sich eine Standard-konforme CSS-Regel definieren, die den IE6 mit den richtigen Werten füttert und auch "Better"-Browsers (FF, O und S) nicht im Regen stehen lässt: Man gibt mit gibt width: auto !important und max-width: <wert> an. Danach direkt die Regel für die width für den IE6. Alle Better-Browser verstehen die !important-Deklaration und ziehen die Regel der zweiten Breite-Definition vor, der IE6 versteht nur das, was er will und futtert damit genau die richtigen Werte.

Im Bereich dieser Hacks gibt es tausende Möglichkeiten und Verfahrensweise. Die meisten nutzen Lücken bei der entsprechenden Browser-Version aus. Für den IE habe ich mal diesen Link gepostet, der einem bei den gröbsten Problemen hilft. Allgemein sei aber wieder auf das Buch von Jeffrey Zeldman (s.o.) verwiesen, der Gründe für standardkonformes Webdesign und vor allem Hacks für die verschiedensten Browser vorstellt.

Einen Teil des Publikums kann man nicht bedienen

Eines vorneweg: Ich bin absolut kein Fan vom Aussperren bestimmter User: Also keine JavaScript- Weichen einbauen, die Usern, deren Browser man für inkompatibel hält nur eine entsprechende Meldung und keine Alternative lässt. Es ist immer besser offen mit der Inkompatibilität umzugehen. Da kann der findige User sich nämlich entweder noch selbst behelfen oder aber mit den geringeren (visuellen) Features trotzdem arbeiten.

Ich hatte ja bereits oben erwähnt, dass ich persönlich hauptsächlich für IE6, FF, Opera und Safari mein Markup und CSS erstelle. Damit müssten man den Großteil des Publikums abdecken können, lässt sich darüber hinaus aber einige schöne Optionen bzgl. JavaScript und Web 2.0 Features. Will man zusätzlich noch die Kompatibilität mit IE 5.5 oder früher, muss man Mehraufwand treiben. Der ist im XHTML/CSS-Bereich noch gar nicht so groß, man verliert aber viele Möglichkeiten bzgl. von JavaScript-Bibliotheken. Außerdem finde ich persönlich den Aufwand des komplette Box-Model nochmal durchzurechnen irgendwie zu hoch.

Im nächsten Teil gibts denn noch einige Hacks/Tricks, die ich bei der Umsetzung in XHTML/CSS angewendet habe. Danach kommen wir dann auch bestimmt zu der Umsetzung in Django. Versprochen!

Comments

• marten Brosch23:11 21.12.2006

  und wieder ein schöne beitrag, na dann bin ich ja mal auf django gespannt, hab ja schon so einiges über diese overkill lösung gehört.
  fahr jetzt erstmal auf die insel rügen, urlaub machen. also, schönes und vor allem erholsames fest! HOHO frohe Weihnachten.
  
  Gruß
  Marten