1.2 Proportion – Fluidität

Layout durch div-Container

Wie auch bei der Gestaltung mit Hinblick auf den Druck, so spielt auch beim Screendesign der Umgang mit Proportion, Weissraum, Dynamik – kurzum das Layout – eine zentrale Rolle. Oft sind Layouts modular angelegt um dem flexiblen und erweiterbaren Charakter des Webs gerecht zu werden. Online-Beispiele für Grundlayouts: Die grundlegenden Layouts und Layoutmodule für Websites werden mit <div>-Containern erstellt. Diese Container sind zunächst selbst unsichtbar und dimensionslos. Um sie in Erscheinung treten zu lassen muss man ihnen Breite und Höhe zuweisen und ihnen Inhalt geben.

Beispiel (HTML):


<div">   </div>
<div">   </div>
<div">   </div>

CSS:


div {
    width: 300px;
    height: 100px;
    border-width: 2px;
}

Einige Grundlayouts zum Beispiel

Screendesign Layouts

Aufgabe:
Analysiere die folgenden Websites auf ihr grundlegendes Layout hin:
www.ortweinschule.at
www.standard.at

Fertige dazu Skizzen an.

CSS: Selektoren

Mit der uns bisher bekannten Methode, mit der wir CSS-Anweisungen bestimmten Tags in unseren HTML-Dokumenten zugewiesen haben bekommen wir nun das Problem, dass wir den unterschiedlichen div-Containern keine unterschiedlichen Eigenschaften zuweisen können. Dies wäre aber dringend notwendig, wenn unsere Layouts nicht aus sich ständig wiederholenden gleichen Blöcken bestehen soll.


p {
	…
}

IDs

HTML:


<p id="bildunterschrift">Text unter dem Bild</p>

CSS:


#bildunterschrift {
    font-size: 10px;
}

Klassen

HTML:


<img src="images/pic1.jpg" class="bilder">

.bilder {
    width: 300px;
    border: 10x;
}

Wer mehr über das Thema Selektoren wissen möchte kann hier nachlesen.

Mit dem Wissen über Selektoren können wir nun unseren div-Containern im HTML-Dokument eigene Namen geben und im Stylesheet mit diesem Namen ansprechen um ihnen Eigenschaften zu geben:

HTML:


<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

CSS:


#header {
    width: 800px;
    height: 100px;	
    background: rgb(200,200,200);
}

#content {
    width: 800px;
    height: 400px;
    background: rgb(230,230,230);
}

#header {
    width: 800px;
    height: 100px;
    background: rgb(215,215,215);
}

Mit den CSS-Anweisungen width und height lässt sich die Größe von HTML-Elementen definieren. Im obigen Code verwenden wir die Anweisungen, um den div-Containern ihre Größe zu geben. Außerdem geben wir ihnen mit der Anweisung backgroundverschiedene Grautöne (Mehr zum Thema Farben im Kapitel ›Farbe‹).

Positionierung von div-Containern: float, clear, margin, padding, …

Div-Tags werden von Browsern immer untereinander angeordnet. Das heißt, wenn der Browser im HTML-Code auf einen div-Tag stößt, dann wird eine neue „Zeile“ im Browserfenster begonnen. Häufig stößt man bei der Gestaltung von Websites jedoch auf die Situation, dass man beim Layout div-Container auch nebeneinander anordnen möchte. Dies lässt sich durch die CSS-Anweisung float realisieren.


float: left;
clear: left;

Das Box-Model

Padding, Margin, width und height werden addiert!

Sollen zwischen den div-Containern Abstände sein, so lassen sich diese mit der CSS-Anweisung margin festlegen. margin legt einen Abstand um einen div-Container fest, der somit einen Abstand zum nächsten HTML-Element erzeugt. Die folgende Anweisung erzeugt einen Abstand von 10 Pixel um den div-Container mit der ID „navi“:


#navi {
	margin: 10px;
}

Diese Außenabstände können jedoch auch nur für eine Seite der div-Container definiert werden:


margin-left: 10px; // Abstand links von 10 Pixeln
margin-right: 5px; // Abstand rechts von 5 Pixeln
margin-top: 100px; // Abstand oben von 100 Pixeln
margin-bottom: 50px; // Abstand unten von 50 Pixeln

Beispiel: Abbildung 1, linkes Layout

HTML:


HTML

CSS:


CSS

Aufgabe:
Realisiere das rechte Layout aus Abbildung 1 mit div-Containern.
Die Breite soll 960 Pixel und die Höhe 700 Pixel betragen.

Absolute und relative Positionierung

position: absolute;
position: relative;

Fluidität: verschiedene Endgeräte

Ein Problem mit unseren gerade erstellten statischen Mini-Layouts entsteht, wenn wir es auf verschiedenenen Endgeräten testen. Falls auf einem Handy die horizontale Auflösung kleiner als 800 Pixel ist wird ein Teil unserer div-Container abgeschnitten und nicht auf dem Display dargestellt. Klar könnte man nun nach rechts scrollen, aber professionelles Web-Layout sieht anders aus. Wir sollten unsere Layouts also so anlegen, dass sie auf möglichst allen Endgeräten gut betrachtbar ist. Denn das Internet ist für alle da, also auch das, was wir darin erstellen.

Adapitve Layout und Responsive Layout

Adaptives Layout erkennt, wie groß die Auflösung des jeweiligen Endgeräts ist und passt das verwendete Layout dementsprechend an. (Zillgens, 2013, S. 14) Veränderungen ergeben sich dabei beispielsweise bei:

  • Art und Position der Navigation
  • Anzahl der Spalten
  • Größe der Schrift
  • Größe von Bildern

Beispiele für Adaptives Layout
Website 1
Website 2
Website 3

Es werden diverse breakpoints festgelegt, bei denen das Layout in einen anderen Modus umspringt:

  1. wenn die horzintale Auflösung größer als 960 ist: stelle Layout_Big dar
  2. wenn die horzintale Auflösung kleiner als 960, aber größer als 480 ist:
    stelle Layout_Medium dar.
  3. wenn die horzintale Auflösung kleiner als 480 ist: stelle Layout_Mini dar

Responsive Layout ist …

media queries

Um Layouts für verschiedene Displays anzupassen muss man die Display-Breite abfragen und dementsprechend CSS-Anweisungen ausführen. Dies geschieht im stylesheet mit media queries


@media screen and (min-width: 960px){
	CSS-Anweisungen für Layout_Middle
    …
}

@media screen and (min-width: 480px) and (max-width: 960px){
	CSS-Anweisungen für Layout_Middle
    …
}

@media screen and (max-width: 480px){
	CSS-Anweisungen für Layout_Middle
    …
}