Responsive-Webdesign-Tutorial (Vorwort, Einleitung, Kapitel 1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Bestandteile einer reaktionsfähigen Website

In diesem Kapitel:

Flexibles Layout, relative Einheiten
Skalierbare Bilder und Medien
Media Queries (CSS3)

Letzte Aktualisierung: 29. Dezember 2013

Dieser Abschnitt behandelt die drei Bestandteile (Zutaten) einer reaktionsfähigen Website laut der Definition von Ethan Marcotte (siehe Abschnitt 1.1).

3.1. Flexibles Layout, relative Einheiten

Erste und wichtigste Zutat ist ein flexibles Gestaltungsraster (Grid), wobei neben Texten auch Bilder und Videos anpassungsfähig sein sollten. Bei fixen Layouts werden Größenangaben in der Regel in Pixel (oder cm im Drucklayout) angegeben, wie das nachfolgende stark vereinfachte CSS-Beispiel zeigt:

(vgl. Zillgens, 2013, S. 16ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

div#wrapper {			/* #wrapper umschließt die Webseite */
	width: 960px;		/* Typisches 960px-Layout */
	margin: 0 auto;		/* Zentrieren in der Mitte */
	font-size: 12px;	/* fixe Standard-Schriftgröße */
}
 
div#content {			/* Inhaltsbereich, linke Spalte */
	width: 600px;
	float: left;
	font-size: 24px;	/* doppelt so groß wie in #wrapper */
}
 
div#side {			/* Seitenleiste rechts daneben */
	width: auto;		/* verwendet die restliche Breite */
	margin-left: 620px;	/* etwas Abstand nach links lassen */
	font-size: 6px;		/* halb so groß wie in #wrapper */
}

Ein <div> mit der ID #wrapper anzulegen, ist eine gängige Methode, die Webseite zu umschließen, ihr eine passende Breite (960px) zu geben und mittig auszurichten¹Die HTML5-Elemente <article> und <section> wären hier unpassend, da es sich um eine optische Formatierung und um nichts Inhaltliches handelt.. Neben der Breite (width) werden auch Schriftgrößen (font-size), Innenabstände (padding) und Außenabstände (margin) bei fixen Layouts in Pixel (px) angegeben. Der dazu passende HTML-Code (im <body>) kann auch sehr einfach gehalten werden:

(ähnlich vgl. Zillgens, 2013, S. 16ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

<div id="wrapper"> <!-- umschließt alles --> 
    <header><!-- Kopfbereich --></header>
 
    <article> 
        <div id="content"> 
            Text im Inhaltsbereich 
        </div>        
        <aside>
            <div id="rechts"> 
                Weniger wichtige rechte Spalte. 
            </div>
        </aside> 
    </article> 
 
    <footer><!-- Fußbereich --></footer> 
 
</div> <!-- Ende #wrapper -->

Hinweis: Die HTML5-Elemente <article> und <aside> umschließen die DIVs. Damit bleibt die Kompatibilität zu älteren Browsern gewahrt (es kommt zu keinen Darstellungsfehlern) und gleichzeitig erfolgt eine semantische Auszeichnung.

Was passiert nun, wenn der Benutzer das Browserfenster vergrößert oder verkleinert? Ist der Anzeigebereich (sog. „viewport“) kleiner als 960 Pixel, zeigt der Webbrowser einen vertikalen Scrollbalken an. Bei mehr Breite als 960 Pixel bleibt rechts und links freier Platz (der nicht genutzt wird).

Die Browservorgaben (Browser-Stylesheet) bei Innen- und Außenabständen (insb. beim <body>) wurden im oberen Beispiel vernachlässigt. Das lässt sich aber natürlich mit einem „CSS Reset“ beheben (dann sind es genau 960px):

* { margin: 0; padding: 0; }

Der „Trick“ besteht nun darin, alle fixen Breitenangaben (Pixel) in relative Einheiten (insb. %, em und rem) umzurechnen. Die Basis (bzw. Kontext) ist dabei die Breite von 960 Pixel in #wrapper. Für den Inhaltsbereich #content ergibt sich eine relative Breite von 600 / 960 = 62,5%. Schriftgrößen werden ebenfalls in % (oder em oder rem) umgerechnet. Diese beziehen sich auf die umgebende Schriftgröße, meist in <html> oder wie im oberen Beispiel in #wrapper definiert.

(u.a. vgl. Zillgens, 2013, S. 21ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

Der HTML-Code bleibt unverändert, das neue CSS sieht wie folgt aus:

div#wrapper {			
                /* 90% der sichtbaren Fensterbreite (neu), vorher 960px */
	width: 90%;			
	margin: 0 auto;
	font-size: 75%;		/* 16px = Browser-Standard, 12 / 16 = 75% */
}
 
div#content {
	width: 600px;		/* 600 / 960 = 62,5% */
	float: left;
	font-size: 200%;	/* 24 / 12 = 200% */
}
 
div#side {
	width: auto;
				/* 620 / 960 = 64.5833333333% */
	margin-left: 64.5833333333%;
	font-size: 50%;		/* 6 / 12 = 50% */
}

Damit die Verhältnisse gleich bleiben, wurden alle Breiten (width) auf die Basis von 960px in % umgerechnet. Die Schriftgrößen (font-size) wurden auf die Größe des umgebenden Elements (#wrapper) bezogen und in % umgerechnet. Um genaue Ergebnisse zu erhalten und Rundungsfehler zu vermeiden, ist es wichtig, alle %-Angaben mit möglichst vielen Nachkommastellen anzugeben. Am Ende wurde width in #wrapper auf 90% (diese beziehen sich auf <body>) umgestellt, damit sich das DIV automatisch an die Fensterbreite anpasst. Die Schwächen der Umstellung zeigen sich im Grenzbereich, insb. bei sehr kleinem Browserfenster. Die Schrift läuft dann aus dem DIV heraus – was mit Media Queries (Abschnitt 3.3) korrigiert werden kann.

(u.a. vgl. Zillgens, 2013, S. 21ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

3.2. Skalierbare Bilder und Medien

Größenangaben (Breite, Höhe) von Bildern (<img>) und anderen Medien (Videos) müssen ebenfalls in relative Einheiten (%, em, rem) umgerechnet werden. Wird max-width: 100% angegeben, verkleinert sich ein Bild automatisch mit der verfügbaren Breite (bis max. 100% der Originalgröße, da sonst die Bildqualität durch die Vergrößerung leiden würde).

(vgl. Zillgens, 2013, S. 27ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

img {			/* für alle <img>-Elemente im Beispiel */
	max-width: 100%;
}

3.3. Media Queries (CSS3)

Media Queries bilden das Kernstück im Responsive Webdesign bzw. stellen die eigentliche Neuerung dar. Flexible Layouts mit relativen Größenangaben waren auch früher schon möglich.

Eine Ausnahme bildet die Skalierung von Bildern mit der CSS-Eigenschaft max-width, die in Abschnitt 3.2 erklärt wurde. Hier fehlt die Browser-Unterstützung in älteren Browsern (Internet Explorer vor Version 7).

(vgl. CSS 4 You (a), o.J.)

CSS 4 You (a) o.J., „Maximale Breite: max-width“, Abruf am 16.05.2013, http://www.css4you.de/max-width.html

Die Schwierigkeit bei flexiblen Layouts sind vor allem Extremfälle, besonders kleine und große Display- bzw. Fenstergrößen. Inhalte lassen sich nicht beliebig dehnen oder stauchen, zudem leidet die Lesbarkeit eines Textes mitunter stark. Media Queries, die mit CSS3 eingeführt wurden, lösen dieses Problem, indem sie Fallunterscheidungen hinzufügen.

(vgl. Zillgens, 2013, S. 37ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

Ähnlich einer if-Anweisung in einer höheren Programmiersprache, lassen sich insb. folgende Fälle abfragen:
• WENN (if) die Fensterbreite (= sichtbarer Bereich, viewport) maximal 1000 Pixel beträgt (max-width), DANN (then) verwende folgende CSS-Anweisungen ...
• WENN (if) die Fensterbreite mindestens 1001 Pixel beträgt (min-width), DANN (then) verwende folgende – andere – CSS-Anweisungen ...

(vgl. Zillgens, 2013, S. 37ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

Mit Media Queries lassen sich somit Umbruchpunkte festlegen. An einem Umbruchpunkt, d.h. wenn eine Media Query zutrifft, lässt sich das Design beliebig ändern. Es können zum Beispiel Schriftgrößen, Innen- und Außenabstände, Breiten, Höhen, Rahmen angepasst werden. Ganze Menüs können ausgeblendet oder auf eine kompaktere (umfassendere) Darstellung umgestellt werden. Alle Möglichkeiten, die CSS bietet, stehen offen.

Das Ziel sollte nicht sein, speziell einzelne – bekannte – Geräte anzusprechen. Das würde nur berücksichtigen, was heute schon da ist. Besser ist es, eine allgemeine Lösung zu finden, die auch für zukünftige Geräte und Displaygrößen gerüstet ist.

(vgl. Zillgens, 2013, S. 39)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

Neben der Abfrage der Bildschirmbreite wird üblicherweise auch der Medientyp angegeben, den es in CSS2 schon gab. Mit diesem lassen sich je Geräte- bzw. Medientyp unterschiedliche Stylesheets ausliefern. Genutzt wurden meist nur screen als Standard für den Bildschirm und print für den Druckbereich (wo z.B. Menüs ausgeblendet wurden). Diese Angabe ist auch Teil der Media Query und sieht dann wie folgt aus:

(u.a. vgl. Zillgens, 2013, S. 37ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

@media only screen and (max-width: 1000px) {
	/* … Anweisungen für Fenster/Bildschirme bis 1000px … */
}
 
@media only screen and (min-width: 1001px) {
	/* … Anweisungen für Fenster/Bildschirme ab 1001px … */
}

Die Media Query wird mit @media eingeleitet, danach folgt der Medientyp (hier: screen). Es wäre auch folgende Variante ohne only möglich:

@media screen and (min-width: 1001px) {
	/* … Anweisungen für Fenster/Bildschirme ab 1001px ... */
}

Da @media screen {} bereits früher möglich war, um spezielle Anweisungen für den Bildschirm (screen) zu definieren, könnten ältere Browser Probleme bereiten (die @media screen kennen, den Bedingungsteil aber nicht). Mit only werden ältere Browser aussortiert, die noch keine Media Queries kennen (es gibt kein only als Medientyp).

(vgl. Zillgens, 2013, S. 37ff)

Zillgens, Ch. 2013, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, 1. Auflage, Carl Hanser Verlag, München.

Vorheriges Kapitel

Nächstes Kapitel