Zeige alle Blogbeiträge

Responsive Contao - Vortrag auf dem Contao-Nordtag

 (Kommentare: 2) | Beitrag empfehlen auf 

Responsive Contao - das neue CSS-Framework

Am 2. März 2013 habe ich auf dem Contao-Nordtag in Hamburg einen Vortrag zum Thema »Responsive Contao - das neue CSS-Framework« gehalten. Die Folien zur Präsentation gibt es jetzt hier als PDF zum Download. 

Wer den Vortrag gesehen hat, dem werden die Folien wieder einiges ins Gedächtnis rufen. Ohne den Vortrag dazu sind die Folien wahrscheinlich nicht selbst erklärend, vielleicht aber trotzdem einen Blick wert. 

Die Datei ist bis jetzt 6485 Mal heruntergeladen worden. 

In der Präsentation gibt es folgende Abschnitte: 

  • Einführung
  • Das CSS-Framework 
  • Der Layout-Builder mit Holy Grail
  • Der Layout-Builder ohne Holy Grail 
  • Mobile Seitenlayouts 
  • Fazit

Das Fazit ist natürlich, dass man mit Contao ziemlich gut arbeiten kann Zwinkernd 

1. Einführung

In der Einführung werden einige Phasen der Entwicklung des Webdesign vorgestellt. Der Nordtag war eine Art Veteranentreffen, denn fast alle kannten noch das Layouten mit HTML-Tabellen. 

Nach den einleitenden Worten wurde der Begriff "Responsive" vorgestellt, der ja durchaus verschiedene Bedeutungen haben kann. Dieser Abschnitt endete mit einem Zitat von Großmeister Zeldman, der den Begriff etwas weiter fasst als Erfinder Ethan Marcotte. 

Während "Responsive Webdesign" auf einer HTML-Basis ("one size fits all") basiert, geht der "RESS"-Ansatz einen Schritt weiter und bezieht server-seitige Komponenten mit ein. Contao bietet uns drei Komponenten, von denen in diesem Vortrag zwei kurz vorgestellt werden: 

  1. Den Layout-Builder, der von Haus aus ein bisschen responsive ist. 
  2. Mobile Seitenlayouts, die es ermöglichen, ganz oder teilweise anders HTML auszuliefern.
  3. Das Responsive Grid, das auch grid-basierte Layouts ermöglicht. 

2. Das CSS-Framework

Im Backend findet man das CSS-Framework in der Abteilung "Seitenlayouts". Es besteht aus den folgenden Komponenten: 

  • Layout-Builder 
  • CSS-Reset 
  • Responsive Grid 
  • Formulare 
  • TinyMCE-Stylesheet 

In der Präsentation auf dem Contao-Nordtag wurde nur der Layout-Builder etwas detaillierter vorgestellt. 

3. Der Layout-Builder mit Holy Grail

Im CSS-Framework von Contao 3 kommt der "Holy Grail" zum Einsatz. Das ist eine bestimmte Layout-Technik, die es ermöglicht, dass im Quelltext der Container #main vor den Seitenspalten #left und #right kommt und dass er auf dem Bildschirm trotzdem in der Mitte steht. 

In der Präsentation wurde die Funktionsweise des Holy Grail detailliert vorgestellt, denn diese Mischung aus relativer Positionierung und negativem Margin führt oft zu vielen Verwirrungen und Mißverständnissen, auch wenn der Erfinder Matthew Levine es als "very simple CSS" bezeichnet. 

4. Der Layout-Builder ohne Holy Grail

Wenn der Viewport kleiner als 768px wird, reagiert der Layout-Builder und setzt das CSS für den Holy Grail zurück und stellt die drei Inhaltsspalten untereinander dar. 

5. Mobile Seitenlayouts

Man kann also auch ohne mobile Seitenlayouts flexible Seiten bauen, die auch auf einem mobilen Gerät gut nutzbar sind. Die mobilen Seitenlayouts sind dann sinnvoll, falls man für mobile Geräte ganz oder teilweise anderes HTML benötigt. 

So könnte man mit mobilen Seitenlayouts problemlos andere Navigationsmodule servieren oder einen Button zum "Jetzt anrufen!". 

6. Fazit

Der Layout-Builder ist also schon von Haus aus ein klein bisschen responsive, allerdings gibt es bei einem 960px breiten, statischen Layout bei Viewports zwischen 768px und 979px einen horizontalen Scrollbalken.

Wenn man den Wrapper nicht in px definiert, sondern auf eine Breite von ungefähr 90% setzt, wird dieses Problem behoben und man hat im Browser mit wenig Aufwand ein Layout, dass sich sehr flexiblel anpasst. Möglich wird dies durch die flexible Inhaltsspalte #main, die eine Breite von 100% hat.

Perfekt wird dieses Setup durch ein max-width für den Wrapper, um auf großen Bildschirmen ein Limit für die Breite zu setzen. Im CSS sieht das dann zum Beispiel so aus:

/* Layout flexibel machen */ 
#wrapper {
  width:90%; 
  max-width: 960px;
}

Die Zusammenfassung sieht dann etwa so aus: 

  1. Der Layout-Builder 
    • enthält den "Holy Grail" 
    • optimiert die Darstellung für kleine Bildschirme mit einer Media Query 
    • ermöglicht "responsive Webdesign" 
    • reicht für viele Websites völlig aus. 
  2. Mobile Seitenlayouts
    • ermöglichen anderes HTML für mobile Geräte (Frontend-Module) 
    • ermöglichen spezielle Stylesheets für mobile Geräte 
  3. Das Responsive Grid 
    • ermöglicht responsive Grid-Layouts (12 Spalten) 
    • machen wir dann ein anderes Mal. 

Viel Spaß beim Anschauen der Folien und noch einmal vielen Dank an Nils Müller und Joe Ray Gregory für das Veranstalten des Contao-Nordtages

Responsive Contao - Buch und Seminar

Falls Sie die in diesem Workshop gezeigten Themen interessant finden, es gibt dazu auch ein Buch und ein Seminar: 

Die Seminare werden von BOLDT-MEDIA in Aachen (Seminarfahrplan) organisiert. 

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.

Zeige alle Blogbeiträge

Kommentare

Kommentar von robert |

Die Folien waren auch ohne den Vortrag anschaulich. Danke, es hat meinem Verständnis für das CSS-Framework von contao geholfen.

Kommentar von Hartmut Kehr |

Vielen dank für den sehr hilfreichen vortrag. Nun ist mir der layoutbuilder nicht mehr so undurchsichtig. 8-)

Antwort von Peter Müller

Vielen Dank für Ihre Rückmeldung, und es freut mich, dass der Vortrag auch zwei Jahre nach Erscheinen noch hilfreich ist Zwinkernd

Einen Kommentar schreiben

Bitte füllen Sie alle Formularfelder mit einem Sternchen aus.