Responsive Webdesign – Anpassungsfähige Websites ...€¦ ·...
Transcript of Responsive Webdesign – Anpassungsfähige Websites ...€¦ ·...
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.
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.
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>
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 */
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)=
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.
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.
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;
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.
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.
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.
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.
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:
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).
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
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.)
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
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.
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«).
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.
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;
}
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ü
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
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
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">
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.
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
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.
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
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
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
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
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
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
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
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-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
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
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
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
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
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
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.