responsive webdesign – anpassungsfähige websites ...€¦ ·...

42
Leseprobe In dieser Leseprobe lernen Sie erste Prinzipien von »Responsive Webdesign« kennen. Sie erfahren, wie Sie ein fixes Design in ein flexibles Layout verwandeln. Anschließend wenden Sie verschie- dene Navigationskonzepte an. Außerdem können Sie einen Blick in das Inhalts- und Stichwortverzeichnis des Buches werfen. Kai Laborenz, Andrea Ertel Responsive Webdesign – Anpassungsfähige Websites programmieren und gestalten 489 Seiten, gebunden, in Farbe, 2. Auflage 2014 39,90 Euro, ISBN 978-3-8362-3200-5 www.galileo-press.de/3725 »Umsetzung eines fixen Designs in ein flexibles Layout« »Navigationskonzepte« Inhalt Index Die Autoren Leseprobe weiterempfehlen Wissen, wie’s geht.

Upload: others

Post on 15-Jun-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

LeseprobeIn dieser Leseprobe lernen Sie erste Prinzipien von »Responsive Webdesign« kennen. Sie erfahren, wie Sie ein fixes Design in ein flexibles Layout verwandeln. Anschließend wenden Sie verschie- dene Navigationskonzepte an. Außerdem können Sie einen Blick in das Inhalts- und Stichwortverzeichnis des Buches werfen.

Kai Laborenz, Andrea Ertel

Responsive Webdesign – Anpassungsfähige Websites programmieren und gestalten489 Seiten, gebunden, in Farbe, 2. Auflage 2014 39,90 Euro, ISBN 978-3-8362-3200-5

www.galileo-press.de/3725

»Umsetzung eines fixen Designs in ein flexibles Layout« »Navigationskonzepte«

Inhalt

Index

Die Autoren

Leseprobe weiterempfehlen

Wissen aus erster Hand.Wissen, wie’s geht.

Page 2: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

41

2 Umsetzung eines fixen Designs in ein flexibles Layout

Kapitel 2

Umsetzung eines fixen Designs in einflexibles Layout

»A great designer is the one who keeps moving stuff, even when everyone else leaves

the room.«

Milton Glaser

In diesem Kapitel werden wir mit den Grundlagen des ersten Kapitels eine kleine

responsive Webseite aufbauen. Sie haben ja mit uns bereits einen kurzen Blick auf die

Umsetzung responsiver Layouts geworfen. Nun zeigen wir Ihnen anhand eines

Anwendungsbeispiels, wie Sie ein bestehendes festes Design mithilfe der drei Haupt-

zutaten des responsiven Designs (fluides Raster, flexible Inhalte und Media Queries)

in ein anpassungsfähiges Layout umwandeln. Los geht’s!

2.1 Die Ausgangslage: ein grafischer Entwurf mit festenAbmessungen

Stellen Sie sich vor, Sie haben ein Layout, wie in Abbildung 2.1 zu sehen, von einem

Kunden als Photoshop-Vorlage zur Umsetzung erhalten.

Sie sehen ein ziemlich typisches dreispaltiges Layout mit einem Menü, einer Inhalts-

spalte und einer Marginalie. Leider sind die Texte für die Website noch nicht fertig,

sodass Sie mit Blindtext arbeiten müssen (auch das Logo ist noch in der Abstim-

mung, wird aber nachgeliefert, und an der Struktur der Website wird noch gearbei-

tet). Sicher ist aber, dass es ein Hauptbildmotiv geben soll (eventuell mit einer

Slideshow) und mehrere Artikel-Teaser auf der Startseite. Die Farbwelt ist immerhin

vorhanden. Ein ganz normaler Auftrag also.

Page 3: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

2 Umsetzung eines fixen Designs in ein flexibles Layout

42

Abbildung 2.1 Die Layoutvorlage in Photoshop mit eingeblendetem Raster

Aus der Photoshop-Vorlage ergeben sich die folgenden Abmessungen:

Die Umsetzung in HTML5 ist keine große Sache: Sie verwenden die HTML5-Elemente

<header>, <footer> und <nav> für die entsprechenden Bereiche und setzen einen Con-

tainer außen herum. Die Inhalte werden in einem Bereich .main wiederum in zwei

Bereichen untergebracht: .mainContent dient als Container, in dem wir später noch

mehrere <section>-Elemente unterbringen können, und die Marginalie setzen Sie

mittels <aside> um. Je nachdem, wie die Inhalte aussehen, sind natürlich auch andere

Umsetzungen denkbar (aber die Inhalte liegen ja leider noch nicht vor).

Gesamtbreite 1.245 Pixel verteilt auf 11 Spalten mit einem Spaltenabstand von

20 Pixeln

Navigation 210 Pixel

Inhaltsbereich 710 Pixel

Marginalie 325 Pixel

Header und Footer gehen über die gesamte Breite

Tabelle 2.1 Kernabmessungen der Designvorlage

2.1 Die Ausgangslage: ein grafischer Entwurf mit festen Abmessungen

43

Das komplette Beispiel finden Sie im Download-Paket auf der Website zum Buch im

Verzeichnis /praxisbeispiele/kap02/01_fixes-design-flexibles-layout/. Leicht gekürzt

sieht der HTML5-Code dann so aus:

<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><title>Praxisbeispiel: Responsive Layout</title><link href="../css/normalize.css" rel="stylesheet"><link href="../css/styling.css" rel="stylesheet"><link href="../css/layout.css" rel="stylesheet">

</head><body><div class="page-wrapper"><header><h1>Websitetitel</h1>

</header><nav><ul id="navMain" class="main-nav"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li>...</li>

</ul></nav><div class="main"><div class="mainContent"><h2>Seitenüberschrift</h2><p class="teasertext">... </p><figure class="slides"><img src="../img/dummy-1.jpg"width="800" height="385" alt="">

<figcaption>... </figcaption></figure><section class="teaser-articles"><article class="box teaser"><figure><img src="../img/dummy-2.jpg"width="500" height="500" alt="">

</figure><h3>Artikel Überschrift</h3><p>Li nov lingua ... </p>

</article>

Page 4: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

2 Umsetzung eines fixen Designs in ein flexibles Layout

44

<article class="box teaser">...</article>

</section><section><h3>Artikel Überschrift</h3><p>Li nov lingua franca ... </p>

</section></div> <!-- Ende mainContent --><aside><h3>Aside Überschrift</h3><p>Li Europan lingues ... </p>

</aside></div> <!-- Ende main --><footer>...</footer>

</div> <!-- Ende page-wrapper --></body>

</html>

Listing 2.1 Auszug aus dem HTML5-Quellcode für die Beispielseite

Im ersten Schritt verwenden Sie bei der Umsetzung zur besseren Anschaulichkeit die

festen Größen aus der Photoshop-Designvorlage. Der Aufbau des Layouts erfolgt mit

den folgenden CSS-Anweisungen:

.page-wrapper {margin: 0 auto;width: 1245px;

}.main {

width: 1035px;float: left;overflow: hidden;

}nav {

width: 210px;float: left;overflow: auto;

}.mainContent {

width: 710px;float: left;

2.1 Die Ausgangslage: ein grafischer Entwurf mit festen Abmessungen

45

padding: 20px;box-sizing: border-box; /* Präfixe */

}aside {

width: 325px;margin-left: 710px;padding: 20px;box-sizing: border-box; /* Präfixe */

}

Listing 2.2 Auszug aus der Datei »layout.css«: CSS-Anweisungen der

Grundelemente mit Pixelmaßen

Der übergeordnete Container hat eine feste Breite von 1.245 Pixeln. Das ist der verfüg-

bare Platz bei einer Bildschirmbreite von 1.280 Pixeln. Der .page-wrapper ist durch

das margin: 0 auto; horizontal zentriert (der Abstand nach oben und unten ist 0, nach

rechts und links automatisch). Dann folgen Navigation und Inhalte nebeneinander

gefloatet und mit festen Breiten versehen. Als Letztes haben wir im Inhalts-Contai-

ner den Hauptinhalt und die Marginalie (<aside>) ebenfalls nebeneinander gefloatet.

Um uns das Rechnen etwas zu vereinfachen, haben wir für alle Container mit zusätz-

lichen Innenabständen das Boxmodell vom Standardwert box-sizing: content-box

auf box-sizing: border-box umgestellt. So müssen wir nicht lange border, padding und

width addieren, um den tatsächlichen Platzbedarf eines Elements zu ermitteln, son-

dern können einfach die Breite angeben, die das Element insgesamt einnehmen soll

– eine sehr nützliche Eigenschaft, wie wir finden. Als kleinen Wermutstropfen müs-

sen wir allerdings erwähnen, dass der Internet Explorer 7 diese Eigenschaft noch

nicht versteht; deswegen müssten Sie entweder eigene Styles für ihn vorsehen oder

einen Workaround verwenden (z. B.: http://www.snackoclock.net/2012/08/simple-

box-sizing-border-box-fallback-for-ie), falls Sie diesen noch bei der Umsetzung

berücksichtigen möchten.

Achtung, Präfixe!

CSS-Eigenschaften, die noch nicht als offizieller Standard verabschiedet sind, müssen

oft noch mit sogenannten Hersteller-Präfixen (vendor prefixes) versehen werden. Sie

sollten in solchen Fällen immer als Letztes den offiziellen Vorschlag verwenden, da die

Browserhersteller nach einer Weile die Unterstützung für die »gepräfixten« Bezeich-

nungen einstellen.

Für die Eigenschaft box-sizing sieht die komplette Version z. B. so aus:

-webkit-box-sizing: border-box; /* ältere Webkit-Browser */-moz-box-sizing: border-box; /* Firefox */box-sizing: border-box; /* W3C/Chrome/Opera/IE */

Page 5: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

2 Umsetzung eines fixen Designs in ein flexibles Layout

46

Wir verwenden in den gedruckten Listings aus Gründen der Übersichtlichkeit immer

nur die W3C-Varianten (also ohne Präfixe) und kennzeichnen diese entsprechend mit

einem Kommentar /* Präfixe */ – die Codebeispiele im Download-Paket auf der

Website zum Buch sind aber komplett mit allen benötigten Präfixen.

Die Anweisungen zu Farben und Typografie befinden sich in der Datei basis.css, die

Sie im Download-Paket auf der Website zum Buch im Verzeichnis /praxisbeispiele/

kap02/01_fixes-design-flexibles-layout/css/ finden. Das fertige Layout (mit Pixelwer-

ten) passt exakt in die Viewport-Breite von 1.280 Pixeln. Bei breiteren Bildschirmen

passiert nichts Schlimmes; die Website wird wie geplant im Browserfenster horizon-

tal zentriert, aber in kleineren Fenstern gibt es ein ernstzunehmendes Problem: Rigo-

ros werden hier die Inhalte abgeschnitten, wie in Abbildung 2.2 zu sehen.

Abbildung 2.2 Die fixe Umsetzung ist geschafft; jetzt fehlt noch die Flexibilität, damit sich

das Layout mit der Seitengröße verändert und nicht abgeschnitten wird.

2.2 Der erste Schritt: feste Raster in flexible umrechnen

47

2.2 Der erste Schritt: feste Raster in flexible umrechnen

Um nun aus dem fixen Layout ein fluides zu machen, müssen Sie als Erstes die festen

Pixelgrößen in eine relative Einheit umwandeln. Im ersten Kapitel haben wir Ihnen

die kleine Formel ja schon vorgestellt, mit der Sie ganz einfach die Pixelwerte von

HTML-Containern in Prozentwerte umrechnen können.

Anstelle von Breite des Elternelements wird oft auch der Begriff Kontext verwendet.

Die Umrechnung von <header>, <footer> und Navigation ist einfach, da alle Werte auf

die Gesamtbreite des Layouts von 1.245 Pixeln bezogen werden. Etwas trickreicher ist

die Umrechnung für .mainContent und <aside>, da diese innerhalb von .main liegen

und ihre prozentuale Breite sich daher auf dieses Element bezieht. Trotzdem stellt Sie

das vor keine größeren Probleme, und am Ende kommen Werte wie diese heraus:

Die krummen Prozentwerte haben Sie ja schon in Kapitel 1, »Denken in flexiblen

Strukturen«, kennengelernt. Übernehmen Sie diese in ihrer vollen Länge in Ihre CSS-

Anweisungen; nur so lassen sich eventuelle Rundungsfehler beim Nachbau von

Pixellayouts vermeiden. Je mehr Größen aufaddiert werden, umso größer ist die

Gefahr, dass Rundungsfehler in dem einen oder anderen Browser die Darstellung

Ihres Layouts beeinträchtigen. Es gibt einen interessanten englischsprachigen Arti-

kel zum Thema »Rundungsfehler« von John Albin Wilkins (http://palantir.net/blog/

responsive-design-s-dirty-little-secret), in dem er unter anderem auch eine Methode

erklärt, die er als »container-relative floats« bezeichnet und die in dem von ihm ent-

Element Werte in Pixeln (width/padding) Werte in Prozent (width/padding)

header 1.245 px / 20 px 100 %1 / 1,606425703 %

nav 210 px / 20 px 16,86746988 % / 1,606425703 %

main 1.035 px 83,13253012 %

main-Content

710 px / 20 px 68,59903382 % / 1,93236715 %

aside 325 px / 20 px 31,40096618 % / 1,93236715 %

footer 1.245 px / 20 px 100 %1 / 1,606425703 %

1) 100 % Breite muss nicht angegeben werden, da Blockelemente ohne Größenangabe

automatisch 100 % der Breite beanspruchen.

Tabelle 2.2 In Prozente umgerechnete Abmessungen für das Beispiellayout

Breite_in_ProzentBreite_in_Pixel × 100

Breite_des_Elternelemeents_in_Pixel (Kontext)=

Page 6: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

2 Umsetzung eines fixen Designs in ein flexibles Layout

48

wickelten Framework für das responsive Zen Grids (http://zengrids.com) verwendet

wird.

Umstellung des CSS-Boxmodells von content-box auf border-box

Gerade für die Verwendung von prozentualen Werten mit vielen Nachkommastellen,

aber auch für den Einsatz von unterschiedlichen Einheiten für die Abstände (px oder em)

und die Spalten (%) im Layoutraster ist die schon oben erwähnte Veränderung des CSS-

Boxmodells von box-sizing: content-box auf box-sizing: border-box sehr hilfreich.

Um nun in unserem Beispiel die Änderungen umzusetzen, müssen Sie lediglich alle

Pixelwerte durch die berechneten Prozentwerte aus Tabelle 2.2 ersetzen. Beachten

Sie, dass durch die Verschachtelung der beiden Spalten .mainContent und <aside> in

.main ein neuer Kontext gebildet wird und die Berechnungen sich nun auf die Breite

von .main (1.035 Pixel) statt auf die Gesamtbreite beziehen. Für die wichtigsten Ele-

mente sieht das so aus:

.page-wrapper {margin: 0;

}header {

padding: 0 1.606425703%;}footer {

padding: 1.606425703%;clear: left;

}.main {

width: 83.13253012%;float: left;

}.mainContent {

width: 68.59903382%;float: left;padding: 1.93236715%;box-sizing: border-box; /* Präfixe */

}aside {

width: 31.40096618%;margin-left: 68.59903382%;padding: 1.93236715%;box-sizing: border-box; /* Präfixe */

}

Listing 2.3 Umstellung der festen Werte auf das fluide Raster

2.3 Der zweite Schritt zu mehr Flexibilität: anpassungsfähige Inhalte

49

Für den umgebenden Wrapper wird die Breitenangabe komplett entfernt – es soll ja

ein fluides Raster werden. Alle anderen Werte werden einfach umgerechnet, und fer-

tig ist das fluide Raster.

2.3 Der zweite Schritt zu mehr Flexibilität: anpassungsfähige Inhalte

Als Nächstes müssen Sie sich um die Inhalte im fluiden Layout kümmern. Für Text ist

erst einmal wenig zu tun; normalerweise fließt er einfach in das neue Raster. Eine

Herausforderung im Responsive Webdesign sind jedoch alle Elemente, die grund-

sätzlich fixe Abmessungen haben wie beispielsweise Bilder, Videos, Flash-Applikatio-

nen oder Inline-Frames. Schauen wir uns zunächst einmal die Bilder an; zu anderen

Inhalten kommen wir in Kapitel 11, »Mehr flexible Inhalte«.

Bilder (Grafikdateien) beziehen ihre Größeneigenschaften (zunächst) aus sich selbst

heraus. Ein Bild hat immer eine bestimmte Breite und Höhe, die sich einfach aus den

Pixeln des Bildes selbst ergibt. Wenn Sie also ein Bild ohne weitere Angaben in eine

HTML-Seite einsetzen, richtet sich die Anzeige nach den tatsächlichen Abmessungen

des Bildes:

<img src="beispielbild.png">

In HTML ist es dann möglich, dem Element <img> Angaben zu Breite und Höhe hinzu-

zufügen:

<img src="beispielbild.png" width="200" height="300">

Diese Angaben wiederum lassen sich mittels CSS überschreiben:

img {width: 100px;height: 150px;

}

Im responsiven Layout sind die Bilder im Unterschied zum Text erst einmal nicht fle-

xibel. Sie passen sich der Umgebungsgröße nicht an und sehen darum bei Layoutver-

änderungen schnell entweder mickrig aus oder sprengen das Layout. Was lässt sich

dagegen tun? Wenn für Bilder im HTML-Code keine width- und height-Attribute

notiert sind, lässt sich die Anpassung recht einfach erreichen. Sie müssen lediglich

dem Bild per CSS eine passende Breite mitgeben, z. B. 100 %. Im HTML-Attribut kön-

nen nur dimensionslose Werte angegeben werden, die als Pixel interpretiert werden.

Page 7: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

2 Umsetzung eines fixen Designs in ein flexibles Layout

50

img {width: 100%;

}

Bilder, die über ihre natürlichen Maße hinaus skaliert werden, sehen meist etwas

unglücklich, verschwommen oder pixelig aus. Aber das lässt sich verhindern, indem

Sie statt width die CSS-Eigenschaft max-width verwenden. Damit skaliert der Browser

das Bild nicht größer als seine natürliche Größe es hergibt – aber bei Bedarf kleiner.

Es ist üblich, Bilder mit den echten Größenangaben im HTML zu notieren; viele Con-

tent-Management-Systeme lassen es auch gar nicht anders zu. Damit das Bild nicht

mit max-width: 100% und dem im <img>-Tag notierten Höhenwert (z. B. height="300")

angezeigt und damit verzerrt wird, muss noch ein height: auto her:

img {max-width: 100%;height: auto;

}

Voilà – responsive Bilder mit Maximalwert.

Es gibt noch eine andere Methode, die Bilder auf das verkleinerte Layout anzupassen

– eine etwas brutale, nämlich die Bilder einfach abzuschneiden. Dazu benötigen Sie

einen Container, der das Bild umschließt, z. B. das HTML5-Element <figure> oder ein-

fach ein <div>. Wenn Sie nun diesem Element die Eigenschaft overflow: hidden geben

und es durch das responsive Raster skaliert wird, bleibt das Bild in der normalen

Größe erhalten, wird aber durch den Container beschnitten (siehe Abbildung 2.3).

HTML:

<figure><img src="beispielbild.png" width="800" height="500">

</figure>

CSS:

figure {overflow: hidden;

}

Bei Bildern mit konkreten Inhalten mag es nicht besonders hilfreich sein, wenn nur

noch Bruchteile des Motivs erkennbar sind. Bei musterartigen Motiven (z. B. einem

Wolkenhimmel) oder atmosphärischen wie beim Children’s Museum (siehe Abbil-

dung 2.3, https://pittsburghkids.org) ist diese Methode aber durchaus brauchbar.

2.3 Der zweite Schritt zu mehr Flexibilität: anpassungsfähige Inhalte

51

Abbildung 2.3 Das Children’s Museum nutzt atmosphärische Bilder, die auch in Ausschnit-

ten noch ihren Zweck erfüllen.

Zurück zu unserem Anwendungsbeispiel: Um alle Bilder proportional anzupassen,

notieren Sie einfach Folgendes:

img {max-width: 100%;height: auto;

}

Das Headerbild wird damit über die gesamte Spaltenbreite angeordnet; solange es

dazu nicht vergrößert werden muss (um unschön hochskalierte unscharfe Bilder zu

vermeiden), verwenden Sie hier nicht width: 100%, sondern max-width: 100%. Da die

Angaben generell für das <img>-Element notiert sind, wirken sie sich auch auf die bei-

den Bilder in den redaktionellen Teasern aus. In der Praxis würde man die Anweisun-

gen eher nur auf Bilder mit einer bestimmten Klasse anwenden.

Belohnt werden Ihre Anstrengungen durch ein fluides Layout, das auch bei einer ver-

kleinerten Ansicht noch eine ordentliche Figur macht, wie Abbildung 2.4 zeigt.

Page 8: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

2 Umsetzung eines fixen Designs in ein flexibles Layout

52

Abbildung 2.4 Das ehemals feste Layout ist nun völlig flexibel.

Das Layout skaliert nun zwar schon im Browser, stößt aber bei größerer Abweichung

von der geplanten Breite auf Schwierigkeiten. Entweder ist einfach nicht mehr genug

Platz vorhanden für eine vernünftige Darstellung der Inhalte, oder die Zeilen werden

zu lang. Es ist zwar eine Verbesserung gegenüber der Layoutvariante mit festen Grö-

ßen, aber noch nicht gut genug!

2.4 Der dritte Schritt: Layouts mit Media Queries umschalten

Jedes mehrspaltige Layout stößt irgendwann an seine Grenzen, wenn die verfügbare

Bildschirmbreite nicht mehr genug Raum für die Inhalte lässt. Und auch in die

andere Richtung ist es nicht sinnvoll, Layouts endlos auszubreiten. Die Lesbarkeit

von Text lässt ab einer Länge von 60 bis 70 Zeichen deutlich nach.

Hier kommen die Media Queries ins Spiel – eine Möglichkeit, die erst in den letzten

Jahren von ausreichend vielen Browsern unterstützt wurde, um sie vernünftig ein-

2.4 Der dritte Schritt: Layouts mit Media Queries umschalten

53

setzen zu können (genauer gesagt von allen gebräuchlichen Browsern neuer als der

Internet Explorer 8). Die Media Queries sind ein so wichtiges und komplexes Thema,

dass wir ihnen ein ganzes Kapitel widmen. Um unser Beispiel aber abzurunden,

haben wir schon einmal eine Kurzfassung für Sie.

Media Queries sind CSS-Anweisungen, die einen Block von Anweisungen ausführen,

wenn bestimmte Bedingungen eintreffen. In Kapitel 1, »Denken in flexiblen Struktu-

ren«, haben Sie ja schon ein Media Query kennengelernt:

@media (max-width: 960px) {/* CSS-Anweisungen */

}

Wir verwenden das erste Media Query, um das Vergrößern der Seite zu begrenzen.

Dazu haben wir im Text in die erste Zeile als 75. Zeichen ein * gesetzt und skalieren

den Browser so lange, bis dieses Zeichen gerade noch in der Zeile bleibt – damit ist

diese Zeile genau 75 Zeichen lang. Länger soll sie nicht mehr werden. Wenn Sie nun

die Breite der Seite messen (z. B. in Firefox Extras • Webentwickler • Bildschirm-

grössen testen), erhalten Sie einen Wert von etwa 1.230 Pixeln. Das passende

Media Query lautet:

@media only screen and (min-width: 1230px) {.page-wrapper {

width: 1230px;margin: 0 auto;

}}

Die Notation only screen ist aus Gründen der Rückwärtskompatibilität erforderlich

(darüber erfahren Sie mehr in Kapitel 3, »Die Schlüsseltechnologie Media Queries«);

dann erfolgt die Abfrage auf eine Mindestbreite von 1.230 Pixeln. Die Abfrage ist

»wahr«, wenn die Breite mindestens 1.230 Pixel beträgt, also bei allen Werten von

1.230 Pixeln und mehr. Mit der Vorsilbe min- ist das etwas verwirrend: Wenn min-

geschrieben steht, passiert etwas, wenn die Breite größer ist. In diesem Fall wird die

Breite des Wrappers fest auf 1.230 Pixel gesetzt, und der gesamte Bereich wird hori-

zontal zentriert.

Als Nächstes können Sie sich die Artikel-Teaser vornehmen. Unterhalb von etwa 800

Pixeln Breite sieht das doch ziemlich gedrängt aus. Mit der folgenden Anweisung

heben Sie das Nebeneinanderfließen der Boxen auf und setzen sie untereinander:

@media only screen and (max-width: 800px){.box.teaser {

float: none;margin: 0 0 1em 0;

Page 9: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

2 Umsetzung eines fixen Designs in ein flexibles Layout

54

width: 100%;}

}

Allerdings gibt es dann ein anderes Problem: Die visuelle Hierarchie stimmt nicht

mehr. Die auf 100 % skalierten Bilder wirken wesentlich dominanter als das eigentli-

che Hauptbild. Das kann so nicht bleiben. Aber kein Problem – Sie setzen die Bilder

einfach in den Text:

@media only screen and (max-width: 800px){.box.teaser figure {

width: 30 ;height: 30%;float: left;margin: 0 2% 2% 0;

}}

Das in der Teaser-Box befindliche Bildelement wird auf 30 % skaliert und innerhalb

der Box gefloatet. Nun passen Sie noch die Überschrift <h3> und die Absatzabstände

etwas an, und das Element sieht gut aus (siehe Abbildung 2.5).

Abbildung 2.5 Das erste responsive Layout – »Hello World«!

2.5 Zusammenfassung

55

2.5 Zusammenfassung

In diesem Kapitel haben Sie Ihr erstes vollwertiges responsives Layout umgesetzt.

Mithilfe der drei Zutaten (fluides Raster, anpassungsfähige Inhalte und Media Que-

ries) ist aus einem festen statischen Layout ein anpassungsfähiges entstanden, das

nach oben begrenzt und nach unten gestalterisch angepasst wurde. Sie haben erfah-

ren, wie Sie ein flexibles Raster anlegen, Bildinhalte mit einer einfachen CSS-Anwei-

sung responsiv machen können und mit Media Queries unterschiedliche Layouts je

nach Größe des Anzeigefensters erzeugen.

Im nächsten Kapitel beschreiben wir die Media Queries, also die Schlüsseltechnolo-

gie des Responsive Webdesigns, im Detail.

Page 10: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

247

9 Navigationskonzepte

Kapitel 9

Navigationskonzepte

»It doesn’t matter how many times I have to click, as long as each click is a mindless,

unambiguous choice.«

Steve Krug

Die Navigation ist einer der wichtigsten funktionalen Bereiche einer Website. Was

haben Besucher von interessanten Inhalten im schönsten Design, wenn diese durch

eine undurchschaubare Navigation nur schwer gefunden werden? Frustrierte Besu-

cher verlassen eine Website schon nach wenigen Klicks wieder, wenn sie das Gefühl

haben, ihrem Ziel nicht nähergekommen zu sein.

Eine Navigation muss sich dem Besucher einfach erschließen. Er braucht eine grobe

Übersicht über die gesamte Website, die feiner wird, je weiter er in der Ebenenhierar-

chie hinabsteigt. Unerwartete Seitensprünge sollten genauso vermieden werden wie

tote Enden, von denen es kein Vor und Zurück mehr über die eigene Seitennaviga-

tion gibt.

In diesem Kapitel zeigen wir Ihnen, worauf Sie bei responsiven Webseiten besonders

achten müssen, und stellen einige Navigationskonzepte (Patterns) vor. Anhand des

Praxisbeispiels erstellen Sie eine flexible Navigation.

9.1 Was macht eine Navigation benutzerfreundlich?

Um eine gut bedienbare Navigation zu erstellen, müssen Sie viele Faktoren berück-

sichtigen; wir können das Thema hier nur streifen. Wichtige Voraussetzungen für

eine gute Navigation sind:

� Semantisches Markup:

– Menüpunkte sind Aufzählungen und deshalb am besten in einer ungeordneten

Liste untergebracht.

– Eine veränderte Auszeichnung aller Links beim Überfahren mit der Maus oder

beim »Durch-Tabben« mit der Tabulatortaste verdeutlicht, welche Links klick-

bar sind.

– Verwenden Sie das semantische HTML5-Element <nav>...</nav> als Container

für Navigationen auf der Seite.

Page 11: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

248

� Verständlichkeit:

– Die inhaltliche Struktur der Navigation sollte logisch aufgebaut sein, sodass die

Besucher verstehen, welche Möglichkeiten diese Website ihnen bietet und wo

sie sich befinden. Eine zusätzliche Pfadnavigation (Breadcrumbs) zeigt dem

Besucher den Weg an, den er zu der Seite gegangen ist, auf der er sich jetzt befin-

det.

– Der aktive Menüpunkt sollte hervorgehoben und nicht verlinkt sein. Die Mög-

lichkeit, die aktuelle Seite über das Menü noch einmal neu zu laden, ist unnötig

und verwirrend. Generell sind Links auf die aktuelle Seite problematisch, da

beim Klicken keine Veränderung stattfindet. Ein Neuaufruf der aktuellen Seite

wirkt daher wie ein Fehler.

� Zugänglichkeit:

– Die Navigation muss auch ausschließlich per Tastatur bedienbar sein.

– Farben und Schriften müssen einen ausreichenden Kontrast aufweisen, um

auch für Menschen mit Sehschwäche erkennbar zu sein.

– Verwenden Sie WAI-ARIA-Rollen <nav role="navigation"> zur Auszeichnung

des Elements, z. B. für Screenreader.

– Aktive Elemente für Zeigegeräte und Touchbedienung müssen Minimalabmes-

sungen haben, um vernünftig »getroffen« zu werden. Dabei kommt es nicht

nur darauf an, dass man das Element treffen kann , sondern auch auf das sub-

jektive Empfinden des Nutzers (»Das ist so klein ...«).

– Eine Navigation mit mehreren Ebenen sollte beim Ausklappen der Unterebe-

nen nicht aus dem Fokus des Benutzers rutschen.

� Robuste Struktur:

– Um ein zu schnelles oder unbeabsichtigtes Auf- und Zuklappen eines Drop-

down-Menüs zu vermeiden, sollten Verzögerungen per JavaScript eingebaut

werden, die das Auf- und Zuklappen auslösen. Dadurch klappt ein Menü auch

bei einem versehentlichen Überfahren mit der Maus nicht sofort auf, und wenn

die Maus einmal kurz von der aktiven Fläche rutscht, ist es nicht gleich wieder

geschlossen.

– Die Navigation muss auch ohne JavaScript funktionieren. Falls das JavaScript

aus irgendeinem Grund nicht geladen werden kann, muss es einen funktiona-

len Fallback geben.

9.2 Benutzerfreundliche Navigation für mobile Geräte

Für das Responsive Design kommen jetzt noch einige Komponenten für eine gute

Bedienbarkeit auf einem kleinen Touchscreen hinzu. Worin unterscheidet sich nun

9.2 Benutzerfreundliche Navigation für mobile Geräte

249

eine Navigation auf mobilen Geräten von der auf dem Desktop, und was sind die

wichtigsten Punkte, die Sie beachten sollten?

9.2.1 Freier Blick auf die Website

Die Navigation sollte nicht den Blick auf das Wesentliche versperren. Hier gilt Con-

tent First. Wenn die Navigation immer im sichtbaren Bereich liegt und einen Großteil

(oder mehr) des Bildschirms ausfüllt, geht das auf Kosten der eigentlichen Inhalte,

die dadurch in den Hintergrund gedrängt werden. Nach dem Klick auf einen Menü-

link ändert sich im schlimmsten Fall nichts im sichtbaren Bereich des kleinen

Screens. Der Nutzer bekommt so keinerlei Feedback über die Auswirkungen seiner

Aktion. Nur sehr neugierige Nutzer (oder verzweifelt Suchende) scrollen wahrschein-

lich nach unten in der Hoffnung, das Gesuchte zu finden. Aber auch Besucher, die

den neuen Inhalt finden, werden es negativ beurteilen, wenn sie bei jedem Navigie-

ren aus dem Menübereich herausscrollen müssen.

Abbildung 9.1 Auf der Startseite der Temple University Japan Campus (http://

www.tuj.ac.jp) mussten (zu) viele Menülinks und Buttons untergebracht werden;

in der Smartphone-Ansicht ist dadurch kein weiterer Inhalt mehr zu sehen.

Darum besteht bei allen Menüs, die aus so vielen Menüpunkten bestehen, dass sich

diese nicht mehr in ein oder zwei Zeilen im Header zusammenfassen lassen, ein spe-

zieller Handlungsbedarf. Das gilt auch für Menüs mit mehreren Ebenen. Es haben

sich mittlerweile viele Umsetzungsvarianten für die Darstellung von komplexen

Menüs auf kleinen Screens etabliert. Wir stellen Ihnen etwas später in diesem Kapitel

einige davon vor.

Page 12: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

250

9.2.2 Ausreichend große Klickflächen für Touchbedienung

Für die Bedienung mit den Fingern ist es wichtig, dass klickbare Elemente ausrei-

chend groß sind. Buttons oder Links sollten nicht zu dicht nebeneinander liegen, um

zu vermeiden, dass der Benutzer versehentlich den Link daneben anklickt. Ausführli-

cher haben wir das Thema ja schon in Abschnitt 5.3.3, »Size matters: Ziele für Touch-

Events«, besprochen.

9.2.3 Umgang mit Menüs mit mehreren Ebenen

Ein anderer Punkt, der schon beim Konzept der Website berücksichtigt werden muss,

ist die Zugänglichkeit einer zweiten und vielleicht sogar dritten Menüebene über

einen Touchscreen.

Eine Dropdown-Navigation, die per Maus-Hover-Effekt oder mit dem Fokuseffekt

der Tastatur gut funktioniert, ist mittels Touchscreen nicht mehr bedienbar – es gibt

kein Hover auf Touchscreens (siehe auch Abschnitt 5.3.4, »Es gibt kein Hover auf

Hawaii ...«). Hier müssen Sie für die mobile Navigation gänzlich umdenken.

Der Touchklick auf einen Menüpunkt muss nun das Untermenü ausklappen, und

erst, wenn es keine weiteren Untermenüpunkte mehr gibt, darf der Touchklick zu

einem Seitenwechsel führen. Der jeweils übergeordnete Menüpunkt sollte dazu

nicht mehr auf eine eigene Seite verweisen, da der Klick bei der Touchbedienung

zum Aufklappen des Menüs gebraucht wird.

Tipp: Dropdown per JavaScript

Es gibt ein JavaScript-Plugin jQuery Touch Menu Hover von dem australischen Unter-

nehmen Izilla Web Solutions (https://github.com/izilla/jQuery-touchMenuHover), mit

dem sich auch solche Dropdown-Menüs realisieren lassen, bei denen der jeweils überge-

ordnete Menüpunkt einen eigenen Seitenlink hat. Beim ersten Klick auf den Menüpunkt

klappt sein Untermenü aus, und erst bei einem zweiten Klick wird der hinterlegte Sei-

tenlink angesteuert. (Lesen Sie dazu auch Abschnitt 9.4, »Multilevel-Menüs«.)

Wenn JavaScript nicht geladen werden kann, wäre dann die oben beschriebene

umständlichere Navigation der Fallback.

9.3 Navigationstypen für mobile Geräte mit Touchscreen

Es gibt viele unterschiedliche Ansätze für die Navigation auf mobilen Geräten. Fin-

dige Entwickler haben diverse JavaScript-Plugins für unterschiedliche Lösungen

gebaut und diese der Allgemeinheit zur Verfügung gestellt. Die Implementierung der

skriptbasierten Varianten ist auch für Webdesigner ohne die notwendigen Java-

Script-Kenntnisse sehr einfach. Alle Ansätze haben ihre Vor- und Nachteile, und für

9.3 Navigationstypen für mobile Geräte mit Touchscreen

251

welchen Navigationstypen Sie sich letztendlich entscheiden, sollten Sie von den

Gegebenheiten Ihres Projektes abhängig machen:

� Gibt es viele Menüpunkte oder sehr lange Bezeichnungen?

� Hat Ihr Menü mehrere Ebenen?

� Gibt es mehrere Menügruppen wie Zielgruppen-, Haupt- und Service-Naviga-

tionen?

Wichtig für die Wahl des Navigationstyps …

… ist aber, dass Sie sich für eine Lösung entscheiden, die den Besucher nicht im Regen

stehen lässt, falls das JavaScript der Website nicht geladen wird. Sie brauchen also

immer einen funktionalen Fallback!

Schauen wir uns die verschiedenen Menütypen einmal an.

9.3.1 Wenige Menüpunkte am oberen Rand

Die denkbar einfachste Variante eines Menüs besteht aus nur wenigen kurzen Menü-

punkten, die am oberen Rand neben oder unter dem Logo angeordnet sind, somit

kaum extra Platz des Screens beanspruchen und das Augenmerk des Besuchers auf

den Inhalt der Seite lenken. Das ist eine gute Ausgangssituation für ein benutzer-

freundliches Menü. Es ist bei jedem Seitenwechsel im sichtbaren Bereich. Der Nutzer

weiß immer, wo er sich befindet, und der Inhalt einer Seite liegt immer im Fokus.

Diese Variante macht kaum zusätzliche Arbeit und ist auf allen Geräten voll funk-

tionsfähig.

Das kompakte Menü am oberen Rand der Website von Trent Walton (siehe Abbil-

dung 9.2) nimmt auch auf kleinen Screens keinen zusätzlichen Platz ein.

Abbildung 9.2 Das kompakte Menü am oberen Rand der Website von Trent Walton nimmt

auch auf kleinen Screens keinen zusätzlichen Platz ein.

Page 13: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

252

Praxisbeispiel: Mininavigation – wenige Menüpunkte am oberen Rand

Kehren wir zurück zu dem Stand des Praxisbeispiels aus Kapitel 7, »Responsive Lay-

out-Patterns«. Dort hatten Sie eine Basisversion und drei weitere Layouts für unter-

schiedliche Viewports angelegt. Die Navigation in der Basisversion ist so angelegt,

dass jeder Menüpunkt über die volle Gerätebreite ausgedehnt wird. Weitere Menü-

punkte reihen sich ein und vergrößern das Menü in der Höhe (siehe Abbildung 9.3).

Abbildung 9.3 Ausgangssituation Praxisbeispiel für alle folgenden Beispiele: Der Platz,

den das Menü hier auf dem Smartphone einnimmt, fehlt dem Inhalt.

Ausgangssituation für alle Beispiele in diesem Kapitel

Die Informationen über das Markup des Praxisbeispiels finden Sie abgedruckt in Kapi-

tel 7, »Responsive Layout-Patterns«, und im Download-Paket auf der Website zum

Buch unter /praxisbeispiele/kap09/00_start-nav/. Auf diesem Code bauen alle weite-

ren Beispiele dieses Kapitels auf, wenn nichts anderes in den einzelnen Abschnitten

vermerkt ist.

Gehen wir in diesem Beispiel davon aus, dass das Menü überschaubar ist und nur

drei Menüpunkte hat, bietet es sich an, schon in der Basisversion das Menü-Styling

der Tablet-Version zu verwenden. Im Praxisbeispiel (im Download-Paket auf der

Website zum Buch unter /praxisbeispiele/kap09/01_mini-nav/) haben wir das ent-

sprechend angepasst. Lediglich Schriftgröße und Abstände sind für die beiden

Ansichten unterschiedlich gewählt (siehe Abbildung 9.4).

9.3 Navigationstypen für mobile Geräte mit Touchscreen

253

Abbildung 9.4 Wenige Menüpunkte findet Platz am oberen Rand.

Abweichend von der Ausgangsdatei unseres Praxisbeispiels werden folgende Styles

für die Navigation in der Basisversion gesetzt:

nav {/* clearing für die floatenden LIs */overflow: hidden;font-size: 1em; /* 18px */

}nav ul {

margin: 0;overflow: hidden;

}nav ul > li {

display: inline-block;}nav ul > li > a, nav ul > li > strong {

display: block;padding: 0.3em 1.4em;

}nav ul a:link {

text-decoration: none;}

Im Media Query ab 750 px Weite (46,875 em) für die Tablets werden dann nur noch

die Schriftgrößen und Abstände vergrößert:

Page 14: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

254

@media only screen and (min-width: 46.875em) {nav {

font-size: 1.2em; /* 18px */}nav ul {

margin: 0 20px;}nav ul > li > a {

padding: 0.7em 10px 0.7em 10px;}

}

Listing 9.1 Auszug aus der Datei layout.css für die Mininavigation

9.3.2 Lange Menüs am oberen Rand

Besteht das Menü nicht nur aus wenigen Punkten, kann man durch geschickte Grup-

pierung der Menüpunkte neben- und untereinander versuchen, die Navigation mög-

lichst kompakt zu halten, um dem Inhalt noch genügend Raum zu geben. Das ist eine

einfache Lösung, die allein mit CSS ohne zusätzliche Skripte funktioniert. Auf kleine-

ren Bildschirmen besteht dann aber doch die Gefahr, dass der Inhalt der Website aus

dem sichtbaren Bereich rutscht.

Chris Coyier hat sein Menü beispielsweise auf kleinen Screens nur mit CSS schon

recht kompakt angeordnet (siehe Abbildung 9.5).

Abbildung 9.5 Kompakte Menüanordnung bei CSS-Tricks von Chris Coyier

(http://css-tricks.com)

9.3 Navigationstypen für mobile Geräte mit Touchscreen

255

Das Regent College (siehe Abbildung 9.6) arbeitet mit einer Kombination aus kom-

pakter, aber übersichtlicher Zusammenfassung der oberen Menüpunkte und einem

zusätzlichen ausklappbaren Menü darunter.

Abbildung 9.6 Das Regent College arbeitet mit einer Kombination aus Zusammen-

fassung der oberen Menüpunkte und einem zusätzlichen Togglemenü darunter

(http://www.regent-college.edu).

9.3.3 Select-Menü

Eine seltenere Lösung zur Darstellung des Menüs in kleinen Viewports ist die

Umwandlung des Menümarkups mittels JavaScript in ein Select-Menü. Menüpunkte

lassen sich so verstecken und trotzdem leicht erreichen. Damit diese Menüs von den

Websitebesuchern auch als solche erkannt werden, ist für diese Art der Navigation

auf jeden Fall eine sehr gute Kennzeichnung notwendig. Das Stylen von <select>-Ele-

menten ist nur in einem begrenzten Maße möglich, was eine Integration in das

Design erschweren kann. Auf mobilen Geräten werden »echte Select-Menüs« durch

Betriebssystem-spezifische Elemente ersetzt – das wird auch am Beispiel der Forty-

Seven Media deutlich (siehe Abbildung 9.7 und Abbildung 9.8).

Page 15: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

256

Abbildung 9.7 Auf dem iPhone entscheidet das Betriebssystem (hier iOS 6), wie ein

Select-Menü aussieht.

Abbildung 9.8 Auf dem iPhone bestimmt das Betriebssystem (hier iOS 7) das Aussehen

des Select-Menüs. (Beispiel: http://fortysevenmedia.com).

Praxisbeispiel: TinyNav – Select-Menü

Zur Erstellung eines solchen Select-Menüs hat Viljami Salminen ein kleines jQuery-

Plugin namens TinyNav (http://tinynav.viljamis.com) veröffentlicht. Sie finden das

9.3 Navigationstypen für mobile Geräte mit Touchscreen

257

folgende Beispiel im Download-Paket auf der Website zum Buch unter /praxisbei-

spiele/kap09/02_select-nav/. Um die Navigationsleiste des Praxisbeispiels in kleinen

Viewports als Select-Menü darzustellen, haben wir die JavaScript-Datei von tinynav.js

unter der jQuery-Einbindung vor dem schließenden <body>-Tag untergebracht (siehe

Listing 9.2). Zur Initialisierung haben wir die Funktion tinyNav() an die ID #navMain

unseres Hauptmenüs geknüpft. Mit dem Setzen von header: 'Menu' wird ein zusätzli-

ches <option>-Tag Menu zur Kennzeichnung der Navigation erstellt.

<script src="../js/jquery.js"></script><script src="../js/tinynav.js"></script><script>

$(function () {$('#navMain').tinyNav({

header: 'Menu'});

});</script>

Listing 9.2 JavaScript-Einbindung für das Select-Menü TinyNav in unserem Praxisbeispiel

Das Select-Menü, das nun im Basislayout statt der Navigationsliste dargestellt wird,

schieben wir nach rechts (per float). Die normale Navigation #navMain setzen wir für

kleine Screens auf display: none. Für größere Viewports drehen wir die Ausgabe um.

Jetzt wird das Select-Menü versteckt und die normale Navigation wieder sichtbar.

.tinynav {display: block;float: right;

}#navMain {

display: none;}@media only screen and (min-width: 46.875em) {

.tinynav {display: none;

}#navMain {

display: block;}

}

Listing 9.3 Ein- und Ausblenden sowie Positionierung des Menüs

Page 16: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

258

Das funktioniert so weit ganz gut, aber wenn Sie das JavaScript in Ihrem Browser

deaktivieren, werden Sie feststellen, dass es in der Basisversion gar keine Navigation

mehr gibt.

Ergänzung eines Fallbacks, falls JavaScript nicht zur Verfügung steht

Der Container #navMain darf also nur versteckt werden, wenn der Browser JavaScript

verarbeiten kann. Um das zu prüfen, haben wir eine Klasse .js-off in das <html>-Tag

gesetzt und tauschen sie per JavaScript gegen eine andere (nämlich .js-on) aus. Diese

Klasse verwenden wir dann zum Aus- und Wieder-Einblenden des Menüs.

<html class="js-off">

Listing 9.4 Ergänzung im <html>-Tag, um zu prüfen, ob JavaScript aktiv ist

Nun folgt das JavaScript für den Austausch der Klasse .js-off durch .js-on im <html>-

Tag:

<script src="../js/jquery.js"></script><script src="../js/tinynav.js"></script><script>

$(function () {// Wenn JS aktiv remove "js-off" und setze "js-on"$('html').addClass('js-on');$('html').removeClass('js-off');$('#navMain').tinyNav({

header: 'Menu'});

});</script>

Listing 9.5 JavaScript-Erkennung und Einbindung für das Select-Menü

TinyNav in unserem Praxisbeispiel

Nur wenn die Klasse .js-on #navMain vorhanden ist, wird das Menü in der Basisver-

sion aus- und für größere Viewports wieder eingeblendet.

.tinynav {display: block;float: right;

}.js-on #navMain {

display: none;}

9.3 Navigationstypen für mobile Geräte mit Touchscreen

259

@media only screen and (min-width: 46.875em) {.tinynav {

display: none;}.js-on #navMain {

display: block;}

}

Listing 9.6 Ein- und Ausblenden sowie Positionierung des Menüs (mit Fallback)

Wenn Sie jetzt in Ihrem Browser JavaScript deaktivieren, wird das Menü als Liste

untereinander dargestellt. Das verbraucht zwar ziemlich viel Platz, aber der Nutzer

kann sich nun trotz allem durch die Seite bewegen.

JavaScript-Weiche über CSS-Klassen mit und ohne jQuery

Im Beispiel eben haben wir die jQuery-Funktionen addClass() und removeClass() für

die JavaScript-Erkennung verwendet, da wir hier für das Plugin tinyNav.js jQuery

sowieso einsetzen.

Das geht natürlich auch schlanker mit reinem JavaScript. Um unterschiedliche Styles

anzuwenden, je nachdem, ob JavaScript aktiv ist oder nicht, führen Sie die folgenden

Schritte aus:

Fügen Sie dieses kleine JavaScript direkt nach dem <title> in den Seitenkopf ein:

<script>document.documentElement.className += "js";

</script>

Wenn JavaScript aktiv ist, wird dadurch eine Klasse ".js" für das Element <html> (also

<html class="js">) gesetzt.

Mit dieser Klasse (.js) können Sie andere Selektoren kombinieren und dadurch unter-

schiedliche Eigenschaften zuweisen, je nachdem, ob JavaScript aktiv ist oder nicht.

<script>.etwas { /* wenn kein JS verfügbar */ }.js .etwas { /* wenn JS verfügbar */ }

</script>

Diese simple Art der JavaScript-Erkennung und Fallback-Erstellung ist auch für alle

anderen Menübeispiele wichtig. (Wenn Sie Modernizr einsetzen, haben Sie die Erken-

nung schon mit an Bord.)

Page 17: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

260

Abbildung 9.9 Praxisbeispiel: Menü in einer Auswahlbox (Select-Menü) im kleinsten View-

port

9.3.4 Navigation per Anker am Ende des Seiteninhalts

Ein längeres Menü kann für kleine Viewports an den unteren Seitenrand verschoben

werden. Über einen Menülink im oberen Bereich springt man dann zu einem Anker

am Ende der Seite, um dort zu navigieren. Von Vorteil ist, dass es sich hierbei um eine

Lösung ohne zusätzliche Skripte handelt, die auf allen Systemen sicher funktioniert.

Das Menü versperrt bei einem Seitenwechsel nicht die Sicht auf den eigentlichen

Inhalt, da man wieder am Kopf der neuen Seite landet.

Für die Nutzer kann es erst einmal verwirrend sein, dass die Navigation am Ende der

Seite steht. Der Menü-Ankerlink von oben ist ganz wichtig. Hilfreich, um unnötiges

Scrollen zu vermeiden, ist zusätzlich ein »Nach-oben«-Link aus dem Menübereich

zurück.

Momentum haben dieses Navigationskonzept gewählt, obwohl sie nur wenige

Menüpunkte unterbringen mussten (siehe Abbildung 9.10).

Praxisbeispiel: Footer-Navigation mit Anker

Um das Prinzip der Footer-Navigation zu veranschaulichen, haben wir diese einfache

Variante in unser Praxisbeispiel integriert. Sie finden es im Download-Paket auf der

Website zum Buch unter /praxisbeispiele/kap09/03_footer-nav/.

9.3 Navigationstypen für mobile Geräte mit Touchscreen

261

Abbildung 9.10 Bei Momentum rutscht die Navigation auf kleinen Screens ans Ende der

Seite (http://builtwithmomentum.com/work).

In diesem Beispiel brauchen Sie einen zusätzlichen Container div.page um den

inhaltlichen Bereich herum, unter dem das <nav>-Element in der Basisversion ange-

zeigt werden soll:

<div class="page"><header id="top" role="banner">

<h1>...</h1><a class="toggle-nav" href="#navMain">Menü</a>

</header><nav>

<ul id="navMain" class="main-nav"><li><a href="#">...</a></li><li><a href="#">...</a></li><li id="back-to-top">

<a href="#top" title="Zum Seitenanfang"> -- -- </a></li>

</ul></nav><div class="main">...</div>

</div> <!-- div.page – Ende --><footer>...</footer>

Listing 9.7 Auszug aus der HTML-Datei mit dem zusätzlichen Wrap div.page für

die Positionierung der Navigation vor dem Footer

Page 18: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

262

Dem Container div.page geben Sie ein display: table und dem <nav> ein display:

table-footer-group, und schon schiebt sich die Navigation an das Ende des Contai-

ners. Über den Menülink aus dem Header heraus springt der Nutzer zu einem Anker

in das Menü am Ende der Seite, über einen »Nach-oben«-Link kann er dann wieder an

den Anfang der Seite navigieren. Der »Nach-oben«-Link im Menü #back-to-top wird

in der Basisversion nach rechts eingerückt und für Viewports ab 46,875 em wieder

ausgeblendet.

#back-to-top {text-align: right;

}.page {

display: table;}nav {

display: table-footer-group;}@media only screen and (min-width: 46.875em) {

.page {display: block;

}nav {

display: block;}a.toggle-nav {

display: none;}#back-to-top {

display: none;}

}

Listing 9.8 CSS-Anpassungen für das Footer-Menü mit Anker

Das CSS für das Menü selbst wird unverändert beibehalten. Was jetzt noch fehlt, ist

die Auszeichnung für den Menülink in der Kopfzeile (siehe Listing 9.9):

header {position: relative;

}a.toggle-nav {

display: inline-block;position: absolute;right: 5%;

9.3 Navigationstypen für mobile Geräte mit Touchscreen

263

top: 1em;text-decoration: none;border-radius: 0.4em;cursor: pointer;padding: 0.357em;color: #D0E4F2;background: #4A6491;border: 1px solid #4A6491;

}a.toggle-nav:hover {

border: 1px solid #D0E4F2;background: #D0E4F2;color: #1A1F2B;

}

Listing 9.9 CSS-Auszeichnungen für den Menülink oben rechts (gilt für alle Beispiele)

Der <header> bekommt ein position: relative, damit der Menülink absolut in ihm

positioniert werden kann. Der Menülink besteht hier nur aus Text. Wenn Sie ein

Icon verwenden wollen, achten Sie darauf, dass es auch verständlich ist (siehe Ab-

schnitt 6.1.3, »Verständlichkeit«).

Abbildung 9.11 Nach Klick auf den Menübutton landet man im Menü am Ende der Seite.

Bei den bislang beschriebenen Varianten ist das Menü jederzeit irgendwo in der Seite

sichtbar und zugänglich. Ein anderer Ansatz ist, die Navigation aus dem sichtbaren

Bereich zu entfernen und sie erst nach einer Aktion durch den Benutzer wieder ein-

zublenden.

Page 19: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

264

9.3.5 Toggle-Menü

Das Toggle-Menü (von »to toggle« = »umschalten«) hat die größte Verbreitung bei

der mobilen Navigation. Durch das Drücken auf einen Menülink wird das Menü

sichtbar. Dabei kann es sich oberhalb der Website oder unter der Logoleiste aufschie-

ben, oder es legt sich über die darunter liegenden Bereiche. Nach Auswahl eines

Menüpunktes wird die neue Seite geladen, und das Menü ist wieder ausgeblendet.

Die Umsetzung dafür kann mit JavaScript erfolgen oder nur mit CSS. Wir stellen

Ihnen drei unterschiedliche Varianten in unserem Praxisbeispiel vor.

Praxisbeispiel: Toggle-Menü mit JavaScript

Die erste Variante (im Download-Paket auf der Website zum Buch in der Datei zum

Herunterladen unter /praxisbeispiele/kap09/04_toggle-nav-js/) erzeugen wir den

Toggle-Effekt durch ein kleines auf jQuery basierendes JavaScript. Wir verwenden

dazu wieder die normale HTML-Anordnung; die Navigation sitzt also wieder direkt

hinter dem <header> und nicht mehr vor dem <footer> wie im letzten Beispiel.

Abbildung 9.12 Der User »toggelt« das Menü.

Die beiden JavaScript-Dateien binden Sie am Ende der HTML-Datei vor dem schlie-

ßenden <body>-Tag ein.

<script src="../js/jquery.js"></script><script src="../js/togglemenu.js"></script>$(document).ready(function(){

$('html').addClass('js-on');$('html').removeClass('js-off');var navToggle = ['<div id="toggleNavMain"><a href="#"class="toggle-nav">Menü</a></div>'].join("");

9.3 Navigationstypen für mobile Geräte mit Touchscreen

265

$("header").append(navToggle);});

$(function() {var pull = $('#toggleNavMain');menu = $('#navMain');menuHeight = menu.height();

$(pull).on('click', function(e) {e.preventDefault();menu.slideToggle();

});

$(window).resize(function() {var screen = $(window).width();if(screen > 320 && menu.is(':hidden')) {

menu.removeAttr('style');}

});});

Listing 9.10 togglemenu.js

Die Datei togglemenu.js sorgt dafür, dass der Menülink erstellt wird. Hier finden Sie

an oberster Stelle die JavaScript-Erkennung, die wir schon in Abschnitt 9.3.3, »Select-

Menü«, beschrieben haben. Wenn JavaScript im Browser aktiviert ist, wird die Klasse

.js-off aus dem <html>-Tag entfernt und durch .js-on ersetzt. Zum Ausblenden des

Menüs wird die Klasse .js-on genutzt. Wenn also JavaScript im Browser nicht akti-

viert ist, dann wird weder das Menü ausgeblendet noch der Menülink erzeugt.

Dadurch ist sichergestellt, dass die Navigation auch ohne JavaScript bedienbar ist.

In der Funktion zum Ein- und Ausblenden des Menüs wird mit preventDefault() das

Standardverhalten des Links verhindert und stattdessen das Umschalten des Menüs

onClick aktiviert. Das Menü wird per JavaScript auf display: none gesetzt. Damit es

wieder eingeblendet wird, falls das Browserfenster danach vergrößert wird, gibt es

die JavaScript-Funktion resize(). Hier wird für Screens, die breiter als 320 px sind,

das style="display: none" aus der UL entfernt.

Das Menü ist auf kleinen Viewports also erst einmal ausgeblendet; somit haben die

Nutzer freie Sicht auf die Inhalte und können das Menü bei Bedarf anzeigen lassen.

Die Position rechts oben hat sich inzwischen bei mobilen Sites, die diese Art der Navi-

gation nutzen, weitgehend eingebürgert, entweder mit einem beschrifteten Button

oder einer Grafik. Wir bevorzugen die ausgeschriebene Variante, da sie deutlich bes-

ser erkannt wird (siehe auch dazu Abschnitt 6.1.3, »Verständlichkeit«).

Page 20: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

266

Die Styles für den Menülink rechts oben sind unverändert, wie in Listing 9.9

beschrieben. Das Menü selbst wird in kleineren Viewports versteckt und in größeren

wieder sichtbar gemacht, wenn die Klasse .js-on verfügbar ist. In den höheren Auflö-

sungen muss dann noch der Button zum Ein- und Ausblenden des Menüs entfernt

werden (siehe Listing 9.11).

.js-on #navMain {display: none;

}@media only screen and (min-width: 46.875em) {

a.toggle-nav,.js-on #navMain {

display: block;}

}

Listing 9.11 Zusätzliche Styles für das Toggle-Menü mit togglemenu.js

Praxisbeispiel: Toggle-Menü nur mit CSS

Im letzten Beispiel bestand der Fallback, wenn kein JavaScript verfügbar war, darin,

dass die Navigation dann einfach ausgeklappt blieb. Es gibt aber auch die Möglich-

keit, ein Toggle-Menü ausschließlich mit CSS umzusetzen. Dafür wird die CSS-Pseu-

doklasse :target verwendet. In der folgenden Variante des Praxisbeispiels (auf der

Website zum Buch im Download-Paket unter /praxisbeispiele/kap09/05_toggle-nav-

css/) setzen wir diese Variante um.

Abbildung 9.13 Praxisbeispiel: CSS-Toggle-Navigation

9.3 Navigationstypen für mobile Geräte mit Touchscreen

267

Als Ausgangssituation für dieses Beispiel können Sie wieder /kap9/01start-nav ver-

wenden. Zusätzlich brauchen Sie einen Menülink mit einem Anker, der auf die ID der

Navigationsliste #navMain zeigt:

<header role="banner"><h1>Websitetitle</h1><a id="toggleNav" class="toggle-nav" href="#navMain">Menü</a>

</header><nav id="nav" role="navigation">

<ul id="navMain" class="main-nav"><li><a href="#">Link 1</a></li><li>...</li><li>...</li>...

</ul></nav>

Listing 9.12 Auszug aus dem HTML-Code für das CSS-Target-Menü

Wenn der Menülink angeklickt wird, bekommt die Liste <ul id="navMain ... > die

Pseudoklasse :target zugewiesen, die dann für das Einblenden des Menüs verwendet

wird. Das CSS für den Menülink selbst ist unverändert, wie auch schon in den vorher-

gehenden Beispielen und in Listing 9.9 beschrieben.

#navMain {display: none;

}#navMain:target {

display: block;}@media only screen and (min-width: 46.875em) {

#navMain {display: block;

}a.toggle-nav {

display: none;}

}

Listing 9.13 Zusätzliche Styles für das CSS-Target-Menü

Die Navigation #navMain wird versteckt und nur für :target und für Screens ab 750 px

(46,875 em) Weite wieder eingeblendet. Der Menülink wird in größeren Viewports

versteckt.

Page 21: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

268

Das Pseudoelement :target wird von allen modernen Browsern (ab IE 9) unterstützt.

Ein nachteiliger Nebeneffekt dieser Lösung sei allerdings auch nicht verschwiegen:

Wenn der Nutzer das Menü ausklappt, erzeugt er einen zusätzlichen Eintrag in der

Browserhistory. Das bedeutet, dass der »Zurück«-Button des Browsers nicht zur vor-

herigen Seite zurückführt, sondern nur das Menü wieder einklappt.

Praxisbeispiel: Toggle-Menü mit dem Responsive-Nav-Plugin

Die dritte Variante eines Toggle-Menüs ist ein kleines leichtgewichtiges JavaScript-

Plugin namens Responsive Nav (http://responsive-nav.com) des finnischen Entwick-

lers Viljami Salminen, mit dem man sehr schnell und einfach eine »togglebare« Navi-

gation aufbauen kann. Wir haben das in unserem Praxisbeispiel (im Download-Paket

auf der Website zum Buch unter /praxisbeispiele/kap09/06_toggle-responsivenav/)

in unserer vorhandenen Struktur einmal getestet. Das Download-Paket können Sie

direkt von oben genannter Website oder von https://github.com/viljamis/responsive-

nav.js herunterladen. Es beinhaltet auch mehrere Beispiele für den Einsatz.

Abbildung 9.14 Praxisbeispiel: Toggle-Navigation mit Responsive Nav

Die HTML-Datei bleibt wie gehabt; nur die Einbindung des Menülinks wird diesmal

durch das Plugin vorgenommen.

<header role="banner"><h1>Websitetitle</h1>

</header>

9.3 Navigationstypen für mobile Geräte mit Touchscreen

269

<nav id="nav" role="navigation"><ul id="navMain" class="main-nav">

<li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li>...</li>...

</ul></nav>

Listing 9.14 Auszug aus dem HTML-Code für das Responsive-Nav-Beispiel

Die JavaScript-Datei responsive-nav.min.js binden Sie vor dem schließenden <body>-

Tag ein. Die JavaScript-Konfiguration haben wir so angepasst, dass der Anker zum

Umschalten vor dem Menü eingebunden wird. Die Navigation soll darunter ausge-

fahren werden, wie auch in den Beispielen vorher.

<script src="../js/responsive-nav.min.js"></script><script>

var navigation = responsiveNav("#nav", {insert: "before"

});</script>

Listing 9.15 JavaScript-Einbindung und Konfiguration für Responsive Nav

vor dem schließenden <body>-Tag

In der Datei responsive-nav.css gibt es Standard-Styles für #nav ul und #nav li, die wir

nicht übernommen haben – wir verwenden weiterhin unsere eigenen Styles für die

Navigation. Übernommen haben wir jedoch das CSS, das für die JavaScript-Erken-

nung benötigt wird. In den Beispielen vorher haben wir das mit den Klassen .js-off

und .js-on aus unserem eigenen Skript gemacht. Hier wird jetzt die Klasse .js in das

<html>-Element gesetzt. Wenn also JavaScript aktiv ist und .js existiert, wird die #nav

versteckt und »getoggelt«. Das heißt, dass unser Menü auch hier ohne JavaScript

zugänglich ist: Es wird dann nicht versteckt.

.js #nav {clip: rect(0 0 0 0);max-height: 0;position: absolute;display: block;overflow: hidden;zoom: 1;

}

Page 22: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

270

#nav.opened {max-height: 9999px;

}

Listing 9.16 CSS-Anweisungen, die wir aus der Datei responsive-nav.css übernehmen

Der hohe Wert von 9.999 px für #nav.opened dient als Fallback, falls die JavaScript-

Berechnung der realen maximalen Höhe der geöffneten Navigation fehlschlägt.

Für den Menü-Toggle-Button haben wir ebenfalls unsere eigenen Styles verwendet,

die wir in diesem Beispiel auf die #nav-toggle gelegt haben, da das Plugin Responsive

Nav diese mitbringt. Der Menülink ist wieder absolut in der oberen Leiste posi-

tioniert.

#nav-toggle {display: inline-block;position: absolute;right: 5%;top: 1em;border-radius: 0.4em;cursor: pointer;padding: 0.357em;color: #D0E4F2;background: #4A6491;border: 1px solid #4A6491;

}#nav-toggle:hover {

border: 1px solid #D0E4F2;background: #D0E4F2;color: #1A1F2B;

}

Listing 9.17 CSS für den Menülink

Als Letztes muss noch für größere Viewports der Button zum Umschalten des Menüs

aus- und das Menü selbst wieder eingeblendet werden. Dazu haben wir aus der Datei

responsive-nav.css des Plugins die passenden Styles übernommen, aber den View-

port an unsere Bedürfnisse angepasst. Der Breakpoint, an dem sich die Darstellung

unseres Menüs verändert, liegt bei 750 px (46,875 em). Daraus folgt:

@media only screen and (min-width: 46.875em) {.js #nav {position: relative;

}

9.3 Navigationstypen für mobile Geräte mit Touchscreen

271

.js #nav.closed {max-height: none;

}#nav-toggle {display: none;

}}

Listing 9.18 CSS zum Aufheben der vorher definierten Styles für größere Viewports

9.3.6 Off-Canvas-Menü

Eine technisch recht anspruchsvolle, aber schöne Lösung ist das Off-Canvas-Menü.

Dabei wird das Menü neben oder über dem Hauptinhalt angeordnet und dieser

Bereich im Normalfall nicht angezeigt. Nach Klick auf einen Menülink schiebt sich

dann das Menü von oben oder von der Seite in den Viewport und überlagert entwe-

der den Inhalt, oder es schiebt für die Dauer der Menüwahl den Inhalt aus dem View-

port.

Beim iPhone kennt man die Off-Canvas-Menüführung von Apps wie Facebook oder

Spotify. In Kapitel 7, »Responsive Layout-Patterns«, haben wir Ihnen die Off-Canvas-

Technik auch schon als Layoutkonzept vorgestellt.

Abbildung 9.15 Schematische Darstellung Off-Canvas-Menü

Page 23: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

272

Abbildung 9.16 Nixon arbeitet mit einem Off-Canvas-Menü für kleine Viewports

(http://www.nixon.com).

Praxisbeispiel: responsives Off-Canvas-Menü

David Bushell hat Anfang des Jahres 2013 ein Tutorial beim »Smashing Magazine«

(siehe Kasten »Implementing Off-Canvas Navigation For A Responsive Website«) für

die Erstellung eines benutzerfreundlichen Off-Canvas-Menüs geschrieben. Die Ani-

mationen, mit denen das Menü ein- und ausgeblendet wird, hat er nicht mit Java-

Script, sondern mit CSS-Transitions umgesetzt, was für eine wesentlich bessere

Performance sorgt. Er arbeitet mit einem kleinen JavaScript und Modernizr, um per

Feature-Detection festzustellen, ob bestimmte CSS3-Eigenschaften vom jeweiligen

Browser unterstützt werden, und diese dann über die von Modernizr im <html>-Tag

eingefügten Klassen zuzuweisen. Für Browser, die diese Eigenschaften nicht unter-

stützen, bietet er einfachere Alternativen. In mehreren Teilbeispielen erklärt er den

gesamten Weg der »richtigen« Umsetzung und hat die einzelnen Teilschritte auch

als Demos auf GitHub zur Verfügung gestellt (https://github.com/dbushell/Respon-

sive-Off-Canvas-Menu).

Implementing Off-Canvas Navigation For A Responsive Website

Wenn Sie sich intensiv damit beschäftigen und im Detail verstehen möchten, worauf

Sie bei der Umsetzung eines Off-Canvas-Menüs achten sollten, empfehlen wir Ihnen

9.3 Navigationstypen für mobile Geräte mit Touchscreen

273

das tolle englischsprachige Tutorial von David Bushell (http://www.smashingmaga-

zine.com/2013/01/15/off-canvas-navigation-for-responsive-website) und den Artikel

von Kyle Peatt (http://www.smashingmagazine.com/2014/02/24/off-the-beaten-

canvas-exploring-the-potential-of-the-off-canvas-pattern).

Das Unternehmen Cloudfour hat sich an dem Best-Practice-Beispiel von David Bu-

shell orientiert und für seine eigenen Projekte ein Plugin namens Off Canvas Menu

geschrieben und auf GitHub veröffentlicht (https://github.com/cloudfour/offCanvas-

Menu). Die Implementierung eines eigenen Off-Canvas-Menüs wird damit ganz

einfach.

Das Plugin funktioniert sowohl mit jQuery als auch mit der leichtgewichtigen Java-

Script-Bibliothek Zepto. Auch hier kann Modernizr verwendet werden, um entspre-

chende Klassen für die CSS3-Animationen einzufügen. Wird Modernizr nicht

eingebunden (oder unterstützt der Browser keine CSS-Animationen), werden Java-

Script-Animationen verwendet, die allerdings mehr auf die Performance gehen.

Cloudfour arbeitet zusätzlich noch mit zwei weiteren Skripten, nämlich fastclick.js

zum Verhindern der Klickverzögerung auf Geräten mit Touchdisplays (https://

github.com/ftlabs/fastclick) und csswatch.js zum Aufspüren von und Reagieren auf

CSS-Veränderungen einzelner Attribute mit JavaScript (https://github.com/leifcr/

jquery-csswatch).

Für die Integration in das Praxisbeispiel (im Download-Paket auf der Website zum

Buch unter /praxisbeispiele/kap09/07_offcanvas-nav/) haben wir die IDs aus dem

Plugin verwendet (#menu-trigger und #menu). Der Menülink a.toggle-nav erhält die

id="menu-trigger", und dem <nav>-Tag haben wir die id="menu" gegeben. Das sieht

dann so aus:

<header id="top"><h1>...</h1><a id="menu-trigger" class="toggle-nav" href="#menu">Menu</a>

</header><nav id="menu">

<ul class="main-nav"><li><a href="#">...</a></li><li><a href="#">...</a>...

</ul></nav>

Listing 9.19 HTML-Anpassungen für das Off-Canvas-Menü

von Cloudfour in unserem Praxisbeispiel

Page 24: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

274

Im nächsten Schritt werden noch die benötigten JavaScripts in die HTML-Datei ein-

gebunden. Das modernizr.js muss möglichst weit oben untergebracht werden, damit

die Modernizr-Klassen schon beim Aufbau der Seite zur Verfügung stehen. Alle ande-

ren Skripte rutschen an das Seitenende hinter die entsprechende JavaScript-Biblio-

thek (jQuery oder Zepto).

<!-- Einbindungen im <head>-Tag --><script src="../js/modernizr.js"></script><!-- Einbindungen vor dem schließenden <body>-Tag --><script src="../js/jquery.js"></script><script src="../js/cloudfour.fastclick.js"></script><script src="../js/cloudfour.csswatch.js"></script><script src="../js/cloudfour.offcanvasmenu.js"></script><script src="../js/cloudfour.example.js"></script>

Listing 9.20 JavaScript-Einbindung für das Off-Canvas-Menü von

Cloudfour in unserem Praxisbeispiel

Sind die JavaScript-Dateien in die eigene Seite eingebunden (siehe Listing 9.20), dann

muss noch das CSS entsprechend angepasst werden. Da wir unser Menü-Styling

unverändert beibehalten wollen, haben wir auf eine Übernahme der Standard-Styles

des Plugins verzichtet. Alle Menüauszeichnungen bleiben unverändert.

Die Styles für den Menülink selbst sind ebenfalls unverändert (siehe Listing 9.9). Der

Menülink a.toggle-nav wird für größere Viewports auf display: none; gesetzt, und

dem Off-Canvas-Menü haben wir eine Hintergrundfarbe gegeben.

body.off-canvas-menu #menu {background: #85A5CC;

}.no-js a.toggle-nav {

display: none;}@media only screen and (min-width: 46.875em) {a.toggle-nav {

display: none;}

}

Listing 9.21 Zusätzliche Auszeichnungen für das Off-Canvas-Menü-Beispiel:

Das Menü selbst bleibt unverändert.

Jetzt lässt sich noch konfigurieren, ob das Menü von rechts oder links in den View-

port geschoben wird und wie viel Prozent des Bildschirms es dabei belegen darf:

9.4 Multilevel-Menüs

275

$.offCanvasMenu({direction : right,coverage : '70%'

)};

Listing 9.22 Initialisierung des Menüs in der cloudfour.example.js

Achten Sie darauf, dass der Menülink in der Nähe des sich öffnenden Off-Canvas-

Menüs untergebracht ist. Da er auch zum Schließen des Menüs verwendet werden

kann, sollte er nicht aus dem Viewport geschoben werden (Abbildung 9.17).

Abbildung 9.17 Praxisbeispiel: Off-Canvas-Menü

Auf der Website zum Buch finden Sie noch ein weiteres Beispiel mit dem Off-Canvas-

Plugin, bei dem als Fallback das Footer-Menü eingebunden ist (im Download-Paket

auf der Website zum Buch unter /praxisbeispiele/kap09/08_offcanvas-footer-nav/).

9.4 Multilevel-Menüs

Menüs mit mehreren Ebenen stellen eine besondere Herausforderung im responsi-

ven Layout dar. Auf Desktoprechnern wird von verschachtelten Menüs oft nur die

erste Ebene dargestellt, entweder in einer vertikalen oder in einer horizontalen

Anordnung. Beim Überfahren eines Menüpunktes mit der Maus oder beim Klick auf

einen Menüpunkt öffnet sich dann das Untermenü. Auf dem Desktop ist technisch

sowohl das eine als auch das andere möglich. Bei einem Menü in der Seitenleiste, bei

Page 25: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

276

dem alle Menüpunkte untereinander dargestellt werden, ist es allerdings nicht sinn-

voll, bei jedem Darüberfahren mit der Maus das Öffnen und Schließen auszulösen,

weil sich ja jedes Mal der gesamte Rest des Menüs nach oben oder unten verschiebt.

Ein Aus- und Einklappen weiterer Ebenen beim Hovern wirkt hier sehr unruhig (es

sei denn, Sie lassen die nächste Ebene seitlich erscheinen).

Abbildung 9.18 Multilevel-Menü mit aufgeklapptem Untermenü auf Desktop,

Tablet(-Größe) und Smartphone

Bei einer Verwendung des Menüs in einer horizontalen Leiste hingegen funktioniert

sowohl das Ausklappen beim Hovern als auch das Ausklappen nach Anklicken. Aber

was machen Sie mit dem Menü in der gleichen Ansicht auf einem Tablet mit Touch-

bedienung – dort gibt es ja kein Hover. Auch wenn der Platz ausreichend groß sein

kann, um die gleiche Darstellung zu verwenden wie auf Desktoprechnern: Wie kom-

men Sie ohne den Hover-Effekt an die nächsttiefere Menüebene heran, um von dort

aus weiter zu navigieren?

9.4.1 Die native Einbindung von Multilevel-Menüs auf iOS und Android

Das native Verhalten von Geräten mit Touchdisplay bei der Interpretation von

Hover-Menüs mit mehreren Ebenen ist in Teilen nicht schlecht, aber leider recht

9.4 Multilevel-Menüs

277

unterschiedlich bei den einzelnen Geräten. In der Praxis zeigen sich aktuell einige

zum Teil gravierende Probleme:

� iOS-Systeme wandeln einen Hover selbstständig in eine »Touchkaskade« um. Das

heißt, wenn Sie ein Menü mit Hover-Effekt verwenden, löst der erste Touch den

eigentlichen Hover-Effekt aus und erst der zweite den Link. Unter Android gibt es

dieses Verhalten nicht. Hier führt der erste Touch sofort auf die verlinkte Seite; das

Hover-Menü wird ignoriert.

� Touch-Events werden bei Android < 4.3 an untergeordnete Elemente durchge-

reicht und lösen ungewollt den unter dem tatsächlich »getouchten« Element lie-

genden Link der nächsten Ebene aus.

Die Lösung: JavaScript

Wie gesagt: Das ist das native Verhalten der Geräte für Hover-Menüs mit mehreren

Ebenen. Durch die Verwendung von JavaScript bekommt man diese Probleme in den

Griff, wie Sie gleich sehen werden.

Nachvollziehen können Sie das Beispiel ohne JavaScript-Anpassungen für Touch-

geräte (vorausgesetzt, Sie haben das passende Gerät) mit dem Praxisbeispiel auf der

Website zum Buch (oder mit dem Beispiel aus dem Download-Paket unter /praxisbei-

spiele/kap09/09_multilevel-ohneJS/).

Zum Testen sind hier unterhalb des Navigationspunktes »Navitest« fünf Testseiten

verlinkt. Über den Link auf dem Logo (Websitetitle) kommen Sie immer wieder

zurück zur Startseite des Beispiels. Der Seitenlink des Menüpunktes »Navitest«

wurde hier für Android entfernt. Das folgende Beispiel mit der JavaScript-Anpassung

für Touchscreens finden Sie unter /praxisbeispiele/kap09/10_multilevel-mitJS. Hier

funktioniert das Menü auch gut, wenn der Menüpunkt »Navitest« seinen Seitenlink

behält.

Praxisbeispiel: Multilevel-Menü mit DoubleTabToGo.js

Um das Multilevel-Menü jetzt auch für mobile Geräte mit Touchscreen bedienbar zu

machen, verwenden wir in diesem Beispiel das Skript DoubleTabToGo.js, das der

litauische Webentwickler Osvaldas Valutis in seinem Beispiel zu responsiven

Dropdown-Menüs (http://osvaldas.info/drop-down-navigation-responsive-and-touch-

friendly) veröffentlicht hat.

Das Menü ist als ungeordnete Liste umgesetzt, diesmal in einer verschachtelten Liste

für die zweite Menüebene:

<nav id="nav" role="navigation"><ul id="navMain" class="main-nav first-level"><li><a href="navitest.html">Navitest</a>

<ul class="sec-level">

Page 26: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

278

<li><a href="navitest-01.html">Navitest-01</a></li><li><a href="navitest-02.html">Navitest-02</a></li>...

</ul></li><li><a href="#">Level-01</a>

<ul class="sec-level"><li><a href="#">Level-02</a></li>...

</ul></li>...

</ul></nav>

Listing 9.23 HTML-Auszug: Multilevel-Navigation

Beim Überfahren mit der Maus wird das Untermenü angezeigt. Das erreichen Sie mit

der CSS-Anweisung li:hover ul {display:block;}, die das zuvor auf display: none

gesetzte Menü der zweiten Ebene einblendet. In den unterschiedlichen Viewports

wird es genauso wie unsere Beispiele vorher angeordnet, nur dass die zweite Ebene

noch ein paar zusätzliche Styles bekommt.

Am Ende vor dem schließenden <body>-Tag werden nun noch das kleine jQuery-

Plugin und der Funktionsaufruf eingefügt:

<script src="../js/jquery.js"></script><script src="../js/doubletaptogo.js"></script><script>

$(document).ready(function() {$('#navMain li:has(ul)').doubleTapToGo();

});</script>

Listing 9.24 DoubleTabToGo verhindert sofortiges Auslösen des zweiten Taps.

Beim ersten Tap auf einen übergeordneten Menülink verhindert das Skript, dass der

Browser die dahinter liegende URL öffnet – bei einem zweiten Tap wird dann die

Weiterleitung erlaubt und ausgeführt. Auf diese Weise wird das eingangs genannte

Problem gelöst, dass bei Android die Weiterleitung immer sofort erfolgt, und auch

die Event-Verzögerung ist kein Problem mehr, da ja beim ersten Klicken nur das

Untermenü geöffnet wird. Erfolgt nach einem Tap auf einen Link noch ein Tap auf

einen anderen, wird der Zähler zurückgesetzt und benötigt wieder einen Doppel-Tap,

um den dahinter liegenden Link anzusteuern.

9.4 Multilevel-Menüs

279

Natürlich ergibt dieses Verhalten nur bei den Menüpunkten mit Untermenüs Sinn.

Die Zuordnung der Funktion erfolgt deshalb nur an <li>s, die wiederum eine <ul>

beinhalten ($('#navMain li:has(ul)').doubleTapToGo();).

Den vollständigen HTML- und CSS-Code entnehmen Sie bitte dem Anwendungsbei-

spiel im Download-Paket auf der Website zum Buch, und auch das Skript von

Osvaldas Valutis finden Sie in diesem Anwendungsbeispiel (oder direkt unter http://

osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/double

taptogo.min.js).

9.4.2 Andere Lösungen für Multilevel-Menüs

Ein anderer Ansatz ist es, die Hover-Funktion in einen separaten Button zum Aus-

klappen der nächsten Menüebene umzuwandeln. In diesem Fall könnte ein Tap auf

den Menütitel die damit verlinkte Seite aufrufen und ein Tap auf ein separates Ele-

ment das Ausfahren der nächsten Ebene ansteuern. Auf dem Desktop kann man den

üblichen Hover-Effekt über das ganze Menüelement nutzen oder aus Gründen der

Konsistenz ebenfalls einen separaten Button verwenden.

Praxisbeispiel: Multilevel-Menü mit Flexnav

Jason Weaver hat ein jQuery-Plugin namens FlexNav geschrieben, mit dem Sie ein

flexibles Multilevel-Menü erstellen. FlexNav macht aus einer einfachen Liste ein

Menü, das auf dem Desktop per Hover und auf Tablets per Tab funktioniert und bei

sehr kleinen Bildschirmen linearisiert wird.

Abbildung 9.19 Die Projektsite von FlexNav dient gleichzeitig auch als Demo.

Page 27: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

280

Um das Plugin zu nutzen, müssen Sie lediglich das FlexNav-JavaScript (und natürlich

jQuery) am Seitenende einbinden, initiieren und dem Menü die Klasse .flexnav und

einen Breakpoint mitgeben.

...<body>

...<ul class="flexnav" data-breakpoint="750">

<li><a href="#">Link 1</a></li><li><a href="#">Link 2</a>

<ul><li><a href="#">Link 2.1</a><li><a href="#">Link 2.2</a><li><a href="#">Link 2.3</a>

</ul></li><li><a href="#">Link 3</a></li>

...</ul>...<script src="http://.../jquery.min.js"></script><script src="../js/jquery.flexnav.min.js"></script><script>

jQuery(document).ready(function($) {$(".flexnav").flexNav();

});</script>

</body>

Listing 9.25 Einbindung von FlexNav

FlexNav bringt eigene Styles für das Menü mit, die Sie noch an Ihr Layout anpassen

müssen, und setzt für den »Pfeil nach unten« ein Symbol des Webfonts FontAwe-

some ein. Wenn Sie FontAwesome nicht ohnehin einsetzen, ist das ein wenig Overkill

– dann sollten Sie das Symbol besser als einzelnes SVG (Scalable Vector Graphics) ein-

binden (lesen Sie mehr über die fantastischen Möglichkeiten des SVG-Formats in

Kapitel 10, »Flexible Bildelemente«).

Den vollständigen HTML- und CSS-Code entnehmen Sie bitte dem Anwendungs-

beispiel im Download-Paket auf der Website zum Buch unter /praxisbeispiele/

kap09/11_multilevel-flexnav/, und das Skript von Jason Weaver finden Sie in diesem

Anwendungsbeispiel oder direkt unter http://jasonweaver.name/lab/flexiblenavi-

gation/ bzw. https://github.com/indyplanets/flexnav.

9.4 Multilevel-Menüs

281

Abbildung 9.20 Das Multilevel-Dropdown-Menü mit FlexNav funktioniert auch auf Smart-

phones einwandfrei.

Noch mehr Multilevel-Menüs ...

Weitere interessante Beispiele für Multilevel-Menüs sind Codrops (http://tympa-

nus.net/codrops/category/playground) mit Ideen wie dem Multi-Level Push Menu

(http://tympanus.net/codrops/2013/08/13/multi-level-push-menu) und Slicknav

(http://slicknav.com), Letzteres mit Tastaturbedienung und ARIA-Auszeichnungen.

Abbildung 9.21 Immer wieder eine gute Idee: Multi-Level Push Menu von Codrops

Page 28: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

9 Navigationskonzepte

282

Brad Frost hat sich mit dem Thema sehr umfassend beschäftigt und bietet eine Reihe

von Ressourcen an: Als Startpunkt eignet sich sein Blogpost »Complex Navigation

Patterns for Responsive Design« (http://bradfrostweb.com/blog/web/complex-navi-

gation-patterns-for-responsive-design). Außerdem hat er eine Übersichtslinkliste zu

verschiedenen Themen rund um responsives Design mit einer Sektion zu Naviga-

tions-Patterns zusammengestellt (http://bradfrost.github.io/this-is-responsive/pat-

terns.html#navigation).

9.5 Zusammenfassung

In diesem Kapitel haben wir Ihnen verschiedene Lösungen für die Navigation Ihrer

Website vorgestellt. Wir haben über die Grundlagen einer guten Navigation gespro-

chen und verschiedene Navigationsmuster (Patterns) diskutiert – von der Mininavi-

gation am oberen Seitenrand über Toggle-Menüs, die sich ein- und ausblenden

lassen, bis hin zu Off-Canvas-Lösungen. Zum Schluss haben wir Ihnen an einem Bei-

spiel gezeigt, dass auch komplexe, mehrschichtige Menüs auf responsiven Websites

umsetzbar sind.

Bei all der Faszination für das Besondere sollten Sie nicht den Blick auf die ältere

Gerätegeneration verlieren, die einen Großteil des mobilen Marktes ausmacht. Je

mehr Raffinesse unter Verwendung neuester Techniken so ein »Supermenü« mit

sich bringt, desto wichtiger ist es, die Lösung umfassend zu testen. Ohne eine funk-

tionsfähige Navigation haben Ihre Besucher wenig Freude an der Website.

Page 29: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Auf einen Blick

Auf einen Blick

1 Denken in flexiblen Strukturen ........................................................................ 21

2 Umsetzung eines fixen Designs in ein flexibles Layout ........................... 41

3 Die Schlüsseltechnologie Media Queries ...................................................... 57

4 Ein responsiver Workflow ................................................................................... 89

5 Design und Typografie ......................................................................................... 115

6 Semantik und Barrierefreiheit .......................................................................... 151

7 Responsive Layout-Patterns .............................................................................. 169

8 Frameworks für responsives Design ............................................................... 217

9 Navigationskonzepte ........................................................................................... 247

10 Flexible Bildelemente ........................................................................................... 283

11 Mehr flexible Inhalte ............................................................................................ 355

12 Qualitätssicherung und Optimierung ............................................................ 431

13 Fazit ............................................................................................................................ 471

Page 30: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Inhalt

5

Inhalt

Geleitwort des Fachgutachters zur ersten Auflage ................................................................. 15

Vorwort ................................................................................................................................................... 17

1 Denken in flexiblen Strukturen 21

1.1 Responsive Webdesign: Was bedeutet das eigentlich? ..................................... 21

1.1.1 Veränderte Anforderungen an die Darstellung von Websites ............. 22

1.1.2 Anpassungsfähige Websites versus Mobilversionen von Websites ... 25

1.1.3 Beispiele für anpassungsfähige Websites ................................................... 26

1.2 Layouttypen: feste, fluide und flexible ..................................................................... 29

1.2.1 Das feste Layout ................................................................................................... 29

1.2.2 Das fluide und das elastische Layout ............................................................ 30

1.2.3 Das adaptive Layout ............................................................................................ 30

1.2.4 Das responsive Layout ........................................................................................ 31

1.3 Vom fixen zum flexiblen Raster (»Grid«) ................................................................. 32

1.4 Adaptives Layout: festes Layout mit Umbrüchen ................................................ 36

1.4.1 Gegenüberstellung: adaptives versus fixes Layout .................................. 38

1.5 Responsives Layout: fluides Layout mit Umbrüchen .......................................... 38

1.5.1 Gegenüberstellung: responsives versus adaptives Layout .................... 39

1.6 Zusammenfassung ............................................................................................................. 39

2 Umsetzung eines fixen Designs in ein flexiblesLayout 41

2.1 Die Ausgangslage: ein grafischer Entwurf mit festen Abmessungen ......... 41

2.2 Der erste Schritt: feste Raster in flexible umrechnen ........................................ 47

2.3 Der zweite Schritt zu mehr Flexibilität: anpassungsfähige Inhalte ............. 49

2.4 Der dritte Schritt: Layouts mit Media Queries umschalten .............................. 52

2.5 Zusammenfassung ............................................................................................................. 55

Page 31: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Inhalt

6

3 Die Schlüsseltechnologie Media Queries 57

3.1 Cascading Stylesheets (ein kurzer Rückblick) ......................................................... 58

3.1.1 Zuweisung von CSS-Eigenschaften ................................................................ 58

3.2 Medientyp (media type) ................................................................................................... 59

3.2.1 Medienabfrage für den Medientyp setzen .................................................. 59

3.2.2 Medientypen in der Übersicht ......................................................................... 60

3.3 Medieneigenschaften (media features) .................................................................... 61

3.3.1 Medieneigenschaften in der Übersicht ........................................................ 62

3.4 Media Queries schreiben ................................................................................................. 64

3.4.1 Komponenten eines Media Querys ................................................................ 64

3.5 Viewports und Pixel ........................................................................................................... 66

3.5.1 Der visuelle Viewport .......................................................................................... 66

3.5.2 Der Layout-Viewport auf mobilen Geräten ................................................. 66

3.5.3 Gerätepixel und CSS-Pixel: der »virtuelle« visuelle Viewport ............... 67

3.5.4 Das Viewport-Metatag und seine Eigenschaften ..................................... 70

3.5.5 Die @viewport-Anweisung in CSS ................................................................. 73

3.6 Media Queries im Responsive Webdesign ............................................................... 75

3.6.1 Medieneigenschaft width ................................................................................. 75

3.6.2 Medieneigenschaft device-width ................................................................... 76

3.6.3 Media Queries in em ........................................................................................... 76

3.6.4 Medieneigenschaft height – vertikale Media Queries ............................ 78

3.6.5 Medieneigenschaft orientation ...................................................................... 79

3.6.6 Medieneigenschaft aspect-ratio, device-aspect-ratio ............................. 80

3.6.7 Medieneigenschaft resolution und device-pixel-ratio ............................ 80

3.7 Media Queries im HTML-Header oder im Stylesheet .......................................... 84

3.8 Das wichtigste Media Query ist kein Media Query! ............................................ 84

3.9 Media Queries und die alten Internet Explorer ..................................................... 84

3.9.1 Nur Basislayout zuweisen ................................................................................. 85

3.9.2 Mittlere Layoutstufen mit Conditional Comments zuweisen .............. 85

3.9.3 Media-Query-Unterstützung mit JavaScript nachrüsten ....................... 85

3.10 User-Agent-Sniffing und serverseitige Erkennung ............................................. 86

3.10.1 WURFL & Co ........................................................................................................... 87

3.11 Zusammenfassung ............................................................................................................. 87

Inhalt

7

4 Ein responsiver Workflow 89

4.1 Der alte Prozess .................................................................................................................... 89

4.2 Phase 1: Moodboards und Inhaltsplan ....................................................................... 92

4.2.1 Moodboards ........................................................................................................... 92

4.2.2 Inhalte strukturieren und hierarchisieren ................................................... 93

4.2.3 Content-Prototypen ............................................................................................ 95

4.3 Phase 2: Style Tiles und Wireframes ........................................................................... 96

4.3.1 Style Tiles ................................................................................................................ 96

4.3.2 Mockups .................................................................................................................. 100

4.4 Phase 3: Design im Browser ............................................................................................ 104

4.4.1 Online-Editoren ..................................................................................................... 105

4.4.2 Komponenten, Patterns und Atomic Design .............................................. 106

4.5 Phase 4: Rinse and Repeat .............................................................................................. 107

4.5.1 Beziehen Sie Ihre Kunden in den Gesamtprozess mit ein ...................... 107

4.6 Das responsive Team ......................................................................................................... 109

4.7 Dokumentation responsiver Designs ......................................................................... 110

4.7.1 Style-Dokumentation mit Evernote ............................................................... 111

4.7.2 Dexy .......................................................................................................................... 113

4.8 Zusammenfassung ............................................................................................................. 113

5 Design und Typografie 115

5.1 Design follows Content .................................................................................................... 115

5.1.1 You cannot not communicate – kein Design ist auch ein Design ....... 116

5.2 Design von innen nach außen – der Atomic-Design-Ansatz ........................... 118

5.2.1 Atomic Design anwenden mit Pattern Lab ................................................. 119

5.3 Designanforderungen für responsive Sites ............................................................. 122

5.3.1 Does size matter – was machen Nutzer mit ihren Geräten? ................ 123

5.3.2 Geräteübergreifendes Surfen .......................................................................... 125

5.3.3 Size matters: Ziele für Touch-Events ............................................................. 125

5.3.4 Es gibt kein Hover auf Hawaii ... ...................................................................... 127

5.3.5 Inaktives :active auf iOS ..................................................................................... 128

5.3.6 Handpositionen .................................................................................................... 128

5.3.7 Layoutwechsel bei Änderung der Orientierung ......................................... 129

Page 32: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Inhalt

8

5.3.8 Schreiben ist mühsam: Formulare auf Smartphones .............................. 132

5.3.9 Mobile Inspiration und Best Pratice ............................................................... 132

5.4 Typografie (anpassungsfähiger Text) ........................................................................ 133

5.4.1 Die Auswahl der Schriftart ............................................................................... 134

5.4.2 Angaben für die Schriftgröße ........................................................................... 137

5.4.3 Schriftgrößenwahrnehmung auf kleinen und großen

Bildschirmen .......................................................................................................... 141

5.4.4 Zeilenlänge und Durchschuss .......................................................................... 144

5.4.5 Skalierbare seitenbreite Texte ......................................................................... 148

5.5 Zusammenfassung ............................................................................................................. 150

6 Semantik und Barrierefreiheit 151

6.1 Prinzipien der Zugänglichkeit ........................................................................................ 151

6.1.1 Wahrnehmbarkeit ............................................................................................... 152

6.1.2 Bedienbarkeit ......................................................................................................... 157

6.1.3 Verständlichkeit .................................................................................................... 158

6.1.4 Robustheit .............................................................................................................. 159

6.2 Semantik durch HTML5 ..................................................................................................... 159

6.2.1 section ...................................................................................................................... 160

6.2.2 article ........................................................................................................................ 161

6.2.3 nav ............................................................................................................................. 161

6.2.4 aside .......................................................................................................................... 161

6.2.5 header ...................................................................................................................... 161

6.2.6 footer ........................................................................................................................ 162

6.3 HTML5-Formularattribute für mehr Semantik ....................................................... 163

6.3.1 Neue Eingabeelemente ...................................................................................... 163

6.4 Semantik durch WAI-ARIA-Rollen ................................................................................ 165

6.5 Zusammenfassung ............................................................................................................. 168

7 Responsive Layout-Patterns 169

7.1 Mobile First ............................................................................................................................ 170

7.1.1 Reduktion auf das Wesentliche ist die Devise ............................................ 170

7.1.2 Mobile First – Progressive Enhancement fürs Layout .............................. 172

Inhalt

9

7.1.3 Mobile First bedeutet auch Content First .................................................... 173

7.1.4 Fallbacklayout: Was ist die »Notfallansicht«? ............................................ 174

7.2 Praxisbeispiel: Mobile First ............................................................................................. 175

7.2.1 Mobile First – los geht’s! .................................................................................... 175

7.2.2 Mockups für das Layout ..................................................................................... 176

7.2.3 Basisversion: Smartphone-Ansicht ................................................................ 177

7.2.4 Setzen des Viewport-Metatags ....................................................................... 184

7.3 Auswahl der Breakpoints ................................................................................................. 186

7.3.1 Haupt-Breakpoints .............................................................................................. 187

7.3.2 Anpassungs-Breakpoints ................................................................................... 188

7.3.3 Vertikale Breakpoints .......................................................................................... 189

7.4 Praxisbeispiel: ersten Breakpoint setzen (Tablets) .............................................. 190

7.5 Layout-Patterns (Darstellungsmuster) für unterschiedliche

Ausgabegeräte ..................................................................................................................... 195

7.5.1 Tiny Tweaks (kleine Optimierungen) ............................................................. 196

7.5.2 Mostly Fluid (großteils fließend) ..................................................................... 197

7.5.3 Column Drop (abgesenkte Spalten) ............................................................... 198

7.5.4 Layout Shifter (Layoutverdreher) .................................................................... 199

7.5.5 Off-Canvas-Layout (außerhalb des Bildschirms) ....................................... 199

7.5.6 Footer-Navigation und Off-Canvas-Marginalie ......................................... 200

7.5.7 Top-Off-Canvas-Menü und Off-Canvas-Marginalie ................................. 201

7.5.8 Vertikale und horizontale Off-Canvas-Panels ............................................ 201

7.5.9 Zusammengefasste Elemente Off-Canvas .................................................. 202

7.5.10 Off-Canvas-Lösungen aus der Schublade .................................................... 203

7.6 Praxisbeispiel: weitere Breakpoints setzen (große Screens) ........................... 204

7.6.1 Kleine Desktopversion nach dem Konzept Layout Shifter ..................... 204

7.6.2 Große Desktopversion ........................................................................................ 206

7.7 Breakpoint-Tools ................................................................................................................. 208

7.7.1 Breakpoints testen mit Browsertools ............................................................ 208

7.7.2 Gridpak zum Erstellen von Rastern mit Media Queries .......................... 210

7.8 CSS3-Layouttechniken für responsive Layouts ...................................................... 211

7.8.1 Flexbox-Layout ...................................................................................................... 211

7.8.2 Grid-Layout (CSS3) ............................................................................................... 215

7.9 Zusammenfassung ............................................................................................................. 216

Page 33: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Inhalt

10

8 Frameworks für responsives Design 217

8.1 Eigene Vorlage oder fertige Frameworks verwenden? ...................................... 218

8.2 Wie wählen Sie das richtige Framework aus? ........................................................ 220

8.3 Eine kurze Vorstellung responsiver Frameworks .................................................. 221

8.3.1 YAML ......................................................................................................................... 222

8.3.2 Foundation ............................................................................................................. 226

8.3.3 Bootstrap ................................................................................................................. 230

8.3.4 PureCSS .................................................................................................................... 233

8.4 JavaScript-Bibliotheken und andere Helfer ............................................................. 235

8.4.1 jQuery ....................................................................................................................... 235

8.4.2 Modernizr ................................................................................................................ 236

8.4.3 Elegante Stylesheets mit Präprozessoren: SASS ........................................ 238

8.5 Zusammenfassung ............................................................................................................. 245

9 Navigationskonzepte 247

9.1 Was macht eine Navigation benutzerfreundlich? ................................................ 247

9.2 Benutzerfreundliche Navigation für mobile Geräte ............................................ 248

9.2.1 Freier Blick auf die Website ............................................................................... 249

9.2.2 Ausreichend große Klickflächen für Touchbedienung ............................ 250

9.2.3 Umgang mit Menüs mit mehreren Ebenen ................................................ 250

9.3 Navigationstypen für mobile Geräte mit Touchscreen ...................................... 250

9.3.1 Wenige Menüpunkte am oberen Rand ......................................................... 251

9.3.2 Lange Menüs am oberen Rand ........................................................................ 254

9.3.3 Select-Menü ........................................................................................................... 255

9.3.4 Navigation per Anker am Ende des Seiteninhalts ..................................... 260

9.3.5 Toggle-Menü .......................................................................................................... 264

9.3.6 Off-Canvas-Menü ................................................................................................. 271

9.4 Multilevel-Menüs ................................................................................................................ 275

9.4.1 Die native Einbindung von Multilevel-Menüs auf iOS und Android ... 276

9.4.2 Andere Lösungen für Multilevel-Menüs ....................................................... 279

9.5 Zusammenfassung ............................................................................................................. 282

Inhalt

11

10 Flexible Bildelemente 283

10.1 Anpassungsfähige Bilder ................................................................................................. 283

10.1.1 Praxisbeispiel: anpassungsfähiges Headerbild .......................................... 285

10.1.2 Bilder ausschnittweise anzeigen .................................................................... 287

10.1.3 Praxisbeispiel: nur Bildausschnitt für die Basisversion ........................... 287

10.1.4 Flexible Bilder, die nicht über die ganze Rasterbreite gehen ................. 289

10.1.5 Praxisbeispiel: flexible Teaser-Boxen mit Bild und Text ......................... 289

10.2 Responsive Hintergrundbilder ...................................................................................... 293

10.2.1 Gekachelte Hintergrundmuster ...................................................................... 293

10.2.2 Großflächige Hintergrundbilder ..................................................................... 298

10.2.3 Praxisbeispiel: vollflächige Hintergrundbilder ........................................... 302

10.2.4 Hintergrundgrafiken als Icons ......................................................................... 305

10.2.5 CSS-Sprites für Hintergrundbilder .................................................................. 305

10.2.6 Praxisbeispiel: CSS-Sprites für hochauflösende

Hintergrundgrafiken .......................................................................................... 307

10.3 Auflösungsunabhängige Grafiken (SVG) .................................................................. 311

10.3.1 Das Scalable-Vector-Graphics-Format .......................................................... 312

10.3.2 Praxisbeispiel: Icons als SVG-Sprite ............................................................... 312

10.3.3 Praxisbeispiel: SVG-Infografik versus GIF-Infografik ............................... 314

10.3.4 Einbindung von SVG-Grafiken ......................................................................... 315

10.3.5 Praxisbeispiel: responsive SVG-Einbindung ................................................ 321

10.3.6 Die responsive SVG-Einbindung ...................................................................... 325

10.3.7 Browsersupport und Fallback .......................................................................... 326

10.4 Icon-Fonts ............................................................................................................................... 330

10.4.1 Praxisbeispiel: Icon-Fonts mit Font Awesome ........................................... 334

10.4.2 Icon-Fonts mit Ligaturen ................................................................................... 336

10.5 Bilder für unterschiedliche Auflösungen .................................................................. 338

10.5.1 Wie ordne ich die richtigen Bilder im HTML-Code zu? ............................ 339

10.5.2 Beschnitt mit automatischer Berücksichtigung des

Bildschwerpunkts ................................................................................................. 346

10.5.3 Und wer erstellt die ganzen Bilder? ............................................................... 348

10.6 Zusammenfassung ............................................................................................................. 352

Page 34: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Inhalt

12

11 Mehr flexible Inhalte 355

11.1 Responsive Bildergalerien ............................................................................................ 356

11.1.1 Praxisbeispiel: flexible Slideshow mit ResponsiveSlides ..................... 356

11.1.2 Praxisbeispiel: responsive Bildergalerien mit Flexslider ...................... 358

11.1.3 Andere Bildergalerietools ............................................................................... 364

11.2 Responsive Lightboxen .................................................................................................. 365

11.3 Responsive Image Maps ................................................................................................ 368

11.3.1 Praxisbeispiel: jQuery-rwdImageMaps.js .................................................. 368

11.4 Anpassungsfähige Videos ............................................................................................. 370

11.4.1 Praxisbeispiel: HTML5-Videos ....................................................................... 372

11.4.2 Responsive Embedding von YouTube & Co: Videos im iFrame ......... 373

11.4.3 Automatische Anpassung für unterschiedliche Video-

Seitenverhältnisse durch FitVids.js und FluidVids.js ............................. 377

11.4.4 HTML5-Videoplayer mit video.js ................................................................... 378

11.5 Adobe Flash ......................................................................................................................... 380

11.6 Flexible Karteneinbindungen (Google Maps) ...................................................... 381

11.7 Flexible Tabellen ............................................................................................................... 383

11.7.1 Tabelleninhalte deaktivieren (hide on mobile) ....................................... 384

11.7.2 Die Tabelle mit CSS umstrukturieren ......................................................... 386

11.7.3 Anpassungsfähige Tabellen mit FooTable ................................................ 390

11.7.4 Mehr responsive Tabellen ............................................................................. 392

11.8 Akkordeons und Inhaltsboxen mit Reitern ........................................................... 394

11.9 Flexible Formulare ........................................................................................................... 398

11.9.1 Anwendungsbeispiel: Formular ................................................................... 399

11.10 Inhalte selektiv anzeigen und laden ........................................................................ 404

11.10.1 Inhalte entfernen oder ergänzen – wann und wie? .............................. 404

11.10.2 Inhalte per CSS ausblenden (display: none) ............................................. 405

11.10.3 Inhalte per CSS hinzufügen ............................................................................ 406

11.10.4 Conditional Loading Content via JavaScript (und CSS) ........................ 408

11.11 Flexible Werbung ............................................................................................................. 412

11.11.1 Bewusstsein schaffen ...................................................................................... 412

11.11.2 Alte und neue Bannerkonzepte .................................................................... 414

11.11.3 Bannererstellung und -auslieferung ........................................................... 416

11.11.4 Fixe Spalte und nur ein Rectangle-Format ............................................... 418

11.11.5 Gezieltes Laden von Bannergrößenformaten mit Lazy-Ads ............... 419

11.11.6 ZURB-Playground: Responsive Ads .............................................................. 421

Inhalt

13

11.11.7 Google AdSense Ads im responsiven Design ausliefern ...................... 422

11.11.8 Werbeblöcke zwischen Inhalte schieben mit

CSS-Regions (Polyfill) ........................................................................................ 422

11.11.9 Inhalte dynamisch verschieben .................................................................... 424

11.12 Responsive HTML-E-Mails ............................................................................................. 426

11.13 Zusammenfassung .......................................................................................................... 430

12 Qualitätssicherung und Optimierung 431

12.1 Testing ...................................................................................................................................... 431

12.1.1 Validatoren für HTML und CSS ........................................................................ 431

12.1.2 Breakpoints testen ............................................................................................... 432

12.1.3 Auf dem Gerät testen ......................................................................................... 440

12.1.4 Adobe Edge Inspect, SDKs ................................................................................. 441

12.2 Performance testen und Optimierung ....................................................................... 443

12.2.1 Das Performance-Budget .................................................................................. 443

12.2.2 Was beeinträchtigt die Performance? .......................................................... 444

12.2.3 Skripte und HTML ................................................................................................. 447

12.2.4 Caching .................................................................................................................... 457

12.2.5 Performanceoptimierung für Grafiken und Bilder .................................... 458

12.2.6 Schriften optimieren ........................................................................................... 460

12.2.7 Lazy Loading ........................................................................................................... 463

12.2.8 Aus den Augen, aus dem Sinn? ........................................................................ 468

12.3 Zusammenfassung ............................................................................................................. 470

13 Fazit 471

Anhang 473

A.1 Website zum Buch .............................................................................................................. 473

A.2 Quellennachweise der verwendeten Bilder ............................................................ 473

Index ........................................................................................................................................................ 477

Page 35: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Index

477

Index

A

Above the fold ....................................................... 465

Accelerometer .......................................................... 71

Accessibility ........................................ 118, 127, 151

ältere Nutzer ..................................................... 158

Bedienbarkeit .................................................... 157

Bedienbarkeit per Tastatur ......................... 157

Blau-Gelb-Sehschwäche ................................ 153

Erkennbarkeit von Interaktion .................. 126

Farben ........................................................ 153, 248

Farbfehlsichtigkeiten ........................... 127, 153

Fehlermeldungen Formulare ...................... 154

Feinmotorik, beeinträchtigte ..................... 126

focus ..................................................................... 157

Fremdsprachler ................................................ 158

Gehörlose ............................................................ 158

Größe für Touchbedienung ......................... 248

Größe für Zeigegeräte .................................... 248

Infografiken ....................................................... 154

Kontraste .................................................. 153, 248

leichte Sprache ................................................. 158

Linkauszeichnungen ................... 127, 154, 247

Navigation ......................................................... 157

Page-Zoom ............................................... 133, 152

Prinzipien ........................................................... 151

Richtlinien für barrierefreie Umsetzung 151

Robustheit ................................................ 159, 248

Rot-Grün-Sehschwäche ................................. 153

Schriftgrößen .......................................... 152, 248

Semantisches Markup ................................... 247

Sprungnavigation ........................................... 165

Tastaturfokus ................................................... 157

Text-Zoom .......................................................... 133

Verständlichkeit ..................................... 158, 248

Wahrnehmbarkeit ........................................... 152

Zoomstufen .......................................................... 71

Zugänglichkeit .................................................. 248

Adaptive Images ................................................... 349

Adobe Creative Cloud ......................................... 441

Adobe Edge Inspect ............................................. 441

Adobe Fireworks ...................................................... 92

Adobe Flash ............................................................ 380

Adobe Illustrator .................................................. 312

Adobe InDesign ....................................................... 92

Adobe Typekit ....................................................... 461

Aktive Elemente, Größe .................................... 248

Alternativschriften .............................................. 136

Am I Responsive ................................................... 438

Amazon Kindle Fire SDK ................................... 443

Anchor-include-Pattern ..................................... 408

Android SDK ........................................................... 443

Animierte Layoutwechsel ................................. 130

Anpassungsfähige Inhalte .................................. 49

Anpassungsfähiger Text .................................... 133

appendAround.js .................................................. 424

Apple Keynote ....................................................... 103

Assistive Technologien ...................................... 166

Asynchrones Laden ............................................. 467

Atomic Design ............................................. 106, 118

Komponenten ................................................... 118

Auflösung

device-pixel-ratio ............................................... 81

dpcm ....................................................................... 81

dpi ............................................................................ 81

dppx ........................................................................ 81

resolution .............................................................. 81

Auflösungsabhängige Bilder ........................... 339

Auflösungsunabhängige Grafiken ................ 311

Ausgabegeräteabhängige Stylesheets ........... 59

Ausrichtung, ändern ........................................... 130

Axure ......................................................................... 103

B

Balsamiq Mockups ............................................... 176

Bandbreite ............................................................... 123

Bandbreiten-Media-Queries ............................ 348

Barrierefreiheit � Accessibility

Base64 ....................................................................... 453

Basisschriftgröße ........................................... 76, 139

Bedienung per Finger ......................................... 125

Bedienung per Maus ........................................... 125

Beschleunigungssensor ....................................... 71

Beschnitt

Focal Point .......................................................... 346

Best Pratice, Mobile UI ....................................... 132

Betrachtungsabstand .......................................... 142

Bibliotheken, Design ........................................... 111

Bildbearbeitungssoftware ................................... 92

Bilder, Base64 ......................................................... 453

Bildschwerpunkt

Focal Point .......................................................... 346

Bitmaps ..................................................................... 312

Page 36: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Index

478

Bootstrap ....................................................... 104, 230

Breakpoint (Compass-Plugin) ......................... 245

Breakpoints .................................. 52, 152, 186, 187

vertikale Breakpoints ..................................... 189

Breakpoint-Tester ................................................ 437

Browser .................................................................... 217

Basisschriftgröße ............................................. 139

Chrome ...................................................... 147, 173

Firefox .................................................................. 173

IE 10 Snap-Modus von Windows 8 .............. 73

Internet Explorer ............................................. 173

Internet Explorer < 9 .... 53, 84, 140, 153, 174,

227, 236, 268, 296, 301, 326, 454, 463

Internet Explorer 10 ....................... 73, 147, 422

Internet Explorer 7 ................................... 45, 133

Opera ............................................................. 73, 173

Page-Zoom ............................................................ 76

Safari .................................................................... 173

Safari 6 ................................................................. 422

Standardschriftgröße .................................... 141

Browsercache ......................................................... 457

C

Caching ..................................................................... 457

Cache-Control-Headers ................................ 457

Cache-Control-Headers, Expires ............... 457

Fingerprinting ................................................... 458

Cascading Stylesheets ........................................... 58

Chromebook ................................................ 129, 132

CMS ............................................................................... 96

Code2Evernote ...................................................... 112

Color Oracle ............................................................ 153

Colour Contrast Check ....................................... 155

Compass .................................................................. 466

Conditional Comments, IE .................................. 85

Conditional CSS .................................................... 411

Conditional Loading Content ......................... 408

Content .................................................................... 115

Content Delivery Networks ............................. 449

Content First .......................................................... 173

Content-Management-System .......................... 96

Content-Prototypen .................................... 95, 116

Content-Strategie ................................................. 123

Contrast Ratio ........................................................ 155

CorelDraw ............................................................... 312

CSS

:nth-child ............................................................ 293

:nth-of-type ........................................................ 293

@font-face ............................................... 134, 335

@import ................................................................. 59

CSS (Forts.)

@media ................................................................. 62

@viewport ............................................................ 73

atmosphere.css ................................................. 179

background-size ............................................... 298

background-size:contain .............................. 300

background-size:cover .................................. 299

box-sizing ............................................ 45, 48, 183

column-count .................................................... 146

container-relative floats ................................. 47

content ................................................................. 406

CSS3 ......................................................................... 61

CSS3-Hintergrundmuster-Galerie ............. 294

CSS-Boxmodell ................................... 45, 48, 183

CSS-Eigenschaften zuweisen ......................... 58

display:none ...................................................... 405

Hintergrundmuster ........................................ 294

layout.css ............................................................ 181

LESS ....................................................................... 238

max-width ............................................................ 50

normalize.css ........................................... 178, 227

Objektorientierung ......................................... 162

OOCSS ................................................................... 162

Präfixe .................................................................... 45

Reset-Stylesheet ................................................ 178

SASS ....................................................................... 238

SMACSS ...................................................... 162, 233

target .................................................................... 266

text-overflow:ellipsis ...................................... 147

transition ............................................................ 130

width ....................................................................... 50

word-wrap .......................................................... 147

CSS3-Layouttechniken ....................................... 211

CSS-Tables ........................................................... 211

Flexbox-Layout ................................................. 211

Grid-Layout .............................................. 211, 215

CSS3-Patterns ......................................................... 294

CSSEmbed ................................................................ 453

CSS-Regions ............................................................ 422

CSS-Sprites ............................................................... 452

D

Data-URIs ................................................................. 452

Dateikompression ...................................... 455, 456

Datenbanktabelle ................................................... 94

Designanforderungen ........................................ 122

Designbibliothek ........................................... 92, 119

Designentwürfe ...................................................... 91

Designmuster ........................................................ 111

Designphase ............................................................. 93

Index

479

Designprozess ................................................ 93, 118

Desktop .................................................................... 131

Desktop First ................................................... 75, 172

Graceful Degradation .................................... 173

Desktopversion ..................................................... 122

Dexy .......................................................................... 113

DNS-Lookup ........................................................... 446

Dokumentation .................................................... 110

DoubleTabToGo.js ............................................... 277

DPI love .................................................................... 142

E

eCSSential ................................................................ 454

Eingebettete Schriften ....................................... 134

Elastislide ................................................................ 364

E-Mail

E-Mail-Client-Statistiken .............................. 426

E-Mail-Template-Builder .............................. 427

E-Mail-Testdienst ............................................ 428

E-Mail-Versanddienst .................................... 427

HTML-E-Mail-Templates .............................. 426

Lesetipps ............................................................. 429

Entwurf mit festen Abmessungen ................... 41

Entwurfsprozess ...................................................... 91

EPS .............................................................................. 311

Evernote ............................................................ 92, 111

F

Fallback

Layout .................................................................. 174

Website ohne Media Queries ......................... 84

Fancybox ................................................................. 365

Farbpaletten .............................................................. 98

Feature Phones ..................................................... 116

Fexibles Layout ..................................................... 118

Ffffallback ................................................................ 136

Filter, IE ..................................................................... 301

Fingergrößen ......................................................... 125

Fingerprinting ....................................................... 458

Firebug ...................................................................... 443

FitText ....................................................................... 149

FitVids.js ................................................................... 377

Flash ........................................................................... 159

Flash-Banner .......................................................... 416

FlashPix .................................................................... 339

Flexible Inhalte .............................................. 49, 355

Akkordeons ........................................................ 394

Anchor-include-Pattern ................................ 408

auflösungsunabhängige Grafiken ........... 311

Flexible Inhalte (Forts.)

Bildelemente ...................................................... 283

Bilder ....................................................................... 49

Bilder ausschnittweise ................................... 287

Bilder mit CSS beschneiden ............................ 50

Bilder mit CSS skalieren .......................... 50, 283

Bilder mit negativem margin ..................... 287

Bilder prozentuale Breite .............................. 289

Bildergalerien ............. 356, 358, 361, 363, 364

CSS-Sprites .......................................................... 305

E-Mails .................................................................. 426

Flexible Slideshow ........................................... 356

Formulare ........................................................... 398

gekachelte Hintergrundmuster ................. 293

Größenangaben, Bilder ................................... 50

großflächige Hintergrundbilder ................ 298

Hintergrundbilder ........................................... 293

Hintergrundbilder, Größe ............................. 301

Hintergrundgrafiken als Icons ................... 305

Hintergrundmuster mit CSS3 ...................... 294

Hintergrundmuster mit SVG ....................... 296

iFrames ................................................................ 373

Image Maps ....................................................... 368

Inhalte selektiv anzeigen und laden 404, 408

Inhalte verschieben ......................................... 424

Inhaltsboxen mit Reitern ............................. 394

Intrinsic Ratio .......................................... 376, 379

Karteneinbindungen ...................................... 381

Lightboxen ......................................................... 365

relative canvas-Höhe berechnen ............... 376

relative Element-Höhe berechnen ............ 376

relative embed-Höhe berechnen ............... 376

relative iframe-Höhe berechnen ................ 376

relative object-Höhe berechnen ................. 376

relative video-Höhe berechnen .................. 376

skalierbare Texte .............................................. 148

Tabellen ............................................................... 383

Text ................................................................. 49, 133

Videos ................................................................... 370

Vimeo ......................................................... 373, 378

visuelle Hierarchie, Bilder ............................... 54

Werbung .............................................................. 412

YouTube ..................................................... 373, 378

Flexnav ..................................................................... 279

Flexslider .............................................. 358, 361, 363

FlowType .................................................................. 148

Fluidbox ................................................................... 365

fluidvids.js ............................................................... 377

Font Awesome ....................................................... 461

Font Squirrel ........................................................... 461

Fontastic ................................................................... 332

Page 37: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Index

480

FontDragr ................................................................ 136

Fontello .................................................................... 332

Fonts

Fonts direkt einbetten ................................... 462

Icon-Fonts ........................................................... 227

Icon-Fonts generieren .................................... 462

FooTable ................................................................... 390

Formulare

auf Smartphones ............................................. 132

native Eingabeunterstützung .................... 163

Foundation ............................................................. 104

Frameworks ..................................................... 96, 217

Applikations-Frameworks ................. 218, 226

Bootstrap .................................................. 104, 230

Foundation .............................................. 104, 226

Framework-Auswahl ...................................... 220

HTML5-Boilerplates .............................. 178, 219

Ink .......................................................................... 427

jQuery ......................................................... 178, 235

jQuery Mobile ................................................... 235

jQuery UI ............................................................. 235

Layout-Frameworks ....................................... 218

Pure Extras ......................................................... 233

PureCSS ...................................................... 105, 233

Wirefy ................................................................... 105

YAML .................................................................... 222

Zen Grids ................................................................ 48

Frontkamera, Smartphones ............................. 144

G

Geräte, Orientierungen ..................................... 129

Gerätebedienung

active auf iOS .................................................... 128

Dauer-Tapps ...................................................... 127

Doppel-Tapps .................................................... 127

Gesten .................................................................. 127

Handhaltung .................................................... 126

Handpositionen ............................................... 128

Hover .................................................................... 127

JavaScript-Tooltips ......................................... 127

Konventionen ................................................... 127

Laptops mit Touchscreen ............................. 129

Mobilgeräte ....................................................... 125

per Finger ............................................................ 131

per Maus ............................................................. 131

Smartphones ..................................................... 128

Tablets ................................................................. 129

Wischen ............................................................... 127

Geräteeigenschaften ................................. 117, 172

Gerätegrößen ............................ 123, 143, 175, 186

Betrachtungsabstand .................................... 142

Smartphones, Übersicht .................................. 83

Tablets, Übersicht .............................................. 84

Gerätenutzung ............................................ 123, 125

Geräteübergreifendes Surfen .......................... 125

Gestaltung für unterschiedliche Geräte ..... 125

Get .............................................................................. 464

Ghostlab ................................................................... 442

Git ............................................................................... 111

Glyphs ....................................................................... 332

Google AdSense Ads ............................................ 422

Google-Studie, Gerätenutzung ....................... 123

Google-Studie, HTML5-Elemente .................. 160

Graceful Degradation ......................................... 173

Grunt ......................................................................... 444

Gzip ............................................................................ 456

H

Handpositionen .................................................... 128

Helligkeitsresponsives Webdesign ............... 155

Hintergrundbilder, Base64 ............................... 453

Hochauflösende Displays .......... 67, 69, 80, 137,

142, 338

Bilder ..................................................................... 338

HTML5 ......................................................................... 42

abschnittsbildende Elemente ...................... 162

article .................................................................... 161

aside ...................................................................... 161

color ...................................................................... 164

data-Attribut ..................................................... 406

date ........................................................................ 164

Eingabeelemente ............................................. 163

Elemente ................................................................ 42

email ........................................................... 163, 402

figcaption ............................................................ 288

figure ..................................................................... 285

footer .................................................................... 162

Formularattribute ........................................... 163

Formulare, native Eingabeunter-

stützung .......................................................... 163

Google-Studie .................................................... 160

header ................................................................... 161

HTML5-Elemente .............................................. 159

interaktive HTML5-Techniken .................... 416

Lesetipps .............................................................. 160

nav ............................................................... 161, 247

number ................................................................. 163

output ................................................................... 164

Index

481

HTML5 (Forts.)

range .................................................................... 164

search ................................................................... 164

section .................................................................. 160

Semantik ................................................... 159, 166

Spezifikationen ................................................ 160

telephone ............................................................ 163

time ....................................................................... 164

Type-Attribute ..................................................... 59

Übergangsprobleme ...................................... 168

url ................................................................. 163, 403

HTML5-Formulare

autofocus ............................................................ 400

Lesetipps ................................................... 165, 404

pattern ................................................................. 400

placeholder ........................................................ 399

required ............................................................... 400

HTML5-Videos ....................................................... 370

Browserunterstützung .................................. 370

Lesetipp ............................................................... 373

HTML-E-Mails ........................................................ 426

HTML-Prototypen ................................................ 104

HTTP-Requests ............................................ 445, 452

Hyphenator ............................................................ 148

I

IcoMoon ................................................................... 332

Icon-Fonts ............................................................... 330

eigene Font-Sets ............................................... 332

Fontastic ............................................................. 332

Fontello ................................................................ 332

Generatoren ...................................................... 332

Glyphs .................................................................. 332

IcoMoon .............................................................. 332

Iconvault ............................................................. 332

Ligaturen ............................................................ 336

Symbolset (Live-Demo) ................................. 337

Icons, Hintergrundgrafiken ............................. 305

iFrames ..................................................................... 373

Illustrator ................................................................... 92

ImageLightbox.js .................................................. 365

Informationsarchitekt ....................................... 109

Inhalte ....................................................................... 175

Inkscape ............................................................ 92, 312

Interactive Style Tiles ............................................ 98

Intrinsic Ratio .............................................. 376, 379

iOS-Orientation-Bug .............................................. 71

iOS-User-Interface-Guidelines ........................ 125

iPhone, Höhe ............................................................ 79

J

Java ............................................................................. 159

JavaScript-Einbindung ....................................... 455

JavaScript-Erkennung ......................................... 259

jQuery .............................................................. 235, 280

jQuery-Plugins

Anchor-include-Pattern ................................ 408

Anystretch .......................................................... 301

appendAround.js ............................................. 424

Backstretch ......................................................... 301

Bildergalerien .................................................... 364

DoubleTabToGo.js ........................................... 277

Elastislide ............................................................ 364

Fancybox ............................................................. 365

FitVids.js .............................................................. 377

FlexNav ................................................................ 279

Flexslider ............................................................. 358

FlowType ............................................................. 148

Fluidbox ............................................................... 365

FooTable .............................................................. 390

ImageLightbox.js ............................................. 365

jQuery 2.x ............................................................ 236

jQuery-Plugin-Architektur ........................... 235

jQuery-rwdImageMaps.js ............................. 368

LazyLoad ................................................... 464, 465

least.js ................................................................... 364

Responsive Tab Accordion ........................... 395

ResponsiveSlides.js .......................................... 356

restive.js ................................................................. 86

RWD-Table-Patterns ....................................... 393

Surprise lipsum ................................................. 116

tinynav.js ............................................................. 257

togglemenu.js .................................................... 264

Touch Menu Hover ......................................... 250

Unveil .................................................................... 465

jQuery-rwdImageMaps.js .................................. 368

K

Kindle, Schriftgrößen ......................................... 137

Komponenten

gestalten .............................................................. 106

Inhaltskomponenten ..................................... 118

Kontextsensitiver Content ............................... 408

Kontraste ................................................................. 154

Konzepter ................................................................ 109

kritisches CSS ......................................................... 465

Kuler ............................................................................ 98

Kunden, einbeziehen .......................................... 107

Page 38: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Index

482

L

Ladezeiten ............................................................... 123

Latenzen .................................................................. 446

Layout-Patterns .................................................... 195

Column Drop ..................................................... 198

Footer-Navigation und Off-Canvas-

Marginalie ..................................................... 200

Layout Shifter ................................................... 199

Mobile only ........................................................ 196

Mostly Fluid ....................................................... 197

Off-Canvas-Layout ......................................... 199

Tiny Tweaks ....................................................... 196

Top-Off-Canvas-Menü und Off-Canvas-

Marginalie ..................................................... 201

vertikale und horizontale Off-Canvas-

Panels .............................................................. 201

Layouttypen .............................................................. 29

adaptives Layout ......................................... 30, 36

festes Layout ........................................................ 29

flexibles Layout .................................. 24, 30, 159

fluides Layout ...................................................... 30

Mischformen fester und flexibler Layouts 31

Mobile Only .......................................................... 28

responsives Layout ..................................... 31, 38

Lazy Loading ....................................... 364, 463, 465

Lazy Loading � Asynchrones Laden

least.js ....................................................................... 364

LibreOffice Impress ............................................. 103

Lichtsensorwerte

Auslesen und Verarbeiten ............................ 155

Spezifikation ..................................................... 155

Lightboxen ............................................................. 365

Litmus ....................................................................... 428

loadCSS ..................................................................... 467

loadCSS � Asynchrones Laden

M

Media Features

aspect-ratio ........................................................... 80

device-aspect-ratio ............................................ 80

device-height ........................................................ 62

device-height auf iOS ........................................ 76

device-pixel-ratio ............................................... 80

device-width .................................................. 62, 76

device-width auf iOS ......................................... 76

height ............................................................... 62, 78

max-device-width .............................................. 76

max-width ............................................................. 75

min-width .............................................................. 75

Media Features (Forts.)

orientation .................................................... 62, 79

Präfixe min- und max- .................................... 62

resolution .............................................................. 80

width ................................................................ 62, 75

width statt device-width ................................. 76

Media Queries ................................................. 52, 152

@viewport in Media Queries ........................ 74

Aufruf, @import-Anweisung ........................ 62

Aufruf, Link-Element ........................................ 62

Bandbreiten-Media-Queries ........................ 348

Basislayout für IE < 9 ....................................... 85

Conditional Comments für IE < 9 ................ 85

Fallback .................................................................. 84

Größenangaben ............................................... 189

Komponenten ..................................................... 64

Logische Operatoren ........................................ 65

Logisches or ......................................................... 65

Media Queries in em ......................................... 76

Media Queries in JavaScript ........................ 410

Media Queries schreiben ................................ 64

Media Queries strukturieren ....................... 188

Media Queries testen ................. 121, 208, 432

Media Queries umrechnen (px in em) ....... 77

Media Queries verschachteln ........... 188, 207

Medienabfrage ................................................... 59

Medieneigenschaften ................................ 61, 62

Medientypen ................................................. 59, 60

Schlüsselwort and .............................................. 65

Schlüsselwort not .............................................. 64

Schlüsselwort only ............................................ 64

Stylesheets laden ................................................ 66

Unterstützung mit JS nachrüsten ............... 85

vertikale Media Queries .................................. 78

Media Query Boilerplates ................................. 175

Media Types

all .............................................................................. 59

handheld ............................................................... 60

print ......................................................................... 59

screen ............................................................... 59, 61

Medieneigenschaften

Farbtiefen .............................................................. 61

Geräteausrichtungen ....................................... 61

Größen von Ausgabegeräten ........................ 61

Größen von Viewports ..................................... 61

Mehrspaltensatz ................................................... 145

Metaframe ............................................................... 107

Microsoft PowerPoint ........................................ 103

Microsoft-spezifischer Filter ............................ 301

Minify .............................................................. 455, 456

Mobile Design Patterns ..................................... 132

Index

483

Mobile First ................................... 75, 170, 172, 175

Progressive Enhancement ........................... 172

Mobile Gerätenutzung ...................................... 123

Mobile Inspiration ............................................... 132

Mobile Version ...................................................... 122

Mockups ................................................. 96, 100, 176

Modernizr ......................... 131, 134, 148, 272, 327

Molten Leading ..................................................... 145

Moodboards .............................................................. 92

N

Navigation .............................................................. 157

aktiver Menüpunkt ......................................... 248

Bedienbarkeit per Tastatur ......................... 248

benutzerfreundliche Menüs ........................ 247

Breadcrumbs ..................................................... 248

Content First ...................................................... 249

Dropdown-Menüs ........................................... 248

Fallback ............................................................... 258

Flexnav ................................................................ 279

Fokuseffekt ......................................................... 250

Hover-Effekt ...................................................... 250

Linkauszeichnungen ...................................... 247

Menüpunkte ...................................................... 247

Mininavigation ................................................ 252

Multilevel-Menüs ............................................ 275

Multilevel-Menüs, Inspirationen .............. 279

Multilevel-Menüs, native Einbindung .... 276

Navigation ohne JavaScript ........................ 248

Navigationskonzepte .................................... 247

per Tastatur bedienbar ................................. 248

Touchklick .......................................................... 250

Unterebenen ...................................................... 248

Navigation, mobile

Menü-Icons ........................................................ 265

Menülink ............................................................. 262

Menüpunkte am oberen Rand ......... 251, 254

Off-Canvas-Menü ............................................ 271

per Anker am Ende ......................................... 260

Select-Menü ....................................................... 255

Toggle-Menü ..................................................... 264

Network Information API ................................. 348

Netzwerkprotokoll .............................................. 444

O

Off-Canvas-Menü ................................................. 271

Lesetipp ............................................................... 272

Omnigraffle ............................................................ 103

Online-Editoren .................................................... 105

OOCSS ....................................................................... 162

Open Device Lab ................................................... 440

Open Street Maps ................................................. 381

Opera Mobile Emulator ..................................... 438

Optimierung ........................................................... 443

Orientierung ........................................................... 129

P

Page Speed ............................................................... 443

Page-Zoom .............................................................. 133

Parallelnutzung, Geräte ..................................... 125

Pattern Lab .................................................... 119, 434

PDF ............................................................................. 311

Pencil ......................................................................... 102

Performance ........................................................... 443

2 Klicks für mehr Datenschutz ................... 452

Analytics-Software .......................................... 450

Bilder ..................................................................... 458

Caching ................................................................ 457

Content Delivery Networks .......................... 449

CSS-Sprites .......................................................... 452

Data-URI ............................................................. 452

Dateikompression ........................................... 455

Drittanbieterskripte ........................................ 450

Facebook-Einbindung .................................... 450

Fallback für externe Skripte ......................... 449

Grafiken ............................................................... 458

Inhalte nachladen mit JavaScript ............. 408

JavaScript-Einbindung ................................... 455

Lazy Loading ..................................................... 463

Minifying ............................................................. 455

Schriften optimieren ....................................... 460

Skripte .................................................................. 447

Skripte zusammenfassen .............................. 447

Social-Media-Buttons .......................... 450, 451

Stylesheet-Einbindung ................................... 455

Stylesheets .......................................................... 454

SVG-Optimierung ............................................ 459

Twitter-Einbindung ......................................... 450

Webfonts ............................................................. 460

Webfonts mit weniger Buchstaben .......... 460

Performance-Budget ........................................... 443

Performancekiller ................................................ 447

Photo Swipe ............................................................ 364

Photocopa ................................................................. 98

Photoshop ................................................................. 92

Photoshop-Designvorlage .................................. 44

picture, picture-Element ......................... 339, 343

Picturefill ................................................................. 345

Page 39: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Index

484

Pixel

Bilderpixel ............................................................. 69

device-pixel-ratio ............................................... 68

Gerätepixel .................................................... 67, 69

Pixeldichte ......................... 68, 80, 134, 137, 338

Pixeldichtenvergleich ....................................... 68

Pixel in em umrechnen ..................................... 141

Pixelwerte, feste ........................... 33, 47, 133, 137

Präprozessoren ........................................... 238, 449

@extend .............................................................. 240

@import .................................................... 242, 449

Compass .............................................................. 453

Compass, Sprites .............................................. 307

Erweiterungen .................................................. 240

extend .................................................................. 240

for-Schleife ......................................................... 242

if-then-Entscheidungen ................................ 241

Includes ............................................................... 242

Kontrollstrukturen .......................................... 241

Logik ..................................................................... 241

Mixins .................................................................. 239

nesting ................................................................. 240

Rechenfunktionen ........................................... 241

SASS ...................................................................... 453

Schleifen .............................................................. 241

Variablen ............................................................ 238

Verschachtelungen ......................................... 240

Präsentation .............................................................. 91

Praxisbeispiel .............................................. 175, 252

anpassungsfähiges Headerbild ................. 285

appendAround.js ............................................. 425

atmosphere.css ................................................. 179

Basisversion ....................................................... 181

Bildausschnitt ................................................... 287

Bildergalerie mit Vorschaubildern ........... 361

Bootstrap ............................................................ 230

CSS3-Hintergrund ............................................ 295

CSS-Regions-Polyfill ....................................... 423

CSS-Sprites für hochauflösende

Hintergrundgrafiken ................................ 307

Desktop-Version, Mobile First .................... 204

externe Videos einbinden ............................ 377

Flexbox-Layout ................................................ 211

flexible Imagemaps ........................................ 368

flexible Karteneinbindung ........................... 381

flexible Slideshow ............................................ 356

flexible Teaser-Boxen ..................................... 289

Flexnav-Menü ................................................... 279

Flexslider als Karussell .................................. 363

Footer-Navigation .......................................... 260

Formular ............................................................. 399

Praxisbeispiel (Forts.)

Foundation ......................................................... 226

Gekachelte Hintergrundmuster ................. 293

Große Desktopversion, Mobile first .......... 206

Hintergrundmuster mit SVG ............. 296, 297

HTML5-Videos ......................................... 372, 379

Icon-Fonts mit Font Awesome ................... 334

Inhalte per CSS ausblenden ......................... 405

Inhalte per CSS hinzufügen ......................... 406

layout.css ............................................................ 181

Lichtsensoren .................................................... 155

Mininavigation ................................................. 252

Mobile First ........................................................ 175

Multilevel-Menü ............................................... 277

Off-Canvas-Menü ............................................ 272

PureCSS ................................................................ 233

responsive Bilder (sizes) ................................ 340

responsive Bilder (Srcset) .............................. 340

responsive Bildergalerie ................................ 358

responsive Lightboxen .................................. 365

responsive Tab Accordion ............................ 395

Select-Menü ........................................................ 256

SVG-Infografik .................................................. 314

SVG-Sprites ......................................................... 312

Tabelle mit CSS umstrukturieren .............. 386

Tabellen mit FooTable ................................... 391

Tabelleninhalte deaktivieren

(hide on mobile) .......................................... 384

Tablet-Version, Mobile First ........................ 190

Toggle-Menü mit JavaScript ....................... 264

Toggle-Menü mit Responsive Nav ............ 268

Toggle-Menü nur mit CSS ............................. 266

Vollflächige Hintergrundbilder .................. 302

YAML ..................................................................... 225

Prinzipien der Zugänglichkeit ......................... 151

Progressive Enhancement ...................... 172, 173

Proto.io ..................................................................... 103

Prototypen ................................................................ 92

Prototypen, Content .................................... 95, 116

Prozentwerte, relativ ...................................... 33, 47

PureCSS ..................................................................... 105

Q

Qualitätssicherung .............................................. 431

R

Raster ........................................................................... 32

960er-Grid, fluide .............................................. 36

feste Raster .................................................... 32, 47

Index

485

Raster (Forts.)

flexible Raster ............................................... 32, 47

Kontext, Umrechnung ............................... 47, 48

Rundungsfehler ............................................ 33, 47

Umrechnung (Pixel in Prozent) ............. 33, 47

Realtime Responsive Typography ................ 143

Reguläre Ausdrücke .................................. 400, 402

Relative Element-Höhe berechnen .............. 376

Relative Schriftgrößen ....................................... 139

Relativen Einheiten ............................................. 133

Remote Preview .................................................... 442

Resizer-Bookmarklet .......................................... 435

Responsinator ....................................................... 436

Responsive Einheiten ......................................... 140

Responsive Image Maps .................................... 368

Responsive Images .................................... 339, 344

Adaptive Images .............................................. 349

Echte responsive Bilder ................................. 339

FlashPix ............................................................... 339

Hintergrundbilder ........................................... 339

picture .................................................................. 339

Picturefill ............................................................ 345

Sencha.io Src ..................................................... 352

Responsive Inspector ......................................... 436

Responsive Nav ..................................................... 268

Responsive Tab Accordion ............................... 395

Responsive Type Reference ............................. 135

ResponsiveSlides .................................................. 356

RESS .............................................................................. 87

Restive JS ..................................................................... 86

Retro .......................................................................... 438

Rewrite Engine ...................................................... 449

Richtlinien, Barrierefreie Umsetzung ......... 151

S

Schriftarten

Auswahl ............................................................... 134

Lesbarkeit ........................................................... 134

Schriften

Alternativen testen ......................................... 136

Eingebettete ....................................................... 134

Schriftgrößen ......................................................... 137

62,5-%-Trick .............................................. 140, 141

Relative ................................................................ 139

rem ........................................................................ 139

rem, Fallback ..................................................... 140

Vergleich ............................................................. 143

vmin und vmax ................................................ 140

vw .......................................................................... 148

vw und vh ........................................................... 140

Schriftgrößen (Forts.)

Wahrnehmung .................................................. 141

Schriftgrößenanpassung, Webcam ............... 143

Schulterblick-Termin .......................................... 108

Screenfly ................................................................... 438

Screenreader ................................................. 159, 166

Selective Content Loading, Lesetipp ............. 410

Semantik .................................................................. 151

Semantisches Markup ........................................ 247

Sencha.io Src ........................................................... 352

Silbentrennung ..................................................... 147

Skalierbare Texte .................................................. 148

Skitch ......................................................................... 111

Skizzenbücher ........................................................ 102

SMACSS ..................................................................... 162

Smaps ........................................................................ 438

Smartphones .......................................................... 125

Software Development Kit ............................... 443

Amazon Kindle Fire ........................................ 443

Android ................................................................ 443

Apple iOS (Xcode) ............................................ 443

Windows Phone ................................................ 443

Sourcemaps

CSS-Sourcemaps ............................................... 243

Sprite Cow ................................................................ 306

SpriteMe ................................................................... 306

Sprungnavigation ................................................ 165

srcset .......................................................................... 459

Standardschriftgröße ......................................... 141

Stilkatalog .................................................................. 99

Style Tiles .......................................................... 96, 118

Interactive ............................................................ 98

WordPress-Theme .............................................. 99

Style-Dokumentation ......................................... 111

Styleguides .............................................................. 135

Stylesheet-Einbindung ....................................... 455

Stylesheets

ausgabegeräteabhängige Stylesheets ....... 59

Cascading Stylesheets ...................................... 58

Subversion .............................................................. 111

Suchmaschinen ..................................................... 159

Surfen, geräteübergreifendes .......................... 125

Surferlebnis, reduziertes ................................... 124

SVG ......................................................... 296, 312, 315

alles über SVG, Lesetipp ................................ 315

Browserunterstützung ......................... 326, 330

Einbindung ......................................................... 315

Einbindung, responsiv ................................... 325

Fallback ................................................................ 327

Fallback-Grafik im SVG ................................. 328

Hintergrundmuster ........................................ 296

Page 40: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Index

486

SVG (Forts.)

Servereinstellung ............................................. 326

SVGeezy ............................................................... 327

SVG-Filter ............................................................ 330

SVG-Edit ................................................................... 312

SVGeezy ................................................................... 327

SVGeneration ........................................................ 296

SVG-Optimierung ................................................ 459

Symbol Fonts, Lesetipp ...................................... 338

Syntax-Highlighter ............................................. 112

Syntax-Highlighting ........................................... 113

Systemschriftgröße ............................................. 134

T

Tablets ............................................................ 125, 131

Team

responsives ........................................................ 109

Workflow ............................................................ 109

Testing ...................................................................... 431

Breakpoints testen .......................................... 432

Netzwerkprotokoll .......................................... 444

Open Device Lab .............................................. 440

Performance ...................................................... 443

Text

Lesbarkeit .............................................................. 52

Textbeschnitt .................................................... 147

Text-Zoom .......................................................... 133

Zeilenlänge ............................................................ 53

Texteditor .................................................................. 94

Thinkin' Tags .......................................................... 105

TinyNav .................................................................... 256

TinyPNG ................................................................... 308

Tools, Accessibility

Color Oracle ....................................................... 153

Colour Contrast Check .................................. 155

Contrast Ratio .................................................. 155

Tools, Design

Adobe Fireworks ................................................. 92

Adobe InDesign ................................................... 92

Apple Keynote ................................................... 103

Axure .................................................................... 103

Balsamiq Mockups ......................................... 176

Designbibliothek ................................................ 92

HTML-Mockups kommentieren ................ 107

Illustrator .............................................................. 92

Inkscape ................................................................. 92

Kuler ........................................................................ 98

LibreOffice Impress ......................................... 103

Metaframe ......................................................... 107

Microsoft PowerPoint ................................... 103

Tools, Design (Forts.)

Mockups ....................................................... 96, 100

Moodboards ........................................................ 92

Omnigraffle ........................................................ 103

Pattern Lab ......................................................... 119

Pen and Paper ................................................... 101

Pencil .................................................................... 102

Photocopa ............................................................ 98

Photoshop ............................................................. 92

Proto.io ................................................................ 103

Rapid-Prototyping-Tool ................................ 223

Sketch ................................................................... 312

Skizziervorlagen ............................................... 101

Smaps, Sitemaps .............................................. 438

Style Tiles .............................................................. 96

Style Tiles, Interactive ...................................... 98

Style Tiles, WordPress-Theme ....................... 99

Wireframes ........................................................... 96

Wires, Wireframes ........................................... 438

Tools, Dokumentation

Dexy ...................................................................... 113

Evernote ............................................................... 111

Skitch .................................................................... 111

Tools, Features

css3-mediaqueries.js ......................................... 86

eCSSential ........................................................... 454

HTML5 Shiv ........................................................ 237

Image Maps ....................................................... 368

Initializr ............................................................... 220

Modernizr .................... 131, 134, 148, 178, 236

respond.js .............................................................. 86

Tools, Grafik

Adobe Illustrator .............................................. 312

CorelDraw ........................................................... 312

CSS3-Patterns .................................................... 294

Illustrator .............................................................. 92

Inkscape ............................................................... 312

jQuery Anystretch ............................................ 301

jQuery Backstretch .......................................... 301

Sketch ................................................................... 312

Sprite Cow ........................................................... 306

SpriteMe .............................................................. 306

SVG-Demo-Tool ................................................ 317

SVG-Edit ............................................................... 312

SVGeneration .................................................... 296

TinyPNG ............................................................... 308

Tools, Gridgeneratoren

Gridinator ........................................................... 218

Gridpak ...................................................... 210, 218

Tools, Navigation

DoubleTabToGo.js ........................................... 277

Index

487

Tools, Navigation (Forts.)

FlexNav ................................................................ 279

Off Canvas Menu ............................................. 273

Responsive Nav ................................................ 268

TinyNav ............................................................... 256

Touch Menu Hover ......................................... 250

Tools, Performance

Base64-Generator ........................................... 463

Base64-Konvertierung .................................. 453

CSSEmbed ........................................................... 453

Get ......................................................................... 464

Minify ................................................................... 456

SVG Editor .......................................................... 459

Unveil ................................................................... 465

YSlow .................................................................... 221

YUI Image Loader ........................................... 463

Tools, Syntax

Code2Evernote .................................................. 112

Syntax-Highlighter ......................................... 112

Syntax-Highlighting ...................................... 113

Tools, Testing

Adobe Edge Inspect ........................................ 441

Am I Responsive ............................................... 438

Bildschirmgrößen testen (Firefox) ............... 53

Chrome-Inspektor ........................................... 441

Firebug ................................................................. 443

Firefox-Entwicklertools ................ 53, 208, 432

Ghostlab .............................................................. 442

Opera Mobile Emulator ................................ 438

Page Speed ......................................................... 443

Pattern Lab ........................................................ 434

Polyfill MatchMedia ....................................... 411

Remote Preview ............................................... 442

Resizer-Bookmarklet ...................................... 435

Resizer-Tool ....................................................... 434

Responsinator ................................................... 436

Responsive Inspector ..................................... 436

Retro, eigene Browserdaten abfragen .... 438

Screenfly .............................................................. 438

Totalvalidator ................................................... 432

Validatoren ........................................................ 431

W3C-Validator .................................................. 432

Webdeveloper-Toolbar .................................. 433

weinre .................................................................. 441

YSlow .................................................................... 443

Tools, Typografie

Ffffallback ........................................................... 136

FitText .................................................................. 149

FlowType ............................................................. 148

FontDragr ........................................................... 136

Hyphenator ....................................................... 148

Tools, Typografie (Forts.)

Molten Leading ................................................ 145

Responsive Type Reference .......................... 135

Typecast ............................................................... 135

Tools, Umrechnung

DPI love ................................................................ 142

PixtoEM-Umrechner ....................................... 141

Tools, Video

FitVids.js .............................................................. 377

FluidVids.js ......................................................... 377

video.js ................................................................. 378

Tools, Webeditoren

Email-Template-Builder ................................ 427

Skin Builder ........................................................ 233

Thinkin' Tags ........................................... 105, 223

Webflow ............................................................... 105

YAML-Builder .................................................... 223

Totalvalidator ......................................................... 432

Touchbedienung, Größe Klickflächen ......... 250

Touch-Event ................................................. 125, 131

Touchfähigkeit entdecken ................................ 132

Touchflächen ......................................................... 157

Touchgeräte ............................................................ 127

Touchscreens ......................................................... 125

Typecast ................................................................... 135

Typografie ............................................................... 133

U

Unveil ........................................................................ 465

User-Agent-Sniffing ............................................. 123

User-Interface-Guidelines ....................... 125, 132

V

Vektorgrafiken ....................................................... 312

Versionsverwaltung ............................................ 111

video.js ...................................................................... 378

Videoformate

MP4 ........................................................................ 370

Theora Ogg ......................................................... 370

WebM .................................................................... 370

Viewport ..................................................................... 66

@viewport, Eigenschaften ............................. 74

Anfangszoomstufe ............................................ 71

Geräte-Viewport-Breite ................................. 184

initial-scale=1 .............................................. 71, 185

Layout-Viewport ............................... 66, 69, 184

maximum-scale ................................................. 71

minimum-scale .................................................. 71

Standard-Layout-Viewport ........................... 70

Page 41: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Index

488

Viewport (Forts.)

user-scalable ........................................................ 71

Viewport-Breite ................................................... 75

Viewport-Höhe ................................................. 189

Viewport-Metatag ............................ 70, 72, 184

virtueller visueller Viewport ................... 67, 69

visueller Viewport ....................................... 66, 69

width=device-width ........................................... 72

Vimeo ........................................................................ 373

W

W3C-Validator ....................................................... 432

WAI-ARIA ....................................................... 165, 167

application ......................................................... 167

banner .................................................................. 167

complementary ................................................ 167

contentinfo ........................................................ 167

form ...................................................................... 167

Landmark-Rollen .......................... 162, 165, 248

main ..................................................................... 167

navigation .......................................................... 167

Navigationsliste ............................................... 166

search ................................................................... 167

Übergangsprobleme ...................................... 168

WAI-ARIA-Landmark-Rollen ........................... 177

WAMP ....................................................................... 442

Web Content Accessibility

Guidelines (WCAG) 2.0 .................................. 152

Webflow ................................................................... 105

Webfonts ................................................................. 460

Adobe Typekit ................................................... 461

Font Awesome .................................................. 461

Font Squirrel ...................................................... 461

Google-Fonts ..................................................... 461

-webkit-tap-highlight-color ............................. 128

Website (Beispiele) .............................................. 126

A List Apart ........................................................... 28

Basecamp ........................................................... 127

Bauhaus .............................................................. 444

BBC ........................................................................ 133

Boston Globe ..................................................... 419

Children's Museum ............................................ 50

Chris Coyier, CSS-Tricks ................................. 254

CSS Zen Garden ................................................... 58

Design made in Germany ............................ 197

Einfach für Alle ................................................. 153

FAZ ........................................................................ 444

Flyniki ................................................................... 170

Food Sense .......................................................... 199

Website (Beispiele) (Forts.)

Future Friendly ................................................. 196

Hairproject ......................................................... 298

Microsoft ...................................................... 26, 133

Mobilegeeks ....................................................... 450

Modernizr ........................................................... 198

Momentum ........................................................ 260

Readability ......................................................... 196

Regent College .................................................. 255

Smashing Magazine .................................. 28, 31

Stuff & Nonsense ................................................ 38

Sunday Best .......................................................... 37

Temple University ........................................... 249

T-Mobile ................................................................. 25

Trent Walton ............................................ 196, 251

United Utilities ........................................ 124, 130

USA Today .......................................................... 154

Windwärts ............................................................ 27

Zeit Online .......................................................... 174

ZURB-Playground ............................................ 200

Website (Inhalte) ............................................ 25, 173

Website-Editor ....................................................... 223

Websites

anpassungsfähige ............................................. 25

Barrierefreie ....................................................... 118

Mobilversionen ................................................... 25

weinre ........................................................................ 441

Werbung

anpassungsfähige ........................................... 412

Bannerkonzepte ............................................... 414

fixe Spalte ........................................................... 418

gezielte Zulieferung ........................................ 416

Google AdSense Ads ....................................... 422

nur ein Rectangle-Format ............................ 418

ResponsiveAds .................................................. 416

Werbebanner ..................................................... 412

Werbebanner-Auslieferung ......................... 416

Werbebanner-Erstellung ............................... 416

Werbekonzepte ................................................. 414

Windows Phone SDK .......................................... 443

Wireframes ....................................................... 96, 102

Wirefy ........................................................................ 105

Wires .......................................................................... 438

Workflow ............................................................. 89, 90

WURFL ......................................................................... 87

X

XAMPP ...................................................................... 442

Xcode ......................................................................... 443

Index

489

Y

YouTube ................................................................... 373

YSlow ......................................................................... 443

YUI Image Loader ................................................. 463

Z

Zeilenabstand ......................................................... 144

Zeilenlänge .............................................................. 144

Ziele für Touch-Events ....................................... 125

Page 42: Responsive Webdesign – Anpassungsfähige Websites ...€¦ · responsive-design-s-dirty-little-secret ), in dem er unter anderem auch eine Methode erklärt, die er als »container-relative

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne dürfen Sie diese Leseprobe empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Die vorliegende Leseprobe ist in all ihren Teilen urheberrecht-lich geschützt. Alle Nutzungs- und Verwertungsrechte liegen beim Autor und beim Verlag.

Teilen Sie Ihre Leseerfahrung mit uns!

Kai Laborenz, Andrea Ertel

Responsive Webdesign – Anpassungsfähige Websites programmieren und gestalten489 Seiten, gebunden, in Farbe, 2. Auflage 2014 39,90 Euro, ISBN 978-3-8362-3200-5

www.galileo-press.de/3725

Kai Laborenz arbeitet seit fast 20 Jahren als Webdesigner. Seitdem vermittelt er sein Wissen als Dozent in zahl- reichen Kursen und Workshops; unter anderem beim E-Learning-Anbieter Akademie.de. Er ist Geschäftsführer der Internetagentur Sunbeam und entwickelt Websites für Kunden wie beispielsweise BP und die deutsche Energieagentur.

Andrea Ertel ist seit dem Jahr 2000 als Webdesignerin tätig und seit über 10 Jahren Frontend Developer bei der Kommunikationsagentur Sunbeam. Dort kümmert sie sich um die barrierefreie Umsetzung anpassungs- fähiger Websites und die Integration der Projekte in das Content-Management-System TYPO3.

Wissen aus erster Hand.Wissen, wie’s geht.