Responsive Webdesign mit Compass, Sass und Drupal
Warum es sinnvoll ist für Response Webdesign mit dem 960 Gridsystem von Compass zu arbeiten und nicht die originale 960gs Version zu benutzen.
Vorraussetzung zum Verständnis ist Erfahrung mit dem 960gs und Compass bzw. SASS
Grid Systeme sind meiner Meinung nach großartig und ich kann mir kein Webdesign mehr ohne sie vorstellen. Sie erleichtern die Arbeit und schaffen ein stabiles Gerüst für jede Webseite. Aber sie haben auch einen großen Nachteil, der sich besonders im Bereich Responsive Webdesign bemerkbar macht, und dieser ist, das sich die Layout-Informationen im HTML Quellcode befinden.
Als Beispiel ein kleiner Codeschnipsel wie man ihn auch auf der Webseite von 960gs findet.
...
...
...
...
Warum ist das ein Problem?
Responsive Webdesign bedeutet das sich die Webseite dem Endgerät des Benutzers anpasst. Da aber die Layoutangaben fest im Code verankert sind kann sich die Webseite schlecht verändern. Wenn Sie an dieser Stelle aufschreien "aber es gibt doch das Fluid Grid" - natürlich kann sich dieses Aufgrund seiner prozentualen Größenangaben an verschiedene Auflösungen anpassen. Selbstredend ist es auch Hauptbestandteil eines Responsive Webdesigns - aber es löst nicht alle Probleme. Ich möchte das an folgendem genauer erläutern.
Beachten Sie obiges Beispiel: Wir sehen hier ein mehrspaltiges Layout welches sich je nach Endgerät verändert. Also von insgesamt vier Spalten auf dem Desktop bis hin einer Spalte auf dem Smartphone.
Wenn nun, wie bereits erwähnt, die Layout Angaben im HTML Code stehen ist es sehr umständlich von der Desktopversion zu der auf dem Smartphone zu gelangen. Schöner wäre es doch eigentlich wenn unser HTML wie im folgenden Beispiel aussehen würde (und für alle Versionen bestehen bleibt):
...
...
Die Lösung des Problems ist nun eigentlich recht einfach und heißt Compass (wenn man mal die ersten Hürden mit Compass und SASS genommen hat). Denn, und das ist das geniale, mittels Compass und SCSS schreibt man die Angaben für das Grid in die Stylesheet Datei. Hier ein Beispiel:
@import "960/grid";
$ninesixty_columns: 16;
#page {
@include grid_container;
}
#header {
@include grid(16);
}
#navigation {
@include grid(3);
@include alpha;
}
#main-content {
@include grid(10);
@include omega;
}
.sidebar {
@include grid(3);
@include omega;
}
#footer {
@include grid(16);
}
Wo liegt nun der Vorteil für das responsive Webdesign?
Grundvoraussetzung ist es mit dem "mobile First" Ansatz zu arbeiten d.h. Man erstellt zuerst die SCSS-Datei für die mobile Version und baut dann auf dieser auf. Sinnvoll wäre z.B. folgende Aufteilung:
mobile.scss
tablet.scss
desktop.scss
Da man für die mobile Version im Prinzip gar kein Grid benötigt bzw. nur eine Spalte hat, kann man entweder das 960gs erst in der Tablet Version laden oder andere Angaben machen.
mobile.scss:
#page {
width: 100%;
}
#header {
}
#navigation {
}
#main-content {
}
.sidebar {
}
#footer {
width: 100%;
}
Bei der Version für Smartphones wird das Grid nicht geladen sondern das äußere Element auf 100% gesetzt. Die anderen Elemente passen sich entsprechend an, deswegen hier exemplarisch leer gelassen, da Breitenangaben nicht unbedingt relevant sind.
tablet.scss:
@import "960/grid";
$ninesixty_columns: 16;
#page {
@include grid_container;
}
#header {
@include grid(16);
}
#navigation {
@include grid(6);
@include alpha;
}
#main-content {
@include grid(10);
@include omega;
}
.sidebar {
@include grid(16);
@include omega;
}
#footer {
@include grid(16);
}
Erst bei der Version für die Tablets wird das 960gs mittels @import "960/grid"; geladen. Der Vorteil: das Framework wird nur da geladen wo tatsächlich gebraucht wird. Also werden den Smartphone Benutzern unnötige Kb erspart. Man sieht hier, das die Navigation links neben dem Inhalt stehen wird (ein zweispaltiges Layout) und die Sidebar unterhalb erscheint.
Wie dann die Desktop Version aussehen könnten ist bei dem ersten Codebeispiel bereits gezeigt. Das Layout ändert sich also je nach Gerät von einer Einspaltigen über einr Zweispaltige bis hin zu einer Dreispaltigen Aufteilung.
Das ganze hier ist nur ein ganz grobes Beispiel um die Idee zu skizzieren. Wer sich schon mal mit dem Thema beschäftigt hat wird sicherlich die Vorteile erkennen und bereits die ersten Ideen für einen weiteren Einsatz haben.