Responsive Design mit Grid-System
Mit der Thematik Responsive Design beschäftige ich mich nun seit über einem ganzen Jahr. Es gibt dazu verschiedene Ansätze um immer wenn es um Responsive Design geht das gleiche Ziel zu erreichen. Dieses Ziel besteht darin eine Internetpräsenz optimiert für das jeweilige Endgerät bzw. für die jeweilige Viewports bereitzustellen.
Eine möglichst einfache und strukturell ansprechende Lösung ist mit einem Gridsystem realisiert. Dieses bietet sich auch prima an, wenn eine vorhandene Internetpräsenz bereits existiert und diese durch den neuen Design-Standard Responsive Webdesign erweitert werden soll. Sorge um eine vorhandene „Desktop“-Darstellung ungewollt mit Fehlern bei der Layouterweiterung zu haben, muss man nicht haben.
Um die Lösung mit dem Grid-System umzusetzten, definiert man zunächst die Breakpoint bzw. Layoutstufen. Breakpoints sind die Pixelgrenzen, an dem sich das Layout in den bestimmten Layoutstufen ändern soll. In folgendem Beispiel werden mit Media-Queries die Breakpoints gesetzt. Je Media-Query werden Klassen definiert, die zugleich die Anzahl der (imaginären) Spalten vorgeben.
Der erste Abschnitt, die Klasse „large“, dient die Definition der Desktop-Darstellung über 995px. Ebenso werden darin die Klassen je nach Rastergröße abgebildet. Nehmen wir an, es gibt 5 Spalten in der Darstellung über 995px, so werden die 100% maximaler Breite wie folgt aufgeteilt.
@media screen and (min-width: 995px) {
.large-0 {display:none;}
.large-1 {float:left; width: 20%;}
.large-2 {float:left; width: 40%;}
.large-3 {float:left; width: 60%;}
.large-4 {float:left; width: 80%;}
.large-5 {float:left; width: 90%;}
}
Die beiden anderen Darstellungen können z.B. so aussehen. Für die medium-Darstellung verwenden wir ein 4-Spalten-Raster, in der small-Darstellung sollten wir mit 2 Spalten auskommen.
@media screen and (max-width: 995px) {
.medium-0 {display:none;}
.medium-1 {float:left; width: 25%;}
.medium-2 {float:left; width: 50%;}
.medium-3 {float:left; width: 75%;}
.medium-4 {float:left; width: 100%;}
}
@media screen and (max-width: 800px) {
.small-0 {display:none;}
.small-1 {float:left; width: 50%;}
.small-2 {float:left; width: 100%;}
}
Allerdings muss noch die Klasse „row“ hinzugefügt werden, da wir das Floating von Gruppen von Seitenelemente teilweise nicht wünschen. Das können z.B. verschiedene Boxen im Inhaltsbereich sein, wenn sich ein Footer nicht rechts neben einer Box platzieren soll.
.row {clear: both;}
Jetzt werden die HTML-Elemente in das Raster platziert. Dazu picken wir eine linke, vertikale Navigationsleiste heraus und verwenden folgenden Klassenaufruf im Navi-Container:
...class=“navigation large-1 medium-2 small-2“
So wird die Navigationsspalte in einer Spalte in der „large“-Darstellung (20%), 2 Spalten in der „medium“-Darstellung (2×25%=50%) sowie 2 Spalten in der „small“-Darstellung (2×50%=100%) präsentiert. Eine Änderung der Breite der jeweiligen Seitenelemente in den jeweiligen Darstellungen ist somit zügig korrigiert.
Selber muss ein Grid-System, wie wir es oben definiert haben, nicht erstellt werden. Dazu gibt es diverse CSS-Frameworks wie Bootstrap, Foundation und 960Grid, die diese Arbeit abnehmen können.