Design: So entsteht die Optik Ihrer TYPO3-Site

- Typischer Ablauf der Design-Phase
Grafikentwurf
Während des ersten Schritts, dem grafischen Entwurf der Website, legen wir gemeinsam mit Ihnen fest, wie die Website aussehen wird. Wie ist der Platz aufgeteilt, wo finden sich welche Bedienelemente und wo werden Text und Bilder stehen? Und natürlich: Wie fließt Ihr Corporate Design ein? Dazu erarbeiten wir mit Hilfe klassischer Grafik- und Bildbearbeitungsprogramme Lay-outs und zeigen anhand beispielhafter Szenarien, wie sich die Seiten Ihres Projekts darstellen und "anfühlen" werden. Selbstverständlich werden bereits in dieser Phase alle ästhetischen und funktionalen Elemente der Website berücksichtigt.
XHTML-Entwurf
Der grafische Entwurf lässt sich allerdings noch nicht im Internet verwenden. Er ist lediglich die Vorlage für die Kodierung eines Dokuments im XHTML-Format, wie es Internet-Browser anzeigen können. In diesem textbasierten Dokument sind alle Elemente der Internetseite beispielhaft enthalten: Der Rahmen, sämtliche Menüs, Texte, Bilder und auch Formulare.
CSS-Formatierungen
Mittels XHTML nehmen wir jedoch nur die logische Strukturierung der Elemente vor. Die eigentliche Zuweisung der optischen Eigenschaften geschieht mit der Definition der Cascading Style Sheets (CSS). Mit den ebenfalls als Textdateien ausgelegten Style Sheets werden dem XHTML-Dokument die grafischen Formatierungen zur Seite gestellt. So stellen wir sicher, dass das XHTML so aussieht, wie Sie es von den grafischen Entwürfen her kennen: Position und Größe aller Elemente, Schriftarten, -größen und -farben usw. — schlicht alles, was das Aussehen der Website bestimmt.
Dieser Abschnitt der Produktion ist sicherlich ähnlich bedeutend für den Erfolg des Endergebnisses wie das Erstellen der grafischen Entwürfe. Spätestens wenn es darum geht, dass das XHTML auf allen wichtigen und aktuellen Browsern gleich aussieht, ist sehr viel Sorgfalt gefordert. Nicht zuletzt, weil jeder Browser seine eigene Vorstellung davon hat, wie es CSS interpretieren und darstellen muss.
Seitenvorlage für TYPO3
Zu guter Letzt bringen wir jetzt TYPO3 bei, wie es die eigentlichen Inhalte, die Sie veröffentlichen möchten, in das vorgegebene XHTML einsetzen soll. Dieser Schritt betrifft vor allem die Menüs und den Inhaltsbereich der Seiten. Dazu braucht TYPO3 eine Seitenvorlage, die auf dem XHTML beruht. In dieser Seitenvorlage werden alle Elemente, die TYPO3 erzeugen soll, durch Platzhalter ausgetauscht. TYPO3 kann so die Navigation, Ihre Text und Bilder in die Vorlage hineinpflanzen und das fertige Dokument an den Browser schicken.
![Foto: Mauro Alejandro Strione [via stock.xchng]](uploads/tx_bsheaderselector/Auge.jpg)

