quadracom |

Ihre TYPO3-Agentur in Bremen | Design, Konfiguration & Schulung

| typo3@quadracom.de | 0421 / 36 48 68-0 | Kontakt & Impressum

Design: So entsteht die Optik Ihrer TYPO3-Site

Natürlich soll Ihre neue TYPO3-Website ansprechend aussehen und sich leicht bedienen lassen. Schließlich geht es um Ihr Unternehmen, Ihre Organisation. Ihre Vorstellungen umzusetzen und Ihre Internetpräsenz gut bedienbar und optisch ansprechend zu gestalten, ist das Anliegen der Designphase. Diese gliedert sich in drei Abschnitte: Grafischer Entwurf, Kodierung des Quelltextes und schließlich die Erzeugung einer Seitenvorlage, auf deren Basis TYPO3 die Inhalte veröffentlicht.

Diagramm Design-Phasen
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.

«Zurück zu Analyse & Konzeption
Weiter zu Konfiguration»