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.
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.
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 serverseitige Komponenten mit ein.
Contao bietet drei Komponenten, von denen in diesem die ersten beiden kurz vorgestellt werden:
- Den Layout-Builder, der von Haus aus ein bisschen responsive ist.
- Mobile Seitenlayouts, die es ermöglichen, ganz oder teilweise anders HTML auszuliefern.
- Das Responsive Grid, das auch grid-basierte Layouts ermöglicht.
2. Das CSS-Framework von Contao 3
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:
[css]/* Layout flexibel machen */
#wrapper {
width:90%;
max-width: 960px;
}[/css]
Die Zusammenfassung sieht dann etwa so aus:
- 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.
- Mobile Seitenlayouts
- ermöglichen anderes HTML für mobile Geräte (Frontend-Module)
- ermöglichen spezielle Stylesheets für mobile Geräte
- 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.