Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 8 Layout und Raster
Pfeil 8.1 Anatomie einer Webseite
Pfeil 8.1.1 Der Header-Bereich
Pfeil 8.1.2 Der Inhaltsbereich
Pfeil 8.1.3 Die Fußleiste
Pfeil 8.1.4 Der umgebende Block
Pfeil 8.2 Wireframes erstellen
Pfeil 8.2.1 Papier-Wireframes
Pfeil 8.2.2 Gezeichnete Wireframes
Pfeil 8.2.3 Digitale Wireframes
Pfeil 8.2.4 Die Graue-Box-Methode
Pfeil 8.2.5 Vorteile und Grenzen von Wireframes
Pfeil 8.3 Raster – Grundlagen
Pfeil 8.3.1 Bedeutung
Pfeil 8.3.2 Layoutgrundlagen
Pfeil 8.3.3 Rastersysteme
Pfeil 8.4 Ein eigenes Raster anlegen
Pfeil 8.4.1 Spalten und Spaltenabstand
Pfeil 8.4.2 Rastergestaltung in Photoshop
Pfeil 8.4.3 Raster mit HTML und CSS umsetzen
Pfeil 8.4.4 Eigene Webseitenlayouts
Pfeil 8.4.5 Interaktive Prototypen
Pfeil 8.5 Layouts gestalten
Pfeil 8.5.1 Komposition und Hierarchie
Pfeil 8.5.2 Layoutstrukturen
Pfeil 8.5.3 Weißraum
Pfeil 8.5.4 Above the Fold
Pfeil 8.5.5 Scrollen oder klicken – das ist hier die Frage
Pfeil 8.5.6 Das Raster brechen – out of the Box
Pfeil 8.5.7 Layoutprinzipien
 
Zum Seitenanfang

8.4    Ein eigenes Raster anlegen Zur vorigen ÜberschriftZur nächsten Überschrift

Im Folgenden soll ein eigenes kleines responsives Rastersystem angelegt werden. Es soll eine einfache Basis sein, um damit die Grundstruktur einer Webseite erstellen zu können. Es wird aber sicherlich keine allgemeingültige Lösung, genauso wenig wie die vorgefertigten Rastersysteme eine sind. Das Raster soll möglichst responsiv und nicht »nur« anpassungsfähig sein, daher werden wir Prozentwerte einsetzen. Damit das Raster – und folglich später die Webseite – aber nicht zu breit wird, definieren wir eine Obergrenze von 1.200 Pixeln. So wird auf großen Monitoren nicht zu viel Platz verschenkt, gleichzeitig werden die Spalten nicht zu breit. Bei kleineren Monitoren werden sich die Breiten dann aufgrund der Prozentangaben entsprechend anpassen bzw. verkleinern. Die Abstände zwischen den Spalten werden wir auch in Prozentwerten angeben. Alternativ wären Pixel- oder em-/rem-Werte sinnvoll. em bzw. rem-Werte richten sich nach der Standardschriftgröße (meistens 16 Pixel). Pixelwerte sind eben fix und werden daher gerne eingesetzt, da das Ergebnis klar vorhersehbar ist, widersprechen aber einem möglichst flexiblen Raster. Wir werden die Abstände daher auch in Prozentwerten angeben.

 
Zum Seitenanfang

8.4.1    Spalten und Spaltenabstand Zur vorigen ÜberschriftZur nächsten Überschrift

Das Raster soll insgesamt über sechs Spalten verfügen, damit es nicht so umfangreich (und kompliziert) ist wie die meisten Rastersysteme mit zwölf oder gar 16 Spalten. Sechs Spalten bieten aber noch einigen Gestaltungsspielraum (siehe Kasten). Die einzelnen Spalten bekommen einen horizontalen Abstand. Links und rechts sollen die einzelnen Spalten jeweils 2 % Abstand von der Gesamtgröße haben. Bei einer maximalen Weite von 1.200 Pixeln sind dies in der größten Darstellung also 24 Pixel (1.200 × 0,02 = 24).

Auch die Prozentangaben lassen sich für die verschiedenen Auflösungen in Pixelwerte umrechnen. Dies hat zumindest dann Sinn, wenn Pixelangaben gebraucht werden, z. B. bei der Umsetzung des Rasters in einem Grafikprogramm. Für jede denkbare Auflösung wäre es sicherlich unnötig und sehr viel Arbeit. Denn hier stoßen wir ja auch an die Grenzen einer responsiven Webseite und der Arbeit mit einem Grafikprogramm, das für flexible Raster und Webseiten nicht ausgelegt ist. Daher soll die klassische Desktop-Ansicht mit der maximalen Breite von 1.200 Pixeln als Vorlage angelegt werden. Dafür wird der Prozentwert bei einer Darstellung von 1.200 Pixeln in Pixelwerte umgerechnet. Sechs Spalten mit jeweils 2 % Abstand links und rechts ergeben folgende Pixelwerte:

Sechs Spalten – aufgeteilt auf 1.200 Pixel

Abbildung 8.38    Sechs Spalten – aufgeteilt auf 1.200 Pixel

Spaltenabstände

Wie breit die Abstände zwischen zwei Spalten sein sollten, ist vor allem vom späteren Inhalt abhängig. Stehen zwei Bilder nebeneinander, mögen wenige Pixel schon ausreichen, um diese als getrennte Elemente zu erkennen. Bei zwei Textblöcken sieht das anders aus. Der Abstand sollte so groß sein, dass der Leser nicht in Versuchung gerät, in der nächsten Spalte weiterzulesen, anstatt in die nächste Reihe zu wechseln. Typischerweise werden Abstände zwischen 20 und 50 Pixeln gewählt. Diese sollten aber immer im konkreten Fall individuell überprüft werden. Denn der notwendige Abstand hängt auch von der Schriftgröße und -art ab.

Zwischen den Spalten addieren sich die 2 % Außenabstand zu insgesamt 4 % Abstand. Dies sind 48 Pixel, ein angenehmer Abstand, wenn wir uns vorstellen, dass die Spalten mit Texten gefüllt sind. So wird später jede Spalte als eigene erkennbar sein, und die Texte in zwei Spalten werden nicht zu nahe beisammenstehen. Aus diesen sechs Spalten lassen sich dann verschiedene Varianten mit Containern umsetzen, die über mehrere Spalten gehen und deren Breiten sich nun mithilfe der oberen Pixelangaben ganz leicht ausrechnen lassen.

Aus Containern, die sich über mehrere Spalten erstrecken (oben), lassen sich dann individuelle Anordnungen erstellen (unten).

Abbildung 8.39    Aus Containern, die sich über mehrere Spalten erstrecken (oben), lassen sich dann individuelle Anordnungen erstellen (unten).

 
Zum Seitenanfang

8.4.2    Rastergestaltung in Photoshop Zur vorigen ÜberschriftZur nächsten Überschrift

Das Raster soll zunächst in einem Grafikprogramm als Vorlage für künftige Screendesigns angelegt werden – in diesem Fall mit Adobe Photoshop. Als Voraussetzung ist Photoshop auf die Einheit Pixel eingestellt, sodass wir loslegen können:

Varianten eines Sechsspalters

Auch mit einem kleinen Raster, das auf sechs Spalten beruht, gibt es einige Gestaltungsvariationen.

1-1-1-1-1-1

2-2-2

4-2

3-3

1-5

1-4-1

1-3-2

Jede Zahl steht für die Breite eines Elements in Spalten.

Schauen Sie sich dazu auch Abbildung 8.39 an.

SCHRITT FÜR SCHRITT

Raster in Photoshop anlegen

Neues Dokument anlegen

Zuerst erstellen wir eine neue leere Photoshop-Datei über DateiNeu. Die erste Überlegung wäre, als Breite der Bilddatei die Breite des Rasters, also 1.200 Pixel, zu nehmen. Die Bedeutung des umgebenden Blocks haben Sie ja bereits in diesem Kapitel kennengelernt. Dieser Bereich sollte in Photoshop schon eingeplant und gestaltet werden, um seine Wirkung auf das Gesamtdesign beurteilen zu können. Daher werden wir die Breite vergrößern und an beiden Seiten 200 Pixel hinzufügen, sodass die Gesamtbreite 1.600 Pixel 1 (siehe Abbildung 8.40) beträgt. Die Höhe sollte so groß sein, dass man beim Gestalten nicht zu schnell an das untere Ende gelangt. Notfalls lässt sich die Höhe (wie auch die Breite) über das Menü BildArbeitsfläche erweitern später noch anpassen. Wir wählen hier 1.200 Pixel 2 für die Höhe.

In Photoshop wird ein neues Dokument angelegt, das als eigene Rastervorlage dienen soll. Der Name wird später der Vorschlag für den Dateinamen beim ersten Abspeichern.

Abbildung 8.40    In Photoshop wird ein neues Dokument angelegt, das als eigene Rastervorlage dienen soll. Der Name wird später der Vorschlag für den Dateinamen beim ersten Abspeichern.

Die Auflösung 3 ist vor allem für Printdateien interessant und kann bei 72 Pixel/Zoll bleiben. Als Farbmodus ist RGB (8 Bit) 4 genau richtig. Und Hintergrundinhalt 5 definiert das Aussehen der vorhandenen ersten Ebene. Weiss ist hier nie verkehrt.

Design-Vorlagen

Bei den vorgefertigten Frameworks sind meistens schon Design-Vorlagen für unterschiedlichste Programme vorhanden, unter anderem eine PSD-Datei. Bei vielen Grid-Kalkulatoren lassen sich zumindest PNG-Dateien als Vorlage herunterladen.

Hilfslinien fürs Raster anlegen

Um aus der Photoshop-Datei eine Rastervorlage zu machen, bietet sich die Arbeit mit Hilfslinien an. Diese lassen sich von Hand erstellen, indem sie aus den Linealen (AnsichtLinale) mit gedrückter linker Maustaste »herausgezogen« werden. Photoshop bietet auch die Möglichkeit, ein Raster über BearbeitenVoreinstellungenHilfslinien, Raster und Slices zu erstellen. Über AnsichtAnzeigenRaster können Sie dieses ein- und ausblenden.

Das Photoshop-Raster erzeugt graue Hilfslinien, die sich aber nicht einzeln anpassen lassen.

Abbildung 8.41    Das Photoshop-Raster erzeugt graue Hilfslinien, die sich aber nicht einzeln anpassen lassen.

Photoshop-Raster

Das Photoshop-eigene Raster ist für die Gestaltung eines Screendesigns nur bedingt tauglich. Die Einstellungsmöglichkeiten sind viel zu gering, als dass man sinnvoll damit arbeiten könnte. Einzig um den vertikalen Abstand zu steuern, setze ich es manchmal gerne ein. Alle 20 Pixel eine Rasterlinie kann bei der Steuerung der vertikalen Abstände zwischen den Elementen behilflich sein.

Raster-Plug-in installieren

Das Photoshop-Raster ist aber wenig flexibel und bietet im Grunde nur die Möglichkeit, einen fixen Abstand zwischen den einzelnen Rasterlinien zu definieren – und das nur verbindlich für alle Abstände gleich. Um nicht alle benötigten Hilfslinien per Hand mühsam erzeugen zu müssen, gibt es ein hilfreiches kostengünstiges (10 US$) Photoshop-Plug-in mit dem passenden Namen GuideGuide (guideguide.me), das vielfältige Einstellungsoptionen bietet. Auf der Webseite finden Sie verschiedene Download-Varianten für die aktuellsten Photoshop-Versionen inklusive einer Installationsanleitung. Wenn der Download und die Installation erfolgreich abgeschlossen wurden, lässt sich das Plug-in über FensterErweiterungenGuideGuide öffnen.

Ohne guideguide.me ist die Rastererstellung in Photoshop mühselig.

Abbildung 8.42    Ohne guideguide.me ist die Rastererstellung in Photoshop mühselig.

Hilfslinienraster erstellen

Mit dem Plug-in können wir nun genau unser Raster mit den benötigten Hilfslinien erstellen. Dazu gibt es folgende Einstellungsmöglichkeiten:

Umfangreiche Einstellungsoptionen beim Photoshop-Plug-in GuideGuide

Abbildung 8.43    Umfangreiche Einstellungsoptionen beim Photoshop-Plug-in GuideGuide

Die oberen vier Icons 6 dienen dazu, die Außenabstände des Rasters zu definieren. Links und rechts sind das 24 Pixel, oben und unten brauchen wie keine Hilfslinien, also null Pixel. In der dritten Reihe 7 wird die Anzahl der Spalten und Reihen angegeben. Wir wollen sechs Spalten haben, und zwei Reihen sind Minimum, damit das Raster erstellt wird. In der vierten Reihe 8 werden die Breiten und Höhen der Spalten und Reihen eingegeben. In der Breite sollen die Spalten jeweils 152 Pixel sein. Reihen wollen wir keine haben, können also null Pixel einsetzen. Die letzte Reihe 9 definiert die Abstände zwischen den Spalten und Reihen – also 48 Pixel (jeweils 24 Pixel links und rechts) horizontal, und die Reihen können wieder auf null gesetzt werden. Der Button Make grid j erzeugt dann unser Raster. Bevor wir diesen aber anklicken, sollte noch eine Kleinigkeit angepasst werden.

Das Raster mittig ausrichten

In der Standardeinstellung wird das Raster immer links oben beginnend ausgerichtet. Dies wäre in Ordnung, wenn das Photoshop-Dokument genau der Breite des Rasters (also 1.200 Pixel) entsprechen würde. Da wir die Bilddatei aber breiter gemacht haben, sollte das Raster mittig ausgerichtet sein. Dazu wählen wir das Einstellungs-Icon k im Plug-in-Fenster aus und wählen dann bei Horizontal position die Option Center l. Jetzt kann das Raster über den Reiter Grid und den großen blauen Button erstellt werden. Als Ergebnis erhalten wir einen Sechsspalter in Photoshop, der uns Gestaltungsspielraum bietet.

Auswahl der Ausrichtung des Rasters

Abbildung 8.44    Auswahl der Ausrichtung des Rasters

Das mit GuideGuide erstellte Raster

Abbildung 8.45    Das mit GuideGuide erstellte Raster

Magnetische Hilfslinien

Die erzeugten Hilfslinien dienen dazu, die Gestaltungsarbeit in Photoshop zu verbessern, Elemente bündig auszurichten und bestimmte feste Breiten einzuhalten, die uns später auch die Umsetzung erleichtern. Damit wir mit dem Raster gut arbeiten können, gibt es die Möglichkeit, die Hilfslinien magnetisch zu machen. Elemente, die den Hilfslinien nahe kommen, werden sozusagen magnetisch angezogen und richten sich dann exakt an diesen aus. Gerade beim pixelgenauen Arbeiten ist das eine sehr hilfreiche Eigenschaft. Unter AnsichtAusrichten an muss vor Hilfslinien ein Häkchen gesetzt sein, ebenso wie vor AnsichtAusrichten.

Zwei Häkchen sorgen dafür, dass die Elemente von den Hilfslinien magnetisch angezogen werden.

Abbildung 8.46    Zwei Häkchen sorgen dafür, dass die Elemente von den Hilfslinien magnetisch angezogen werden.

Spaltenvorlagen erstellen

Für eine bessere Visualisierung des Rasters und als Vorlage für eine spätere Gestaltung können wir mit dem Rechteck-Werkzeug verschiedene Rechtecke erzeugen:

Verschiedene Rechtecke zeigen einzelne Spalten und Varianten.

Abbildung 8.47    Verschiedene Rechtecke zeigen einzelne Spalten und Varianten.

Download

Die fertige Photoshop-Datei »Raster.psd« samt Hilfslinenraster und Rechtecken finden Sie im Ordner BeispielmaterialKapitel_08.

So wird auch deutlich, welche Möglichkeiten das sechsspaltige Raster bietet. Die Gestaltungselemente können über ein, zwei, drei, vier, fünf oder sechs Spalten gehen. Die Möglichkeiten sind natürlich nicht so umfangreich wie bei einem 12-Spalter, aber auf jeden Fall übersichtlicher und für die meisten Webprojekte sicherlich auch ausreichend. In Kapitel 8, »Layout und Raster«, lernen Sie die Möglichkeiten eines solchen Rasters praxisnah kennen.

 
Zum Seitenanfang

8.4.3    Raster mit HTML und CSS umsetzen Zur vorigen ÜberschriftZur nächsten Überschrift

Bevor es an die konkrete Umsetzung des Rasters samt Spalten geht, sollten Sie einige Vorüberlegungen und Voreinstellungen treffen.

CSS-Reset | Jeder Browser hat ein eigenes Browser-Stylesheet, das dafür sorgt, dass jedes HTML-Dokument eine »Grundformatierung« bekommt. In Fällen, in denen ein definiertes Stylesheet, aus welchen Gründen auch immer, nicht geladen wird, ist die semantische Struktur so auch visuell ersichtlich. Allerdings sind die Browser-Stylesheets von Browser zu Browser und teilweise sogar zwischen den Browserversionen unterschiedlich.

So sieht eine Webseite ohne definierte Stylesheets aus. Die semantische Struktur ist dank Browser-Stylesheet trotzdem erkennbar (rheinwerk-verlag.de).

Abbildung 8.48    So sieht eine Webseite ohne definierte Stylesheets aus. Die semantische Struktur ist dank Browser-Stylesheet trotzdem erkennbar (rheinwerk-verlag.de).

Normalerweise werden die Angaben durch eigene CSS-Definitionen überschrieben, aber eben nicht immer und schon gar nicht alle. So hat es sich durchgesetzt, zu Beginn der eigenen Stylesheet-Angaben alle Browser-Styles zu resetten, das heißt sie zurückzustellen. Ein Beispiel dafür sind die Abstände. Die Browser weisen den HTML-Elementen von sich aus Abstände zu, mit einem Reset werden diese auf null gesetzt, was sich schon mit wenig Quellcode erreichen lässt:

* {
margin0;
padding0;
}

Listing 8.5    Die Abstände aller HTML-Elemente wurden auf null gesetzt.

CSS-Reset-Links

Das Reset-CSS von Eric Meyer finden Sie unter: meyerweb.com/eric/tools/css/reset.

Eine Erweiterung ist das HTML5-Reset-Stylesheet samt Erklärung: html5doctor.com/html-5-reset-stylesheet.

Dass Resets aber nicht nur Vorteile haben, zeigt folgender Blogartikel: snook.ca/archives/html_and_css/no_css_reset.

Der Klassiker unter den Resets stammt von Eric Meyer, nennt sich passenderweise »reset.css« und ist recht umfangreich. Hier werden wirklich alle Angaben zurückgesetzt, sodass im Browser alle Elemente erst einmal gleich aussehen, egal ob h1-Überschrift oder Listenpunkt. Anstatt den Quellcode aber 1:1 in das eigene Stylesheet zu kopieren, sollte es eher als Grundlage für eigene Definitionen dienen. Möchten Sie also den Zeilenabstand auf 1.2 setzen, sollten Sie folgende Zeile in der Datei »reset.css« nicht einfach stehen lassen:

body { line-height1; }

Stattdessen können Sie sie gleich in den Reset-Anweisungen anpassen:

body { line-height1.2; }

CSS-Normalisierung | Eine Alternative zum traditionellen CSS-Reset ist die Datei »normalize.css«. Hier werden nicht alle Elemente zurückgesetzt, sondern sie werden genormt bzw. sinnvolle Eigenschaften wie die Abstände vor und nach den Elementen beibehalten. Daher ist dieses Skript effizienter, da Eigenschaften nicht doppelt formatiert werden (müssen).

CSS-Normalize-Links

Die »normalize.css« von Nicolas Gallagher liegt unter: necolas.github.io/normalize.css.

Eine Übersicht über die populärsten CSS-Reset-Skripte samt Download-Möglichkeit erhalten Sie bei cssreset.com.

Box-Modell | Das klassische Box-Modell (siehe Abbildung 8.49) war noch nie besonders intuitiv. Ein Element bekam eine feste Breite (width), dazu mussten aber noch der Innenabstand (padding) und der Rahmen (border) addiert werden, um die Gesamtbreite des Elements zu bestimmen. Dies sorgte für unnötiges Rechnen und war vor allem bei unterschiedlichen Einheiten für die Breite (z. B. Prozent) und die Abstände (z. B. Pixel) nicht mehr zuverlässig berechenbar. Seit einiger Zeit gibt es nun ein alternatives Box-Modell (siehe Abbildung 8.50). Hier sind dann padding und border in der Angabe von width bereits enthalten. Das Modell wird auch border-box genannt, weil sich die Breite des Elements (der Box) von border bis border erstreckt.

Das klassische Box-Modell. Zur Weite werden noch der Innenabstand und der Rahmen addiert.

Abbildung 8.49    Das klassische Box-Modell. Zur Weite werden noch der Innenabstand und der Rahmen addiert.

Das neue Box-Modell: Die Weite enthält schon den Innenabstand und den Rahmen.

Abbildung 8.50    Das neue Box-Modell: Die Weite enthält schon den Innenabstand und den Rahmen.

Breite von Containern

Ein Container hat eine Breite von 200 Pixeln, dazu kommen ein Innenabstand nach allen Seiten von 20 Pixeln und ein Rahmen von einem Pixel. Im klassischen Box-Modell ergeben sich hier 242 Pixel Gesamtbreite (200 + 20 + 20 + 1 + 1). Diese Rechnerei ist wenig praxistauglich. Im neuen Box-Modell dagegen hat der Container einfach die Breite von 200 Pixeln wie zugewiesen. Innenabstand und Rahmen werden dann nach innen berechnet.

Beim alternativen Box-Modell ist es egal, wie viel Innenabstand ein Element bekommt, denn der Wert wird dann von der Breite abgezogen und nicht hinzugefügt. Um mit dem Box-Modell arbeiten zu können, muss folgende Style-Definition erfolgen:

**:before*:after {
    -moz-box-sizingborder-box;
    -webkit-box-sizingborder-box;
    box-sizingborder-box;
}

Listing 8.6    Definition des alternativen Box-Modells

Der sichtbare Bereich eines Elements entspricht jetzt genau der Weitenangabe (width). Fehlt noch der Außenabstand (margin). Der muss bei beiden Modellen jeweils noch dazugerechnet werden – das ist aber völlig normal, denn auf den sichtbaren Bereich eines Elements hat dieser keinen Einfluss.

Floats und Clearings | Fast alle modernen CSS-Layouts werden mit der CSS-Eigenschaft float umgesetzt, um die Elemente zu positionieren. Der normale Elementenfluss für Blockelemente in HTML ist untereinander. Mit float:left oder float:right werden sie aus dem normalen Fluss herausgenommen und können so auch nebeneinander platziert werden. Das Floaten bringt aber ein paar Herausforderungen mit sich. So rutschen manchmal Elemente weiter nach oben, obwohl sie in einer neuen Reihe beginnen sollen. Oder wenn mehrere gefloatete Elemente in einem Elternelement stehen, dann kollabiert dieses. Das heißt, es umschließt nicht mehr die Kindelemente, was optisch meistens nicht gewollt ist.

Artikeltipp Floats

Den empfehlenswerten Artikel »Hilfreiche CSS-Tipps: So bekommst du Floats in den Griff« zum Thema Floats finden Sie unter elmastudio.de/hilfreiche-css-tipps-so-bekommst-du-floats-in-den-griff.

Um das überflüssige Floating und das Kollabieren zu verhindern, gibt es unterschiedliche CSS-Ansätze. Eine häufig eingesetzte Methode besteht darin, ein leeres div-Element einzubauen, mit dem das Floating an einer bestimmten Stelle verhindert werden kann:

<div class="clear"></div>

Listing 8.7    Definition eines clear-Containers in HTML

Und in CSS wird dann Folgendes definiert:

.clear {
    clearboth;
}

Listing 8.8    Die CSS-Anweisung zum Clearen

Die Lösung ist aber bei Weitem nicht optimal, allein schon, weil Struktur und Layout vermischt werden. Eine schöne Lösung stammt von Nicolas Gallagher (nicolasgallagher.com/micro-clearfix-hack), die sogenannte Clearfix-Methode:

.clearfix:before.clearfix:after {
content" ";
displaytable;
}
.clearfix:after {
clearboth;
}
.clearfix {
*zoom1; /* Für IE6 und IE7 */
}

Listing 8.9    Die Clearfix-Methode

Clearing-Methoden

Der Artikel »Clearing Floats: An Overview of Different clearfix Methods« von Sitepoint erklärt übersichtlich die verschiedenen Clearing-Methoden: sitepoint.com/clearing-floats-overview-different-clearfix-methods.

Jetzt kann z. B. ein Elternelement, das gefloatete Elemente enthält, diese aber nicht umschließt, die Klasse .clearfix zugewiesen bekommen:

<div class="footer clearfix">Footer-Inhalte mit gefloateten Containern<div>

Listing 8.10    HTML-Element mit der Klasse clearfix

Bei dieser Methode müssen keine weiteren HTML-Elemente definiert werden.

Reihen und Zwischenräume | Um das ungewollte Floaten oder Kollabieren zu verhindern, werden die einzelnen Spalten in unserem Raster reihenweise in Containern zusammengefasst – eine Methode, die fast alle Rastersysteme anwenden. Die »Reihen«-Container bekommen dann die Clearing-Methode – oder wie in unserem Fall – die oben beschriebene .clearfix-Klasse zugewiesen.

Die einzelnen Spalten sind in Reihen (div-Containern) zusammengefasst.

Abbildung 8.51    Die einzelnen Spalten sind in Reihen (div-Containern) zusammengefasst.

In HTML sieht das dann folgendermaßen aus:

<div class="row clearfix"> Spaltendefinitionen </div>

Listing 8.11    Reihendefinition in HTML mit Clearfix-Methode

Außerdem muss die Frage nach den Spaltenabständen geklärt werden. Soll padding oder margin oder gar ein Kindelement verwendet werden? Die erste Wahl ist der Außenabstand. Die Spalten bekommen einen margin-Wert, der den Abstand zwischen den Spalten festlegt. Es gibt hier keine allgemeingültige Lösung, sondern die Frage muss von Layout zu Layout unterschiedlich beantwortet werden. Wenn die Spalten eine Hintergrundfarbe bekommen sollen, eignet sich padding als Abstandsdefinition nicht, da die Spalten dann direkt aneinanderliegen und dies auch offensichtlich ist. Wird keine Hintergrundfarbe benötigt, ist padding eine hilfreiche Lösung. Denn mit dem Einsatz von box-sizing lassen sich so die Breiten der Spalten viel einfacher berechnen und definieren, da der Innenabstand schon in der Breite steckt. Gerade bei späteren responsiven Anpassungen erleichtert das die Arbeit.

SCHRITT FÜR SCHRITT

Raster in HTML und CSS umsetzen

Im Folgenden werden wir das Raster, das wir auch schon in Photoshop zu Beginn von Abschnitt 8.4.2, »Rastergestaltung in Photoshop«, aufgebaut haben, in HTML und CSS umsetzen.

Download

Das vollständige Raster »index.html«, noch ausführlicher als im Buch dargestellt, finden Sie unter BeispielmaterialKapitel_08Raster.

HTML-Rasterstruktur

Wir werden verschiedene Reihen mit den unterschiedlichen Spaltenvarianten erstellen. Das komplette Layout wird innerhalb eines Wrappers liegen, also eines Containers, der die einzelnen HTML-Elemente beinhaltet und die Gesamtbreite definiert. Dann wird ein Container (.row) definiert, der als Reihe dient und die einzelnen Spalten umschließt. Schließlich kommen sechs einzelne Spalten:

<div class="wrapper">
<div class="row">
<div class="column span_1">
<span>.column .span_1</span>
</div>
<div class="column span_1">
<span>.column .span_1</span>
</div>
<div class="column span_1">
<span>.column .span_1</span>
</div>
<div class="column span_1">
<span>.column .span_1</span>
</div>
<div class="column span_1">
<span>.column .span_1</span>
</div>
<div class="column span_1">
<span>.column .span_1</span>
</div>
</div>
</div>

Listing 8.12    Definition des Sechsspalters samt Wrapper und Reihen-Container

Schauen wir uns eine Spaltendefinition einmal genauer an:

<div class="column span_1">
<span>.column .span_1</span>
</div>

Listing 8.13    Definition einer einzelnen Spalte

Der div-Container bekommt zwei Klassen. .column wird eine allgemeingültige für alle Spalten sein, und .span_1 ist die individuelle Klasse, die die Breite definiert. Das span-Element dient als Platzhalter für einen späteren Inhalt und durch noch zu definierende CSS-Eigenschaften zur Visualisierung der Spalte.

Die CSS-Klassennamen der einzelnen Elemente in unserem Raster

Abbildung 8.52    Die CSS-Klassennamen der einzelnen Elemente in unserem Raster

So lassen sich dann die weiteren exemplarischen Reihen definieren, die innerhalb des Wrappers stehen:

<div class="row">
<div class="column span_2">
<span>.column .span_2</span>
</div>
<div class="column span_2">
<span>.column .span_2</span>
</div>
<div class="column span_2">
<span>.column .span_2</span>
</div>
</div>

Listing 8.14    Definition eines Dreispalters

Der obere Quellcode zeigt drei Container nebeneinander, die jeweils zwei Spalten umfassen. Zwei mal drei macht sechs Spalten – passt also.

Die Klassennamen eines Dreispalters bzw. von Spalten, die sich über zwei einzelne Spalten hinweg erstrecken

Abbildung 8.53    Die Klassennamen eines Dreispalters bzw. von Spalten, die sich über zwei einzelne Spalten hinweg erstrecken

Die weiteren Spaltendefinitionen finden Sie ebenfalls auf der Webseite zum Buch.

Download

Die Datei »styles.css« finden Sie unter BeispielmaterialKapitel_08RasterCSS.

CSS-Grunddefinitionen

In der Stylesheet-Datei werden zuerst ein paar grundlegende Definitionen vorgenommen. Zuerst werden das alternative Box-Modell (siehe vorherigen Abschnitt »Box-Modell«) und die Clearfix-Methode (siehe vorherigen Abschnitt »Floats und Clearing«) aktiviert. Als Nächstes werden dann allgemeine Rastereinstellungen festgelegt:

/* RASTER * * * * * * * * */
.wrapper {
margin0 auto/* Zentriert das Layout */
max-width1200px/* Definiert die maximale Gesamtbreite des Layouts */
text-aligncenter;
padding-top1rem;
}
.row {
background#ddd;
margin-bottom25px;
}
.column{
floatleft/* Floaten der Spalten */
margin-bottom1rem;
/* horizontaler Abstand zwischen den Spalten: */
padding-left1%;
padding-right1%;
}
.column span{
background#13b9f0;
displayblock;
padding1rem;
color#fff;
font-weightbold;
}

Listing 8.15    Die Grunddefinitionen des Rasters in CSS

Sprechende Klassennamen

Die Klassennamen sind ja frei wählbar, sollten aber möglichst selbsterklärend sein. .span_1 bedeutet, dass der Container genau eine Spalte breit ist. Bei .span_2 würde sich der Container über zwei Spalten »spannen« (erstrecken) etc.

Bei den wichtigsten Definitionen steht die Bedeutung als Kommentar dahinter. Die anderen haben vor allem optische Wirkung, damit die Spalten im Browser exemplarisch gut erkennbar sind. Wichtig ist die Angabe der maximalen Gesamtbreite im Wrapper und dass alle Spalten (.column) gefloatet werden und den horizontalen Abstand per padding zugewiesen bekommen.

Spaltenbreiten definieren

Während wir im Grafikprogramm aus bekannten Gründen auf Pixelwerte setzen mussten, können wir nun in CSS die zu Beginn auch angedachten Prozentwerte einsetzen. Zur Erinnerung: Eine Spalte sollte links und rechts einen Abstand von 2 % der Gesamtbreite des Layouts bekommen. Zwischen zwei Spalten addiert sich dies zu 4 % Abstand, an den äußeren Layouträndern bleiben es 2 %. Bei einem sechsspaltigen Layout sind zusammen also 24 % der Gesamtbreite für die Abstände reserviert (6 × 4 = 24). Die restlichen 76 % müssen dann auf die sechs Spalten gleichmäßig aufgeteilt werden. 76/6 ergibt 12,6666667 % Breite für eine Spalte.

Das Layout – aufgeteilt in sechs Spalten und Außenabstände mit Prozentwerten

Abbildung 8.54    Das Layout – aufgeteilt in sechs Spalten und Außenabstände mit Prozentwerten

Diese Definition geht von einer Abstandsdefinition per margin aus. Dies ist unter Umständen gewohnter und mag sicherlich vorteilhaft sein, wenn die Spalten eine Hintergrundfarbe bekommen sollen. Flexibler für künftige Anpassungen ist allerdings padding. Dieses wird zur Gesamtbreite dazugezählt. Das heißt, wir können später padding beliebig anpassen, ohne dass sich unsere Spaltenbreiten verändern. Die Spaltendefinition sähe dann so aus, dass wir die 100 % Gesamtbreite durch sechs Spalten teilen und die Breite einer einzelnen Spalte bekommen, also 100/6 = 16,6666667 %. Genauso lassen sich dann auch die Prozentwerte für die anderen Spaltenvarianten errechnen:

Die Breiten der einzelnen Spaltenvarianten in Prozentwerten

Abbildung 8.55    Die Breiten der einzelnen Spaltenvarianten in Prozentwerten

Daraus ergibt sich dann die Definition der Spaltenbreiten in CSS:

/* SPALTEN * * * * * * * * */
.span_1 {
width:16.6666666667%;
}
.span_2 {
width:33.3333333333%;
}
.span_3 {
width:50.0%;
}
.span_4 {
width:66.6666666667%;
}
.span_5 {
width:83.3333333333%;
}
.span_6 {
width:100%;
}

Listing 8.16    Die Spaltenbreiten in CSS

Damit steht das Grundlayout. Ein eigenes Raster ist definiert, das mit seiner Sechsspaltigkeit genug Spielraum für unterschiedliche Gestaltungsvarianten lässt. Im Browser ist das Ergebnis dann gut sichtbar, was vor allem an den Definitionen wie Hintergrundfarbe etc. und an den span-Elementen in den einzelnen Spalten liegt.

Zweidrittel-Regel

Unser Raster entspricht zwar nicht ganz dem Goldenen Schnitt (siehe Kapitel 6, »Gestaltungsgrundlagen«), aber die Zweidrittel-Regel ist auch nahe dran. Und diese lässt sich mit dem Raster gut umsetzen:

<div class="column span_4">
<span>.column .span_4
</span>
</div>
<div class="column span_2">
<span>.column .span_2
</span>
</div>

Ein Container, der über vier Spalten geht, und einer über zwei – fertig ist die Zweidrittel-Regel.

Raster responsiv machen

Im letzten Schritt der Rastervorlage wollen wir das Layout mit Media Queries responsiv machen. Es gibt ja ein paar typische Breakpoints, bei denen das Layout »umspringt«, also die einzelnen Spaltenbreiten angepasst werden. Im konkreten Fall eines Webseitenprojekts sollten diese Breakpoints am besten individuell abgestimmt werden. Die Inhalte und das Design geben hier die Breakpoints vor.

Das sechsspaltige Raster im Browser

Abbildung 8.56    Das sechsspaltige Raster im Browser

Verkleinern Sie das Browserfenster so lange, bis das Layout nicht mehr gut aussieht. Dann ist es Zeit, einen Breakpoint zu setzen.

Die Spalten bei kleinerer Auflösung

Abbildung 8.57    Die Spalten bei kleinerer Auflösung

Bei einer allgemeinen Rasterdefinition, wie wir sie gerade umsetzen, geht das nicht, da wir kein konkretes Layout haben. Daher wählen wir allgemeine Breakpoints. Für das Beispielraster wird daher exemplarisch ein Breakpoint bei 800 Pixeln gesetzt:

/* MEDIA QUERIES * * * * * * * * */
@media screen and (max-width800px){
.span_1.span_2.span_3.span_4.span_5.span_6 {
width100%;
}
}

Listing 8.17    Mithilfe von Media Queries werden bei kleineren Auflösungen die Spalten breiter gemacht.

Mit den Media Queries wird abgefragt, wann die Gesamtbrowserbreite höchstens 800 Pixel beträgt. Ist die Auflösung entsprechend klein, bekommen alle Spalten eine Breite von 100 %. Diese Abfrage ist natürlich sehr grob und sollte im konkreten Einzelfall zumindest gut überprüft und bei Bedarf entsprechend verfeinert werden. Mehr über Media Queries erfahren Sie in Kapitel 4, »Responsive Webdesign«.

Das Tool GridpakRasterkalkulatoren für responsive Raster. Auch unser selbst erarbeitetes Raster wäre damit schnell erstellt (gridpak.com).

Abbildung 8.58    Das Tool Gridpak für responsive Raster. Auch unser selbst erarbeitetes Raster wäre damit schnell erstellt (gridpak.com).

Insgesamt haben wir so ein kleines, aber feines eigenes Raster erstellt, das Sie gut als Grundlage Ihrer eigenen Webseitenprojekte verwenden können. Der folgende Abschnitt zeigt exemplarisch einige Anwendungszwecke.

 
Zum Seitenanfang

8.4.4    Eigene Webseitenlayouts Zur vorigen ÜberschriftZur nächsten Überschrift

Aus unserem kleinen Raster-Framework lassen sich einfache Webseitenlayouts erstellen. Diese werden dann mit den neuen HTML5-Elementen für die Seitenstruktur umgesetzt. Bislang wurden quasi alle Layoutelemente in HTML in eigene div-Container gepackt. Daraus entstanden Codestrukturen, die fast genauso unübersichtlich waren wie früher die Tabellenlayouts. Diese exzessive Anwendung von div-Containern bezeichnet man gerne auch als Divitis.

HTML5-Layoutelemente | Mit HTML5 soll mehr Semantik in die Quelltexte zurückkehren. Die häufig eingesetzten div-Container haben ja keine semantische Bedeutung. Sie werden vielmehr rein aus Design-Gründen eingesetzt, um Inhalte damit zu platzieren und zu gestalten. Zu den neuen Elementen gehören unter anderem fast selbsterklärende Elemente wie header, footer, nav und article. Mit ihnen bekommen die einzelnen Inhaltsbereiche eine semantische Bedeutung. Die Umsetzung ist nicht anders als mit div-Containern. So wird aus <div class="navigation"> dann eben <nav class="navigation">.

HTML5-Elemente

Kurzübersicht über die neuen HTML5-Elemente:

w3schools.com/html/html5_new_elements.asp

Webseitenvorlagen erstellen | Mithilfe des sechsspaltigen Rasters lassen sich typische Webseitenanordnungen umsetzen. Als Beispiel sehen Sie hier das Grundlayout einer typischen Startseite.

Download

Dieses Webseitenlayout und die weiteren Vorlagen finden Sie unter BeispielmaterialKapitel_08Raster. Die Datei heißt »website-layouts.html«.

Weitere Layoutvarianten finden Sie im Downloadbereich des Buchs.

Abbildung 8.59    Weitere Layoutvarianten finden Sie im Downloadbereich des Buchs.

<!-- Startseite -->
<div class="wrapper example">
<header class="row">
<div class="column span_2">
<span>Logo</span>
</div>
<nav class="column span_4">
<span>Navigation</span>
</nav>
</header>
<section class="row">
<article class="column span_6">
<span>Teaser</span>
</article>
</section>
<section class="row">
<article class="column span_2">
<span>Teaser</span>
</article>
<article class="column span_2">
<span>Teaser</span>
</article>
<article class="column span_2">
<span>Teaser</span>
</article>
</section>
<footer class="row">
<section class="column span_6">
<span>Footer</span>
</section >
</footer>
</div> <!-- wrapper zu -->

Listing 8.18    Das typische Layout einer Startseite

Ohne weitere Definitionen, allein durch unsere Stylesheet-Rasterdefinitionen, sehen wir auch gleich das optische Ergebnis:

Das typische Layout einer Startseite – umgesetzt mithilfe unseres Rasters

Abbildung 8.60    Das typische Layout einer Startseite – umgesetzt mithilfe unseres Rasters

So sieht es dann in der Praxis aus: die Startseite von merz-benzing.de mit verschiedenen Spalten.

Abbildung 8.61    So sieht es dann in der Praxis aus: die Startseite von merz-benzing.de mit verschiedenen Spalten.

Die Umsetzung eines eigenen Rasters ist gar nicht so schwer. Einige Punkte sollten Sie dabei allerdings beachten und ein paar Details frühzeitig klären. Selbst wenn solch ein eigenes Raster nicht bei jedem Projekt zum Einsatz kommt (was auch nicht zwingend das Ziel sein sollte), schult es doch Ihre eigenen Fähigkeiten, Kenntnisse und das Verständnis auch für andere Raster.

 
Zum Seitenanfang

8.4.5    Interaktive Prototypen Zur vorigen ÜberschriftZur nächsten Überschrift

Wireframes und Screendesigns sind hilfreich, um die Anordnung der Elemente und deren Gestaltung deutlich zu machen. Und ein Raster hilft bei der Umsetzung. Zuerst einmal sind sie aber alle statische Lösungen. Das Web aber ist interaktiv. Der Anwender sucht nach Informationen, und an diese gelangt er nur durch Klicken, indem er die Elemente findet, mit denen er navigieren kann. Wireframe, Screendesign, vorgefertigtes Raster können dies aber nicht ausreichend simulieren: Wohin klickt der Anwender?

Man könnte es auch als Mockup bezeichnen, also eine Art (mehr oder weniger umfangreiches) Modell der späteren Webseite. Dem gegenüber steht der Prototyp, ein funktionsfähiges Modell. Hier kann der Anwender schon klicken. Mit einem interaktiven Prototyp lässt sich die Benutzung einer Webseite simulieren und testen. Interaktive Prototypen können ganz simple Webseiten sein, bei denen nur die Grundstruktur der Elemente (ähnlich einem einfachen Wireframe) vorgegeben ist, aber auch bis zu einer detailliert ausgearbeiteten Webseite reichen, die dem späteren fertigen Produkt schon größtenteils gleicht.

Prototypen kommen der in Kapitel 1, »Prinzipien des modernen Webdesigns«, bereits angesprochenen Veränderung der Arbeitsabläufe im Webdesign-Prozess entgegen, möglichst früh in den Browser zu wechseln. Neben der Interaktivität lässt sich so auch schnell die Reaktionsfähigkeit der Webseite testen. Interaktive Prototypen sind also schon in HTML und CSS umgesetzt. Um die Arbeit zu vereinfachen, werden dafür gerne Frameworks wie das 960 Grid System (960.gs) eingesetzt. Deren Vor- und Nachteile und eine Auswahl an Frameworks sind in Kapitel 4, »Responsive Webdesign«, aufgelistet. Mit ihnen lässt sich aber recht schnell eine rudimentäre Webseite erstellen, da viele hilfreiche Komponenten wie horizontale Navigation, Raster, Buttons etc. schon zur Verfügung stehen und teilweise auch schon eine Art »Grundgestaltung« haben.

Bedeutung

Interaktionen, Prozessabläufe und Navigationskonzepte lassen sich mit interaktiven Prototypen gut testen. Mit Wireframes und Screendesign, die als Bilddatei vorliegen, ist dies nicht so effektiv möglich. Aber genau darum geht es ja bei einer Webseite: um die Interaktivität, die Benutzung der Webseite durch den Anwender.

Rapid Prototyping wird diese Methode auch genannt, schnell und einfach einen Prototyp zu erzeugen. Diese Klick-Dummys sind »einfache« Webseiten, bei denen es noch nicht um die genaue visuelle Ausgestaltung geht. Durch sie kann viel Gestaltungs- und Entwicklungszeit gespart werden, weil eventuelle Unklarheiten in der Anordnung der Elemente oder in der Navigation offensichtlicher werden und dadurch frühzeitig angepasst werden können. Dies ermöglicht ein iteratives Vorgehen, bei dem nach und nach der Prototyp angepasst und verfeinert wird.

Arbeitsablauf

Die Veränderung des Webdesign-Prozesses weg von statischen Photoshop-Dateien hin zu einer frühen Umsetzung im Browser kommt den interaktiven Prototypen entgegen. Ob und wie diese allerdings eingesetzt werden, sollte schon gleich zu Beginn des Projekts entschieden werden – auch mit dem Kunden. Dieser mag unter Umständen enttäuscht werden, wenn er anstelle eines schönen bunten Screendesigns einen rudimentären »Klick-Dummy« vorgesetzt bekommt.

Layout-Zukunft

Drei technische Layoutoptionen gilt es für die Zukunft im Hinterkopf zu behalten, da sie aktuell bei Weitem noch nicht von allen gängigen Browserversionen unterstützt werden:

  • Multi-Column-Layout: In CSS3 gibt es die Möglichkeit, Texte mehrspaltig zu machen. Mit den Eigenschaften column-count und column-width lassen sich die Anzahl und die Breite der Spalten definieren. Eine erste Einführung finden Sie bei webdesignerdepot.com/2013/03/how-to-use-css3-columns.

  • Grid-Layout: Anstatt die Elemente klassisch per float zu positionieren, gibt es die Möglichkeit, direkt mit CSS ein Raster zu erzeugen. Ein Elternelement, das alle weiteren Rasterinhalte beinhaltet, erhält die Zuweisung display:grid, und per grid-columns und grid-rows wird die Anzahl der Rasterspalten und Reihen bestimmt. Die einzelnen Inhaltselemente werden dann den einzelnen Rasterzellen zugewiesen. Ein sehr intuitives System, das aber bisher äußerst unzureichend unterstützt wird (ausnahmsweise ist der IE hier mal Vorreiter).
    Eine ausführliche Erläuterung des Grid-Layouts samt Beispielen finden Sie bei 24ways.org/2012/css3-grid-layout.

  • Flexbox-Modell: Das »Flexible Box Layout« macht Layouts bzw. einzelne Elemente flexibel. Per flex-direction:column oder flex-direction:row lässt sich die Anordnung festlegen, und per flex wird die Flexibilität – oder besser: die Ausdehnung (Breite oder Höhe) – eines Elements bestimmt. Eine ausführliche Erklärung mit vielen Beispielen erhalten Sie unter: blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css.

Es kann noch ein paar Jahre dauern, bis sich diese Optionen (wenn überhaupt) großflächig einsetzen lassen. Als Entscheidungshilfe, ob ein Element zum Einsatz kommen sollte oder nicht, können Sie die Browserkompatibilität unter caniuse.com überprüfen.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern