Ein responsives Webdesign mit Typo3 (Teil 2)

Nachdem wir im ersten Teil unseres responsiven Webdesign Tutorials den XAMPP mit einem Typo3 6.2.6 versehen haben, wenden wir uns im zweiten Teil des Tutorials dem Template zu. Um nicht bei null anfangen zu müssen, nutze ich ein CSS Framework, was mir die wesentlichen Styles schon mitbringt.

Auf www.as-moll.de habe ich Foundation genutzt, musste aber feststellen, dass dieses Framework für meinen Geschmack zu umfangreich ist. Typo3 bringt eigene Stylesheet Angaben mit, die entweder per Typoscript umgebogen oder in der CSS eingebunden werden müssen. Weniger ist dabei mehr und die CSS bleibt damit auch schlanker.

Für mein Beispiel habe ich mich für das Responsive Grid System entschieden. Dieses CSS bringt unter anderem eine Spaltenlogik mit, die von einspaltigen bis zwölfspaltigen Designs reicht. Und damit sind wir auch bereits beim Thema. Unsere nette PSD Datei muss in eine HTML Datei gepresst und mit CSS positioniert werden. Einige Elemente sollen anschließend dynamisch mit Inhalten oder Menüs gefüttert werden. Im Prinzip sind folgende drei Schritte relevant:

  1. wie viele Spalten soll mein Content aufweisen?
  2. klassisches Marker Template oder TemplaVoila?
  3. wo befinden sich meine dynamischen Inhalte?

Das Spaltenraster

Aufgrund meines Designs entscheide ich mich für ein dreispaltiges Design. Jede Spalte soll dabei 33,3% sein und die mittlere Spalte soll links und rechts 15 Pixel Abstand aufweisen.

dreispaltiges Raster mit 310 Pixel Breite und 15 Pixel Abstand
image-79

Ein dreispaltiges Raster mit 310 Pixel Breite und 15 Pixel Abstand

Die ersten beiden Spalten werden aber später zu einer Spalte zusammengefasst.

Die Marker

Da ich mit TemplaVoila nie so richtig warm geworden bin, bleibe ich bei der guten alten Marker Technologie. Das Design sieht folgende Marker vor.

Marker für dynamische Inhalte
image-80

Marker für dynamische Inhalte

Das Responsive Grid System

Nachdem ich das Responsive Grid System heruntergeladen habe, entpacke ich die ZIP Datei. Die Datei besteht aus folgenden Ordnern:

Ordnerstruktur des Responsive Grid System
image-81

Ordnerstruktur des Responsive Grid System

Der CSS Ordner enthält:

Inhalt des CSS Ordners
image-82

Inhalt des CSS Ordners

Hier kopiere ich die „3cols.css“, „col.css“, „html5reset.css“ und die „responsivegridsystem.css“ in meinen „fileadmin/css“ Ordner:

Fileadmin CSS
image-83

Fileadmin CSS

Man kann sicherlich auch alles in eine CSS Datei packen aber das Handling ist bei komplexeren Webseiten mit unterschiedlichen Spalten so einfacher. Schließlich erstelle ich noch eine leere CSS Datei mit dem Namen „stylesheet.css“.

Das HTML Template

Da die Webseite responsiv sein soll, nutze ich HTML5 zur Auszeichung. Hier stehen mir einige neue Tags wie

<header>, <nav>, <article>, <footer>

zur Verfügung, die Seiten zukünftig für mobile Geräte besser strukturieren sollen. Im Prinzip sieht die Struktur so aus:

HTML Struktur
image-84

HTML Struktur

Da Typo3 den Head Bereich der Seite bereits mitbringt beginnen wir das Template innerhalb des Body Tags:

<!--###DOKUMENT### begin-->
 <div class="center">


 </div>
<!--###DOKUMENT### end-->

Der div mit der Klasse „center“ umschließt alle Inhalte. Darin setzen wir den Header Tag mit dem Logo Marker und der Navigation.

<!--###DOKUMENT### begin-->
 <div class="center">
   <header>
     <div class="horizontal_middle">
        <div class="as-moll">###LOGO###</div>
        <nav class="nav-collapse">###MENU###</nav>
     </div>
   </header>

 </div>
<!--###DOKUMENT### end-->

Im folgenden Bereich kommt der eigentliche Inhalt mit den beiden Spalten. Diesen werden die Marker ###MIDDLE### und ###SIDE### zugeordnet und später mit den Spalten im Typo3 Backend verknüpft. Um ###MIDDLE### setze ich noch den Article Tag:

<!--###DOKUMENT### begin-->
 <div class="center">
   <header>
     <div class="horizontal_middle">
       <div class="as-moll">###LOGO###</div>
       <nav class="nav-collapse">###MENU###</nav>
     </div>
   </header>
  <div class="section group">
   <div class="col span_2_of_3"><article>###MIDDLE###</article></div>
   <div class="col span_1_of_3">###SIDE###</div>   
  </div>

 </div>
<!--###DOKUMENT### end-->

Bleibt der Footer:

<!--###DOKUMENT### begin-->
 <div class="center">
   <header>
    <div class="horizontal_middle">
      <div class="as-moll">###LOGO###</div>
      <nav class="nav-collapse">###MENU###</nav>
    </div>
   </header>
  <div class="section group">
   <div class="col span_2_of_3"><article>###MIDDLE###</article></div>
   <div class="col span_1_of_3">###SIDE###</div>   
   </div>
   <footer>
    <nav class="footer_nav">
     <div class="footer_nav_items">###FOOTER###</div>
    </nav>
   </footer>
 </div>
<!--###DOKUMENT### end-->

Diese Datei speichere ich als template.html in den „fileadmin“ Ordner ab.

HTML Template
image-85

HTML Template

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.