Responsive Design

Umsetzung mit Hilfe eines Grid Systems

veröffentlicht am: 28.05.13, Autor: Peter Scheel

Responsive Design mit einem Grid System umsetzen

Wer heute einen neuen Webauftritt umsetzen und dabei auf unterschiedliche Gerätetypen (wie Smartphones , Tablets und Desktop PCs) Rücksicht nehmen will, der hat die Qual der Wahl, wie er dies verwirklicht.

Einen Einstieg und vor allen Dingen die Motivation hierzu habe ich bereits in meinem Artikel ein Internetauftritt für alle Gerätetypen beschrieben.

Layout mit mehreren Spalten

Meist besteht ein Layout aus mehreren Spalten unterschiedlicher Breite und wechselnder Anzahl. Diese Spalten müssen sich zwangsläufig an die vorhandene Browserfensterbreite anpassen, will man ein formatfüllendes Erscheinungsbild erreichen. Nun leuchtet jedem ein, dass ein mehrspaltiges Layout auf einem smartphone (zumindest im portrait-modus) wenig Sinn macht. Das bedeutet, man muss sich Gedanken machen, wie sich die Spaltenanordnung bei unterschiedlicher Browserfensterbreite verändert. Man ist gut beraten, wenn man sich diese Gedanken VOR der Umsetzung macht und hierzu auch auf "altmodische Hilfsmittel", wie Papier und Bleistift zurückgreift.

Ein Grid System nutzen

Sind diese ersten Schritte zur eigenen Zufriedenheit durchgeführt, geht es an die Umsetzung. Ich möchte in diesem Zusammenhang Ihnen einmal exemplarisch diese Umsetzung an hand eines Grid System zeigen. Ich möchte Ihnen das Responsive Grid System von Graham Miller vorstellen. Es gibt viele weitere dieser Art. Aber die Umsetzung dieses Systems ist verblüffend einfach und sehr einfach nachzuvollziehen.

section und group

Es gibt 2 definierte CSS Klassen .section und .group, die Ihnen helfen, Ihre Seite in horizontale Anschnitte zu unterteilen. Unterschiedliche Spaltenanzahlen führen hierbei immer zu einem neuen horizontalen Anschnitt.

col und span_n_of_m

Die Klassen .col und mehrere .span_n_of_m sorgen dann für die Spalten innerhalb der horizontalen Abschnitte.

Ein Beispiel

Ein Beispiel verdeutlicht es vielleicht besser: Bilden wir einen horizontalen Abschnitt mit 4 gleichgroßen Spalten:

<div class="section group">
   <div class="col span_1_of_4">Spalte 1</div>
   <div class="col span_1_of_4">Spalte 2</div>
   <div class="col span_1_of_4">Spalte 3</div>
   <div class="col span_1_of_4">Spalte 4</div>
</div>

Im "Normalfall" werden diese 4 Spalten alle in einer nebeneinander dargestellt und teilen sich die verfügbare Breite mit jeweils ungefähr 25% der Fläche. Möchte man bei kleineren Browserbreiten nun dieses Layout umbrechen, z.B. in ein 2-spaltiges Layout, muss man einen sogenannten breakpoint definieren. Mit einer CSS Anweisung ist dies schnell möglich. Hierzu muss man die CSS-Klasse .span_1_of_4 umdefinieren - und zwar abhängig von der defnierten Browserbreite. Das geht am einfachsten mit media queries. Also z.B:

@media only screen and (max-width: 800px)
{
   .span_1_of_4
   {
      width: 50%;
   }

Auf der Internetseite von Graham Miller finden Sie hierzu viele weitere Beispiele.

Fröhliches Coden!

 

Blogverzeichnis - Blog Verzeichnis bloggerei.de Bloggeramt.de