• sketch.media Blog Der Blog von sketch.media

Die Grundstruktur einer Webseite und "best practises" mit CSS haben sich in den letzten Jahren im Webdesign stark verändert. Moderne Seiten werden nicht mehr mit einem starren Layout gebaut, sondern müssen flexibel an die Geräte des Nutzers angepasst werden. 

Struktur mit einem Grid erzeugen

Um eine moderne Seite mit einem responsive Layout zu entwefen, benötigt man ein Grid-System, damit man nicht unzählige Regeln für Anpassungen bei bestimmten Bildschirmbreiten schreiben muss. Wenn klar vordefiniert ist, was ab einer bestimmten Bildschirmbreite passieren soll, ist es nicht nötig einzelne Media Queries zu erstellen.

Unter einem Media Query versteht man somit eine CSS-Regel, die ab einer bestimmten Auflösung ausgeführt wird.

Beispiel für ein Grid

 
 
 
 

Verkleinert man das Browserfenster, ordnen sich die oberen Blöcke neu an. Zuerst werden 4 in einer Reihe dargestellt. Reduziert man den Bildschirm auf eine Tablet-Breite, erscheinen 2 Blöcke nebenainander. Auf Handy-Breite ist schließlich nur noch ein Block zu sehen. Die meisten user scrollen intuitiv nach unten. Horizontales Scrollen ist nicht erwünscht. Um auf einem Mobilgerät mit 320px Breite noch alles klar darzustellen, ist es erforderlich, die Inhalte untereinander anzuordnen.

Was passiert beim Grid?

Wie man oben erkennen kann, passen sich die einzelnen Blöcke den jeweiligen Geräten an. Dazu werden (grob) folgende Regeln verwendet:

  • Blöcke sollen auf Desktop-Geräten 25% Breite haben
  • Blöcke sollen auf Tablets (von 480px bis 724px) 50% Breite haben
  • Blöcke sollen auf Handys (bis 320px) 100% Breite haben

Natürlich werden hier ebenfalls, wie oben erwähnt, Media Queries verwendet. Der Unterschied ist jedoch, dass man nicht für jedes neue Element auf der Seite eine eigene Regel für den korrekten Umbruch schreiben muss, sondern diese von Anfang an semantisch im HTML-Code festlegen kann. 

Jeder Block aus dem Beispiel verwendet folgenden HTML-Code:

...

<div class="columns large-3 medium-6 small-12">
<div style="background-color: #333; min-height: 50px; margin-bottom: 24px;">&nbsp;</div>
</div>

...

Die Gridstruktur

Das Grid wird in 12 Blöcke unterteilt und für jede Breite wird eine eigene CSS-Regel angelegt. Der Selektor "large-X" steht für Desktop, "medium-X" für Tablet und "small-X" für Handy. Die Zahl dahinter für die Anzahl an Spalten in einem 12-Spalten-Raster, d.h. ein Block ist 1/12 oder 8,33% breit.

Anwedung auf das Beispiel

  • large-3 = Auf Desktop soll der Block 3/12 oder 25% Breite haben
  • medium-6 = Auf Tablets soll der Block 6/12 oder 50% Breite haben
  • small-12 = Auf Mobilgeräten soll der Block 12/12 oder 100% Breite haben

Dieser Artikel gibt einen groben ersten Einblick in eine responsive Seitenstruktur. Im nächsten Artikel befassen wir uns mit den Möglichkeiten von CSS und damit, wie man eine Seite mit Effekten verschönern kann.

Beitragsreihe CSS

Dieser Artikel ist Teil einer längeren Beitragsreihe zum Thema CSS. Folgende Themen sollen vorgestellt werden: