Vom Konzept bis zum Layout
Geschrieben von Grishan - 24.02.2006
Die Entstehungsgeschichte des Dotflare Layouts, angefangen von konzeptionellen Überlegungen und
Anforderungen bis zur konkreten Umsetzung. Die erfolgten Arbeitsschritte werden bebildert und mit Quellcode
Ausschnitten sowie anhand von kompletten Layoutgerüsten für verschiedene Browserversionen dargestellt.
Grundüberlegungen
Unabhängig vom verwendeten Design und präsentierten Inhalten, gingen der späteren Umsetzung folgende Anforderungen und Überlegungen voraus. Dem heutigen Entwicklungsstand der aktuellen Webstandards Rechnung tragend, kam für mich nur ein tabellenenloses Layout in Frage. Auf dieser Basis aufbauend ergaben sich so die grundsätzlichen Anforderungen :
- tabellenloses Layoutgerüst mittels XHTML 1.0 Strict und CSS
- fehlerfreies und ohne Warnungen valdierbares XHTML / CSS durch allen gängigen Validatoren
- Plattform übergreifender Support der gebräuchlichsten grafischen Browsertypen
- Zugänglichkeit durch linearisiertes Textlayout für sehr alte Browser
- Möglichkeit einer praxisrelevanten Textskalierung innerhalb des Layouts
Das Layout Konstrukt
Da Dotflare weitestgehend Inhalte redaktioneller und informativer Natur bereitstellt, fiel die Wahl auf ein mittig zentriertes 2 Spalten Layout mit Kopf und Fußbereich (Header + Footer). Der strukturelle Aufbau sieht auf den ersten Blick unspektakulär aus, enthält aber einige Besonderheiten. Um dem späteren Erscheinungsbild einen ruhigeren Charakter zu verleihen, sollte sich das Layout automatisch vertikal strecken. Für die visuelle Konsistenz war weiterhin eine fixierte Plazierung des Footers am unteren Rand des Layouts angedacht.
Die folgend dargestellte Layoutskizze zeigt den abstrakten visuellen Aufbau. Die einzelnen, später per CSS formatierten Boxen enthalten bereits die im Stylesheet und Quelltext verwendeten Namen (Id's). Gekennzeichnet sind ausserdem die Positionen, an welchen die durch das CMS (Pathway, Content, Navigation und Suche etc.) erzeugten Ausgaben erfolgen sollen.
Die XHTML Struktur
Das skizzierte Konstrukt einer umschließenden Container Box (#miniboxcontainer), welche die weiteren 6 Boxen enhält, wird nun per XHTML nachgebildet. Abgeleitet aus der obigen Skizze ergäbe sich somit folgende Stuktur per XHTML :
<!-- start main container -->
<div id="miniboxcontainer">
<!-- start header -->
<div id="miniboxheader"></div>
<div id="headerspace"></div>
<!-- end header -->
<!-- start top navigation -->
<div id="topmenu">
...
</div>
<!-- end top navigation -->
<!-- start loading pathway, top modules and mainbody -->
<div id="moscontent">
...
</div>
<!-- end loading pathway, top modules and mainbody -->
<!-- start loading right modules -->
<div id="mosmodright">
...
</div>
<!-- end loading right modules -->
<!-- start footer -->
<p id="footer">
...
</p>
<!-- end footer -->
</div>
<!-- end main container -->
Eigentlich ziemlich mini, nicht wahr ?
Deswegen bekam das spätere Template auch den niedlichen Namen "Minibox".
Die Beispiel Layouts
Natürlich ist der obige "XHTML Schippsel" nur der kleinste Teil des späteren Layouts, denn an diesem Punkt greift nun die Umsetzung der weiteren gestellten Anforderungen. Die Formatierung des XHTML Quellcodes per CSS um das gewünschte visuelle Grunderscheinungsbild zu erhalten. Desweiteren die Maßnahmen um eine Browser- und Plattform übergreifende Stabilität des erzeugten Layouts zu gewährleisten.
Grundsätzlich wurde nun zwischen 3 Szenarien unterschieden :
- Ein Sample Layout für W3C konforme Browser mit ergänzendem CSS für den Internet Explorer
- Ein Sample Layout für die älteren Opera 5 und 6 Versionen
- Möglichkeit eines alternativen Textlayouts für Browser die CSS nicht oder nur mangelhaft unterstützen
Nachfolgend können die zwei statischen Varianten (Samples) des Layouts, mit komplettiertem XHTML und CSS betrachtet werden.
Dotflare Sampleversion für W3C konforme Browser:
Dotflare Sampleversion für Opera 5 / 6:
Abschließendes und Fertigstellung
Aus den vorgestellten Sample Versionen ist letztendlich das fertige Dotflare Layout entstanden, welches der geneigte Leser gerade betrachtet. Um das endgültige Ergebnis zu erreichen, waren natürlich neben der Erstellung des eigentlichen Templates (für das Mambo CMS) eine Menge an weiteren Maßnahmen notwendig.
Dazu zählen unter anderem eine umfangreiche Überarbeitung des Mambo CMS Cores für das Erzeugen valider und tabellenloser XHTML 1.0 Strict Quelltextausgaben im Frontend (welches der Besucher gerade sieht) sowie die, für eine barrierearme Umsetzung, zusätzlich ergänzte Funktionalität. Zu nennen wären da zum Beispiel eine alternative Textskalierung, Accesskeys, eine Zusatznavigation für Screenreader und angepasste Tooltipps.
Kommentare
Matthias schrieb am 10.08.2006 :
Hallo,
das Tutorial ist soweit sehr verständlich geschrieben. Hätte jedoch gerne mehr über den interessanten Teil, die CSS-Datei gewusst.
Habe immer nur mit Tabellen gearbeitet und bin gerade dabei etwas über 'tabeless designs' zu lernen. Deine Seite gibt mir da wirklich sehr viel Motivation, hätte nicht gedacht dass man mit CSS so schöne Seiten erstellen kann.
Weiter so!
Matthias schrieb am 10.08.2006 :
Sorry, habe 'Minibox Layout - W3C konform' entdeckt :)
Grishan/Dotflare schrieb am 15.08.2006 :
Hallo Matthias,
die hier von mir dargelegten Gedankengänge gelten ja eigentlich noch für das vorangegangene Design von Dotflare. (Auswählbar über den Design-Switch auf der Startseite von Dotflare). Generell stellen die aufgeführten Schritte aber die grundsätzliche Vorgehensweise beim Einstieg in das Entwickeln tabellenloser Designs dar.
Tip: Auch die Tutorials für die dynamische Schriftvergrößerung sowie für den Dotflare Nicetitle Mod enthalten W3C konforme tabellenlose Samplelayouts - in jeweils leicht abgewandelter Form, so dass sich die Trennung von Inhalt und Design per CSS gut nachvollziehen lässt.
Grüße von Grishan
Flo schrieb am 12.09.2007 :
Hi...der Layoutansatz gefällt mir sehr sehr gut, ich hätte nur eine Frage, wie werden denn bei Benutzung des IE 6.0 z.B. die Hacks erkannt und dann angewandt?
Danke,
Flo
(4 Kommentare)
