Online seit 2000 aktualisierte Auflage jetzt HTML lernen E-Book Teil: Responsive Webdesign (RWD)

Transkript

1 Online seit 2000 aktualisierte Auflage jetzt HTML lernen E-Book Teil: Responsive Webdesign (RWD)

2 Über den Autor: Axel Pratzner studierte an der Universität Tübingen Erwachsenenbildung/Weiterbildung. Neben dem Institut für webbasierte Kommunikation und E-Learning (iwke.com) gebe ich seit 1998 Kurse in verschiedenen Einrichtungen und betreue neben meiner Website auch meinen und (ich denke, dass die sprechende URLs aussagekräftig genug sind, um zu sehen, was ich so mache J) 10. Auflage 2017 Copyright bei Axel Pratzner Albblickweg Böbingen Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen ist ohne die schriftliche Zustimmung von mir urheberrechtswidrig. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen. Es wird darauf hingewiesen, dass die in der Publikation verwendeten Soft- und Hardware- Bezeichnungen sowie Produktbezeichnungen und Markennamen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen. Alle Angaben und Programme in der Publikation wurden mit größter Sorgfalt kontrolliert. Der Autor kann jedoch nicht für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieser Publikation stehen. 2

3 Inhaltsverzeichnis Responsive Webdesign 4 Viewport richtig setzen für mobile Geräte und Responsive Webdesign 5 Anwendung der Metaangabe des Viewports 7 Welche Größe haben eigentlich Handy-Displays? 8 Schriftgröße gleich egal welche Ausrichtung 10 Viewport-Angabe richtig gesetzt für mobile Geräte 11 CSS Media Queries Bildschirmausgabe abhängig von der Auflösung 12 Auswahl über die Medieneigenschaften 13 Kontrolle von Responsive Webdesign direkt im Browser 14 mit Firefox 15 Bei Chrome 15 Bei Safari 15 Weitere Tools 16 Bilder einsetzen Responsive Design 17 Bilder, die im HTML-Code integriert sind 17 Bilder für Design und Hintergrund, die im CSS eingebunden sind 18 background-size: auto; 19 background-size: 100% 100%; 19 background-size: cover; 20 background-size: contain; 20 Herstellerprefixe für alte Browserversionen 21 Hintergrundbild für komplettes Browserfenster 21 Videos aus externen Quellen (z.b. Youtube, Vimeo) in Responsive Webdesign integrieren 25 Videos, die nicht extern sind, sind kein Problem bei Responsive Webdesign 25 Externe Videos (z.b. Youtube) in Responsive Webdesign 26 Sticky Footer für Responsive Design über CSS-Tabellen 28 Erweiterung zum zentrierten Layout 30 Toggle Menü ohne JavaScript für mobile Navigation 31 Schritt für Schritt zum Toggle-Menü für Handy mit responsive Design 34 Steuerung über MENÜ-Button ohne JavaScript 42 MENÜ-Button anklickbar 47 MENÜ-Button für responsives Design

4 Responsive Webdesign Responsive Webdesign (Abkürzung rwd und auf deutsch responsives Webdesign) ist durchaus wörtlich zu nehmen. Responsive bedeutet reagieren. Sprich das Webdesign reagiert auf z.b. Bildschirmgrößen. Wird eine Website auf einem Computer mit einem großen Browserfenster angezeigt, wird meistens die Steuerung und der Inhalt anders dargestellt als auf einem kleinen Handydisplay. Wir können beim Design entsprechend darauf reagieren. Das schöne ist, dass wir nichts am Inhalt ändern müssen, wenn dieser technisch geschickt aufgebaut ist. Der Pflegeaufwand vom Inhalt ist also nicht größer aber die Nutzergruppe steigt, da viele Menschen ihr Handy bzw. ihr Tablett zum Surfen nutzen. In den folgenden Kapiteln werden alle notwendigen Vorgehensweise vorgestellt und wie gewohnt Schritt für Schritt umgesetzt: Gestartet wird gleich mit einem Leckerbissen, der Responsive Webdesign glänzen lässt. Wir erstellen eine Steuerung für eine kleine Website, die je nach Bildschirmbreite zwischen der unterschiedlichen Darstellung der Navigation automatisch umschaltet. Toggle Menü ohne JavaScript für mobile Navigation Klassische Steuerung für den Umbau vorbereiten Erweitern zur Menüsteuerung (Toggle-Menü) ohne JavaScript Automatische Umschaltung je nach Auflösung (Responsive Webdesign) Weitere geplante Inhalte ist ein Kapitel über Media Queries (damit wird erst Responsive Webdesign einfach möglich) und Vorgehensweise bei Bilder und anderen Mediainhalte sowohl der Vorgehensweise bei zweiund Dreispaltigem Layout. 4

5 Viewport richtig setzen für mobile Geräte und Responsive Webdesign Ruft man viele Websites auf dem Handy auf, bekommt man eine sehr kleine Version zu Gesicht und darf zoomen. Spaß macht es nicht wirklich, aber man bekommt einen Überblick über eine Website, die nach der althergebrachten Weise aufgebaut wurde. Warum passiert diese Verkleinerung von Websites überhaupt? Warum wird auf einem Handy mit z. B. 320 Pixeln Bildschirmbreite die Website auf 980 Pixel angezeigt? Weil das mit dem iphone 3 von Apple so festgelegt wurde. Zusätzlich hat Apple auch eine Metatag-Angabe festgelegt, um dieses Verhalten für den sogenannten Viewport beeinflussbar zu machen. Viewport ist kurz gesagt das Anzeigefenster, was beim Handy immer der kompletten Breite entspricht. Aber der Reihe nach. Unter der URL sind Beispielseiten hinterlegt, um sich das Verhalten live auf dem eigenen Handy ansehen zu können. Wird eine Website erstellt und der Metatag für die viewport-angabe nicht gesetzt, erhalten wir eine Fensterbreite und müssen fleißig zoomen. Dabei ging man damals wohl von 2 Annahmen aus: viele Websites waren auf einen Computermonitor von 1024 Pixel ausgelegt und das würde auch so bleiben die Menschen wollen lieber erst einen Überblick um gezielt vergrößern (zoomen) zu können Warum 980 Pixel und keine 1024? Auf normalen Bildschirmen kommt noch der Rahmen und der Scrollbalken vom Browser dazu zieht man diese ab, ist man bei den typischen 980 Pixel (am Rande bemerkt, andere Handyhersteller haben andere Pixelzahlen genommen aber alle sind mit Zoomen verbunden). Beispielwebsite unter 5

6 Links sehen wir die normale Übersichtsausgabe Rechts mit Viewport-Angabe und lesbarer Schrift Hier sehen wir die Annahme, dass nur Websites mit der viewport-angabe auch für die Ausgabe auf kleinen Displays entsprechend vorbereitet (sprich das Design angepasst) wurde. Wir kommen also um diese Angabe nicht herum, weil auch alle anderen Handy-Hersteller diese Angabe übernommen haben und somit einen de facto Standard geschaffen haben. Interessant ist, dass je nach Ausrichtung des Handys eine unterschiedliche Zoomstufe der Schrift vorhanden ist. Nochmals unser Beispiel ohne Angabe des Viewport-Angabe auf dem Handy in beiden Ausrichtungen: 6

7 ohne Viewport mit unterschiedlicher Schriftgröße je nach Ausrichtung vom Handy Anwendung der Metaangabe des Viewports Der Viewport ist eine Metaangabe, die im Headbereich der Website angegeben wird. <head> <meta name="viewport" content="width=1200px"> </head> Im Bereich Content wird nach der Angabe width (engl. Breite) die gewünschte Breite angegeben. In unserem Beispiel 1200 Pixel. Damit besser sichtbar, wurde der Bereich mit Gelb hinterlegt auf unserer Beispielseite unter px.htm 7

8 viewport fix auf 1200 Pixel eingestellt Durch den zu großen Viewport entstehen Löcher im Design. Dort steht kein Text, da die Sätze davor umgebrochen wurden über den HTML- Befehl <br>. Die Nutzung von 1200 Pixeln für die Breite macht also nicht wirklich Sinn aber was macht Sinn? Welche Größe haben eigentlich Handy-Displays? Eine Frage, die wir am besten durch eine Website beantworten können, die fleißig die Daten der meisten Handys sammelt: 8

9 Bildschirmgrößen und deren Popularität Kurz gesagt eine feste Angabe macht keinerlei Sinn! Die einfache Lösung ist, dass wir dem Gerät sagen, nutze bitte als Breite deine native Breite sprich die Angabe ist: width=device-width Die Beispielseite ist zu finden unter: Nutzung von width=device-width bei der Angabe des Viewports 9

10 Wieder ist bei der horizontalen Ausrichtung des Handys sichtbar, dass die Schriftgröße größer ist als bei der anderen Ausrichtung! Das kann durchaus gewünscht sein, aber kann auch sehr störend sein je nachdem wie man sein Design erstellt. Schriftgröße gleich egal welche Ausrichtung Um die annähernd gleiche Schriftgröße zu bekommen, egal welche Ausrichtung das Handy gerade hat, kann die Viewport-Angabe erweitert werden. Beispielseite: Schriftgröße auf Handy gleich egal welche Ausrichtung Unsere Angabe width wird ergänzt um width=device-width, initial-scale=1 Im direkten Vergleich zwischen initial-scale und ohne diese Angabe fällt es besser auf: 10

11 Handy: Vergleich zwischen initial-scale und ohne Viewport-Angabe richtig gesetzt für mobile Geräte Somit hätten wir als vollständige Angabe dann: <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> Somit haben wir eine anständige Schriftgröße und können nun unser Design für die mobile Seite erstellen. Eine automatische Umschaltung zwischen dem Design für die mobilen Geräte und Geräten mit großer Auflösung wird durch Media Queries erzeugt. Damit sind wir einen Schritt weiter in Richtung Responsive Webdesign. 11

12 CSS Media Queries Bildschirmausgabe abhängig von der Auflösung über Media Queries können CSS-Anweisungen "auflösungsabhängig" erstellt werden Wir haben bereits die Möglichkeit kennen gelernt, um CSS-Dateien für das Design einzubinden. <link href="design.css" type="text/css" rel="stylesheet"> Das Attribut type="text/css" ist nur bei sehr alten Browsern notwendig kann also weggelassen werden. <link href="design.css" rel="stylesheet"> Über diesen Link können bereits Einschränkungen gemacht werden, für welche Medien die CSS-Anweisungen gelten sollen. Hier werden z.b. gerne für die Druckerausgabe andere CSS-Anweisungen als für die optimale Monitor-Ausgabe verwendet. <link href="design.css" media="screen"> <link href="printer.css" media="print"> Allerdings ist es wegen der Geschwindigkeit der Website nicht ratsam, mehrere CSS-Dateien zu haben, da auch alle geladen werden, selbst wenn diese eigentlich nicht benötigt werden. 12

13 Daher wird diese Unterscheidung direkt im CSS-Bereich screen { /* CSS-Anweisungen für die Ausgabe auf Bildschirmen print { /* CSS-Anweisungen für die Druckerausgabe */ Es gibt weitere Media-Typen, die allerdings sich i.m.m. nicht durchgesetzt haben. Auswahl über die Medieneigenschaften Zusätzlich können wir über die Medieneigenschaften die gewünschte Auswahl für Responsive Design bewirken. Wir können die Breite des Bildschirms abfragen. Unsere Anweisung wird ergänzt um z.b.... and ( max-width: 500px )... and ( min-width: 500px ) Angewendet sieht das dann wie folgt screen and ( max-width: 500px ) { /* CSS-Anweisungen für Bildschirmbreiten bis maximal 500 Pixel */ Zusätzlich wird zur Sicherheit vor alten Browsern ein only eingefügt, der alte Browser vor einem Versuch der Anwendung abhält, was diese eh nicht können würden (was für ein only screen and ( max-width: 500px ) { /* CSS-Anweisungen für Bildschirmbreiten bis maximal 500 Pixel */ Folgend ein Beispiel für 3 Media Queries für unterschiedliche Ausgabengrößen. Wir nutzen Hintergrundfarben, damit sofort sichtbar ist, welcher Zustand aktiv only screen and ( min-width: 950px ) { /* breites Browserfenster */ body { background-color: only screen and ( max-width: 440px ) { /* mobile Geräte */ body { background-color: only screen and ( min-width: 440px ) and ( max-width: 950px ) { /* Tablets und mittlere Bildschirme */ body { background-color: red; 13

14 Kontrolle von Responsive Webdesign direkt im Browser Vertrauen ist gut, Kontrolle ist besser daher, und vor allem beim Entwickeln ist die Kontrolle der Ausgabe gut. Natürlich geht nichts über die Kontrolle auf den Endgeräten (sprich Handy und Tablets) aber für die schnelle Kontrolle ist der Computer bzw. die vorhandenen Browser auch gut. Kontrolle des Designs bei verschiedenen Displaygrößen von Handys Wenn wir Beispielsweise den Sticky Footer für Responsive Webdesign kontrollieren wollen: Nachdem wir die Seite aufgerufen haben, können wir das Browserfenster in der Breite entsprechend ändern. 14

15 Eine andere schnelle Methode ist den Zoomfaktor des Browsers zu verändern. Dadurch wird das Responsive Design auch je nach Breakpoints aktiviert. Der Vorteil ist, dass wir das über die Shortcuts beim Browser machen können. Vergrößern über Strg + + Verkleinern über Strg % Ansicht über Strg + 0 (Null) Soll es aber exakt sein, helfen bei den aktuellen Browsern die Bordmittel. mit Firefox In Firefox über Extras -> Web-Entwickler -> Bildschirmgrößen testen Jetzt erhalten wir über dem Inhalt und unterhalb der URL die Möglichkeit die wichtigen Handy-Display-Größen auszuwählen und zwischen vertikaler und horizontaler Darstellung mit dem Pfeil neben den Maßen hin und her zu schalten. Bei der Auflösung 360 x 640 sieht man gut den Wechsel zwischen dem Toggle-Menü und der klassischen Menüzeile. Bei Chrome In Chrome unter dem Menüpunkt Anzeigen -> Entwickler -> Entwicklertools erhalten wir unten eine ganze Menge an Möglichkeiten. Sehr unscheinbar ist dort in der Leiste neben der Lupe ein Handy abgebildet. Nachdem wir darauf geklickt haben, können wir zwischen URL und Inhalt dann das Device auswählen, Amazon Kindle über iphones bis zum Samsung Galaxy ist jede Menge vertreten. Die Auswahl beeinflusst die Größe auch hier ist rechts neben der Größe ein Pfeil um die Ausrichtung umzuschalten. Solle es ein Anzeigeproblem geben, einfach ein Reload der Seite. Rechts und unten gibt es Anfasser und wir können individuell die Größe verändern und sehen sofort oben, welche Auflösung in Pixel dies gerade entspricht. Bei Safari 15

16 Es gibt auch bei Safari Entwickler-Werkzeuge, die allerdings erst bei den Einstellungen aktiviert werden müssen (Reiter Erweitert der Punkt Menü Entwickler in der Menüleiste anzeigen ). Allerdings gibt es dort bisher nichts, um direkt die Auflösungen von mobilen Devices zu testen. Interessant ist aber die einfache Möglichkeit den übermittelten User Agent schnell umzustellen. Der User Agent sagt quasi aus, mit welchem Gerät/Browserversion man zugreift, ist aber nicht zuverlässig, da einfach manipulierbar. Macht eine Website die Anpassung anhand des User Agent kann hier schnell damit gespielt werden, da schnell umstellbar zwischen iphone, ipad und IE, Firefox, Chrome und Safari. Weitere Tools Es gibt natürlich noch zig weitere Tools im Netz und Plug-Ins aber Bordmittel sind einfach, da schon da. 16

17 Bilder einsetzen Responsive Design Es gibt 2 Arten vom Bilder: Bilder, die Inhaltlich wichtig sind und daher im HTML-Code stehen Bilder, die nur Design sind und im CSS-Code integriert werden. Beispiele für background-size bei Hintergrundbildern Für die 2 Arten gibt es daher auch unterschiedliche Vorgehensweise: Wir wollen festlegen, wie sich ein Bild verhält, je nachdem wie viel Platz vorhanden sein wird. Bilder, die im HTML-Code integriert sind Diese Bilder haben ihre Größenangaben im HTML-Code hinterlegt. Das ist auch wichtig und richtig so. Das ist bei fixem Design gut, damit der entsprechende Platz vorgehalten wird, solange die Bilder noch nicht geladen sind und damit die Bilder in der bestmöglichen Qualität angezeigt werden. 17

18 <img src=" class="bild" width="474" height="66" alt="html-seminar.de - jetzt HTML lernen" > Bei Responsive Design klappt das nicht mehr! Hier müssen wir über CSS den Angaben in HTML gegensteuern..bild { width: 100%; Allerdings reichte die Angabe der Breite nicht aus, da ja die Höhe auch noch durch HTML festgelegt wird und es zur Verzerrung des Bildes bei nur der Angabe der Breite kommen würde. Daher muss die Höhe in CSS auch festgelegt werden. Durch die Angabe height: auto; wird die CSS- Angabe zur Berechnung herangezogen und das Bild wird nicht verzerrt!.bild { width: 100%; height: auto; Haben wir nun durch viel Platz den Effekt, dass mehr Breite zur Verfügung steht, als das Bild in seiner Originalgröße Breit ist, wird das Bild weiter gestreckt und die Qualität leidet irgendwann deutlich sichtbar. Daher kann die Breite auf die Originalbreite des Bildes begrenzt werden über maxwidth: 100%;. Diese Angabe wird anstelle von width gesetzt!.bild { max-width: 100%; height: auto; Bilder für Design und Hintergrund, die im CSS eingebunden sind Hintergrundbilder sind bereits im CSS eingebunden über:.kopfbereich { background: url(hintergrundbildkopf.jpg) no-repeat; Wer mit dem im Beispiel gezeigten Igelfoto testen möchte, kann diesen herunterladen unter Der Igel hat eine Größe von 200 x 200 Pixel. Die fixe Hintergrundfläche hat eine Größe von 300 x 220 Pixel und die variable Hintergrundgröße 100% x 220 Pixel. 18

19 Hier können wir über die CSS-Angabe background-size das Verhalten beeinflussen. Diese Anweisung ist mit CSS3 gekommen. Wir können diese ab Crome 4, IE 9, Firefox 4 Safari 4.1 und Opera 10.5 problemlos nutzen. Für einige vorherige Versionen ist das Herstellerprefix notwendig. Schauen wir an, was damit möglich ist:.kopfbereich { background: url(hintergrundbildkopf.jpg) no-repeat; background-size: auto; background-size: auto; Das Hintergrundbild soll seine originalen Maße in Breite und Höhe beibehalten. background-size: auto; Hintergrundbild in seinen originalen Maßen - background-size: auto; background-size: 100% 100%; Wir können auch Prozente angeben und somit ein komplettes Ausfüllen des vorhandenen Bereichs ermöglichen. Daher bitte abschätzen, ob eine Verzerrung des Bildes akzeptabel ist! background-size: 100% 100%; 19

20 Hintergrundbild nutzt kompletten Bereich - es kann zu Verzerrungen kommen - background-size: 100% 100%; background-size: cover; Das Hintergrundbild wird so groß wie möglich skaliert, damit es komplett sichtbar wird. Allerdings kann dadurch entweder neben oder unter dem Bild keine Abdeckung durch das Bild erfolgen und der Hintergrund sichtbar werden. background-size: cover; Hintergrundbild so groß wie möglich skaliert damit komplett sichtbar - es kann unbedeckten Bereichen kommen - background-size: cover; background-size: contain; Das Hintergrundbild wird so groß wie möglich skaliert, damit der vorhandene Bereich komplett bedeckt ist. Es kann allerdings vorkommen, dass Teile vom Bild abgeschnitten sind! background-size: contain; 20

21 Hintergrundbild so groß wie möglich skaliert - es kann zu Beschneidungen kommen - background-size: contain; Und wer selber testen mag (Fensterbreite ändern) kann das unter: Herstellerprefixe für alte Browserversionen Die Herstellerprefixe sind durchaus sinnvoll und sollten je nach Wahl der Art entsprechend angepasst werden: -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; Hintergrundbild für komplettes Browserfenster In CSS3 ist über background-size eine einfache Möglichkeit entstanden, ein flächendeckendes Hintergrundbild zu erstellen. Das Bild wird zentriert und fixiert (sprich es bewegt sich beim Scrollen nicht mit). Über background-size: cover; bekommt es die maximale Größe. html { background: url(hintergrundbild.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; Wir haben zwar die Einschränkung, dass es nicht alle jeglichen alten Browserversionen funktioniert (siehe oben) aber die Einfachheit der Integration überzeugt. 21

22 Anbei ein Bild zum Testen: 22

23 23

24 Zum Speichern rechte Maustaste auf das Bild oder folgendem Link klicken und "Speichern unter" wählen. Link zum Foto: jpg 24

25 Videos aus externen Quellen (z.b. Youtube, Vimeo) in Responsive Webdesign integrieren externe Videos einbinden in Responsive Webdesign Videos, die nicht extern sind, sind kein Problem bei Responsive Webdesign Wie wir ein eigenes Video durch die Verwendung von HTML5 einbinden, ist im entsprechenden Kapitel unter video.htm beschrieben. Videos, die auf dem eigenen Webspace gehostet sind, können in das Responsive Webdesign genauso eingebunden werden wie wir es bereits mit Bildern gemacht haben: video { max-width: 100%; height: auto; 25

26 Externe Videos (z.b. Youtube) in Responsive Webdesign Interessant wird das Einbinden von externen Videos wie Beispielsweise Videos von Youtube. Hier haben wir, wenn der Besitzer es zulässt, unter dem Video den Punkt Teilen und dort dann Einbetten. Wir können die Videogröße in Pixelgröße festlegen. Als Beispiel kommt ein Videos von unserem Fotokurs zum Einsatz, das es unter gibt. Erstellt wird von Youtube ein iframe zum einbinden. <iframe src=" width="640" height="360" frameborder="0" allowfullscreen></iframe> Wird dies in der Form integriert, reagiert es nicht auf Größenänderungen des Fensters, sondern ein Scroll-Balken erscheint, wenn zu wenig Platz vorhanden ist! Allerdings fehlt hier die Möglichkeit dies für Responsive Webdesign zu bekommen! Hier kommt ein Kniff zum Einsatz. Wir erweitern den HTML-Code um den Klassennamen beim iframe und packen einen Container darum herum. Somit bekommt der iframe die Klasse.videoExtern mit der absoluten Positionierung und ein Element mit der ID #videobereich1 als Container darum herum. <div id="videobereich1"> <iframe class="videoextern" width="640" height="360" src=" frameborder="0" allowfullscreen></iframe> </div> Folgende CSS-Anweisungen bewirken die Magie: #videobereich1 { background-color: orange; position: relative; height: 0; padding-bottom: 56.25%;.videoExtern { background-color: yellow; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 26

27 Die Klasse.videoExtern überschreibt die Werte des iframe im HTML von bisher 640 und 360 (Zahlen aus Beispiel) mit den CSS-Anweisungen width: 100%; und height: 100%;. Jetzt kommen die Größen des Containers darum herum zum Tragen. Und dieser benötigt eine Höhe, die wir über das padding-bottom Prozentual festlegen. Das Seitenverhältnis des Videos wird über das padding-bottom: mitgegeben. Hier ist die Berechnung Beispielweise 9 / 16 * 100% = 56,25% Beziehungsweise mit den Zahlen vom Beispielvideo: 360 / 640 * 100% = 56,25% Den fertigen Code gibt es zum Testen unter: Falls jemand tiefer in das gelöste Problem einsteigen mag es lag an dem Standardverhalten der iframes, die ohne Angaben immer 300 Pixel auf 150 Pixel dargestellt werden. Somit haben wir über eine direkte Anweisung von 100% Höhe kein Erfolg. Das nur am Rande. 27

28 Sticky Footer für Responsive Design über CSS-Tabellen Eigentlich ist der Fußbereich in einem Nicht-Responsiven Design kein großes Ding. Ein Tutorial dazu gibt es bereits unter Allerdings wird es eine Baustelle, wenn wir einen Sticky Footer mit Responsive Design machen möchten. Hier kann der Inhalt wegen möglichen Umbrechen von Text nicht mehr von der Höhe abgeschätzt werden und somit klappt der Ansatz aus dem letzten Tutorial mit dem absoluten Positionieren nicht. Sticky Footer bei Responsive Design Aber es gibt in CSS ja noch mehr Möglichkeiten. Schauen wir uns doch einfach einmal die CSS-Anweisungen für table an. Klar sind HTML- Tabellen, die nur aus Designgründen gemacht wurden in Ungnade gefallen (zurecht so hat man Design im letzten Jahrtausend gemacht!). Aber wenn wir das nun über CSS machen, ist das eine Erweiterung unserer Möglichkeiten. Gleich vorneweg der IE ist wieder der böse Bube. Denn erst ab der Version 8 unterstützt dieser die CSS-Tabellen. Kann man also damit leben, dass man nicht ewig abwärtskompatibel ist, dann ist das eine schöne Variante. 28

29 Als erstes unserer HTML-Bereich <!DOCTYPE HTML> <html lang="de"> <head> <meta name="viewport" content="width=device-width"> <meta charset="utf-8"> <title>beispiel Sticky Footer bei Responsive Design</title> <link rel="stylesheet" href="sticky-footer-rwd.css"> </head> <body> <header class="tabellen_zelle">bereich Kopf</header> <nav class="tabellen_zelle">bereich Steuerung</nav> <section class="tabellen_zelle maximale_hoehe"> <h1>beispiel Sticky Footer bei Responsive Design</h1> <p>bereich Inhalt<br> Bereich Inhalt<br> Bereich Inhalt<br> Bereich Inhalt<br> Bereich Inhalt</p> </section> <footer class="tabellen_zelle"> Beispiel Sticky Footer bei Responsive Design <br> </body> </html> Wir haben im HTML-Code bereits jedem Bereich ein Klasse.tabellen_zelle vergeben und für den Inhaltsbereich, der über dem Fußbereich sitzt zusätzlich die Klasse.maximale_hoehe. Und nun stürzen wir uns auf den CSS-Bereich: Damit der Sticky Footer funktioniert, muss die Tabelle die komplette Höhe des Bildschirms einnehmen. Sprich html und body bekommen die Höhe mit 100% zugeteilt. html, body { height: 100%; Als nächsten vergeben wir für das Element body die Display-Eigenschaft table und eine Breite von 100% und eine Hintergrundfarbe: body { display: table; width: 100%; background-color: yellow; Wir benötigen nun die Tabellen-Zellen auch dazu erstellen wir eine entsprechende klasse, die wir im HTML bereits den 4 Bereich zugeteilt haben:.tabellen_zelle { display: table-row; background-color: orange; 29

30 Wir haben nun ganz oben unseren Kopfbereich, danach die Steuerung. Damit die Steuerung eine andere Hintergrundfarbe bekommt, wird dem HTML-Element nav diese zugeteilt und der Wert der Klasse.tabellen_zelle überschrieben. nav { background-color: limegreen!important; Damit auch der Inhalt unterscheidbar wird, bekommt dieser über die Klasse.maximale_hoehe eine Hintergrundfarbe:.maximale_hoehe { background-color: deepskyblue; Wenn wir jetzt das Ergebnis ansehen, bekommen wir 4 gleich hohe Bereiche: Als letzten Schritt bekommt die Klasse.maximale_hoehe nun 100% Höhe zugeteilt und alles ist gut:.maximale_hoehe { height: 100%; background-color: deepskyblue; Erweiterung zum zentrierten Layout Möchte man nun noch das typische zentrierte Layout erhalten, dann einfach die CSS-Anweisung für den body um die Zeile margin: 0 auto; erweitern und die Breite ändern: body { display: table; width: 80%; margin: 0 auto; background-color: yellow; Viel Spaß beim Nachbauen und testen! Zum Testen von Sticky Footer bei Responsive Design:

31 Toggle Menü ohne JavaScript für mobile Navigation Wir wollen eine einfache und JavaScript-freie Lösung für ein Menü, das sich bei kleineren Auflösungen für Handy und Tablett automatisch ändert. Das funktioniert bei wenigen Steuerungspunkten sehr galant über HTML und CSS. So sieht unser fertiges Ergebnis dann aus: bei genügend Platz ist die Navigation oben immer sichtbar und direkt anklickbar Bei kleineren Displays wird automatisch umgeschaltet auf ein Toggle- Menü und die Website kann auf dem Handy optimal genutzt werden. 31

32 wir bekommen automatisch ein Toggle-Menü und beim Anklicken werden die Menüpunkte angezeigt Das Ganze ist komplett ohne JavaScript und einfach umsetzbar im folgendem die Schritt für Schritt Erklärung zum Nachbauen. 32

33 Diese schöne Lösung für ein Toggle Menü funktioniert über die CSS- Pseudoklasse :target Normalerweise wird man diese für Sprungmarken innerhalb von einer Seite verwenden (hierzu gibt es ein Kapitel unter Unser HTML-Code sieht wie folgt aus: <a href=" zum Fussbereich</a> Im HTML hat die angesprungene Stelle folgenden Aufbau: <div id="fussbereich">...</div> Wenn der Link nun angeklickt wird, kann über CSS und der Pseudoklasse :target das Ziel angesprochen werden. Im folgenden Beispiel färben wir den Hintergrund gelb ein. <style> #fussbereich:target { background-color: yellow; </style> <div id="fussbereich">...</div> Dieses Verhalten können wir nun natürlich auch ideal für unser Toggle- Menü ohne JavaScript verwenden. In den folgenden 3 Kapiteln wird Schritt für Schritt das Toggle-Menü für Handy mit Responsive Design ausgebaut. Zur Sicherheit wird als Fallback die normale Desktopansicht als Vorgabe gewählt, falls ein Browser Probleme mit der Darstellung hat. Wir gehen Schrittweise vor: Erstellung einer klassischen Steuerung Diese wird erweitert zu einer Steuerung mit Menü-Button Und im letzten Schritt wird daraus ein Toggle-Menü mit automatischer Umschaltung je nach Bildschirmauflösung für Responsive Webdesign Und nun viel Spaß beim Nachvollziehen. 33

34 Schritt für Schritt zum Toggle-Menü für Handy mit responsive Design Zuerst erstellen wir eine normale Steuerung, welche im zweiten Schritt in das Design eines Pulldown-Menüs umgewandelt wird und dann mit MENÜ-Button angezeigt, bzw. ausgeblendet werden kann. klassische Navigation oben immer sichtbar und direkt anklickbar Hier unser HTML-Bereich noch ohne Klassen und IDs, die wir für die Toggle-Steuerung benötigen. Diese werden eingefügt, wenn diese benötigt werden. Hier zum mitbasteln der komplette HTML-Code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>toggle Menü ohne JavaScript (CSS:target)</title> <style> * { margin: 0; padding: 0; font-family: Arial, sans-serif; </style> </head> <body> <header id="nav-menue"> 34

35 <a href="#" id="bereichlogo">html-seminar.de</a> <nav id="steuerung" role="navigation"> <ul> <li><a href="#">startseite</a></li> <li><a href="#">html lernen</a></li> <li><a href="#">beispiele</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">impressum</a></li> </ul> </nav> <a class="menue-button menue-button-beschr-close" href="#nav-menue-zu">menü zu</a> <a class="menue-button menue-button-beschr-open" href="#nav-menue">menü auf</a> </header> <section> <h1>toggle Menü ohne JavaScript (CSS:target)</h1> <h2>steuerung für mobile Geräte</h2> <p> Inhalt.</p> <p> Inhalt.</p> </section> </body> </html> Noch sieht unsere Website für unser responsives Design noch nicht besonders schön aus. Im CSS-Bereich ist bisher nur die Abstände auf 0 gesetzt und Arial als Schriftart ausgewählt. 35

36 Aussehen ohne CSS der komplette HTML-Code Unser erstes Ziel ist es, eine normale Steuerung zu erstellen, wenn genügen Bildschirmbreite vorhanden ist: das soll der Ergebnis sein für die normale Steuerung Damit wir sehen wo wir arbeiten, geben wir unserem <header> eine Hintergrundfarbe in knalligem gelb, unten einen Rahmen und eine Breite von 100% mit. Damit gut sichtbar verwenden wir ein knalliges Gelb das wird später nicht mehr da sein aber während der Entwicklungsphase ist gut zu sehen, wo man arbeitet. header { background-color: yellow; width: 100%; border-bottom: 1px solid black; 36

37 Bereich für header wird festgelegt (und sichtbar gemacht) Das Logo (in unserem Fall der Link mit dem Text HTML-Seminar.de), soll getrennt von der Steuerung dargestellt werden und weder Unterstreichungen noch Abstände bekommen. In CSS sprechen wir den Bereich über die ID #bereichlogo an. #bereichlogo { color: white; background-color: limegreen; display: block; padding: 0.5em; text-decoration: none; float: left; width: auto; der Bereich für das Logo wird gesetzt Wichtig ist, dass der Bereich #bereichlogo als Blockelement dargestellt wird und umflossen werden kann, aber in unserem 1. Design nur den notwendigen Platz vom Textinhalt HTML-Seminar.de einnimmt. Daher bekommt dieser Bereich die CSS-Anweisung width:auto;. Um später schneller und einfacher das responsive Design aufzubauen, werden hier aus didaktischen Gründen aus dem einen CSS-Bereich gleich 2 CSS-Bereiche erstellt: 37

38 #bereichlogo { color: white; background-color: limegreen; display: block; padding: 0.5em; text-decoration: none; float: left; #bereichlogo { width: auto; Die Punkte im grünen Bereich kommen von den List-Elementen diese deaktivieren wir im Bereich #steuerung über: #steuerung li { list-style: none; Listenpunkte ohne Aufzählungszeichen anzeigen Damit die Punkte in der Steuerung nebeneinander erscheinen, werden diese gefloatet: #steuerung li { list-style: none; float: left; Steuerungspunkte nebeneinander darstellen 38

39 Und es soll auch nach etwas aussehen und die möglichen Klickbereiche größer werden. Daher werden die Links im Bereich #steuerung als Blockelement mit einer Höhe von 100% (sprich die Höhe vom umgebenden Element <header>) und einem Innenabstand padding von 0.5em (somit Abstand um alle Seiten), definiert. #steuerung a { display: block; height: 100%; width: 100%; padding: 0.5em; text-decoration: none; /* keine Unterstreichung */ color: white; /* Schriftfarbe weiß */ background-color: gray; /* Hintergrundfarbe grau */ Steuerungspunkte oben nebeneinander mit Design In diesem Design benötigen wir noch keine Schaltfläche für das Aufklappmenü. Daher können wir beide Links Menü auf und Menü zu komplett ausblenden. Da wir als Klassenname.menue-button für beide Links vergeben haben, können wir geschickt mit folgender CSS- Anweisung diese ausblenden:.menue-button { display: none; Steuerungleiste oben ohne Links für Toggle-Menü 39

40 Jetzt kommt noch ein Versäumnis ans Licht. Auf einmal wird der header- Bereich vom nachfolgenden Inhalt umflossen. Das bekommen wir über die Erweiterung im #header von width:100% mit float: left in den Griff. header { background-color: yellow; width: 100%; float: left; border-bottom: 1px solid black; Steuerungsleiste oben nutzt den kompletten Bereich Zugunsten des Designs wollen wir die Steuerung auf der rechten Seite ausgerichtet bekommen. #steuerung { float:right; Navigation rechts ausgerichtet Und damit der Nutzer beim Überfahren der Links ein Feedback bekommt, nutzen wir :hover. #steuerung a:hover { color: black; background: orange; 40

41 ausgewählte Punkte in Steuerung hervorheben Wenn jetzt das Gelb stört, kann im Bereich header die Hintergrundfarbe von yellow auf gray gestellt werden. header { background-color: yellow; background-color: gray; klassische Steuerung oben fertig Allerdings ist es später für das responsive Design interessant zu sehen, wann es vom benötigen Platz oben gut ist einen Breakpoint in den Media Queries zu setzen. Dazu später mehr. Auf der folgenden Seite geht es weiter mit der Steuerung als Menü-Button 41

42 Steuerung über MENÜ-Button ohne JavaScript Im Folgenden wollen wir unsere bestehenden CSS-Anweisungen aus dem letzten Kapitel erweitern, damit die bisherige Steuerung als Dropdown- Menü angezeigt wird, wenn man den MENÜ-Button nutzt (auch auf dem Handy bzw. primär für das Handy und Tablet). Steuerung für Handy und Co Wichtig ist bei der Vorgehensweise, dass die CSS-Anweisungen nur erweitert werden! Warum wird klar, wenn die Aktionen zum Umschalten von beiden Designs aktiviert werden (was erst zum Schluss gemacht werden kann). Wir machen am Ende der CSS-Anweisungen nun den neuen Bereich auf und lassen den Menü-Button anzeigen: /* CSS erweitern um MENÜ-Button und entsprechende Steuerung */.menue-button { display: block; 42

43 Unsere 2 Links für das Toggle-Menü wieder einblenden Jetzt sitzt diese noch als Schrift gleich rechts neben unserem Logobereich. Also geben wir ihm die entsprechende Platzierung über position: absolute; und right:0; und top:0; mit. Weiterhin noch entsprechende Design-Anweisungen:.menue-button { background-color: darkblue; display: block; position: absolute; right: 0; top: 0; padding: 0.5em; color: white; cursor: pointer; text-decoration: none; Button für Toggle-Menü designen Wir sehen nun 2 Dinge: aus unseren 2 Links scheint einer geworden zu sein und praktischerweise Menü auf der letzte Punkt in der Steuerung Impressum ist überdeckt vom neuen Menü-Button 43

44 Das überdecken ist kein Problem, da wir eh wollen, dass die Menüpunkte unterhalb des Buttons MENÜ auf angezeigt werden. Also müssen diese nach unten wandern. Die einfachste Variante ist, dass der Bereich #bereichlogo die gesamte Breite beansprucht. Also geben wir ihm diesen: #bereichlogo { width: 100%; die Steuerungspunkte unterhalb vom MENÜ-Button Die einzelnen Menüpunkte sollen jeweils in einer Zeile auftauchen, damit dann gut auf dem Handy antippbar. Also erweitern wir die CSS-Anweisung damit, dass die einzelnen Listenpunkte eine Breite von 100% bekommen: #steuerung li { width: 100%; für jeden Steuerungspunkt eine Zeile 44

45 Fährt man nun mit der Maus darüber, sieht man durch das bereits zugewiesene CSS-Anweisung :hover, dass die Breite noch nicht passt. Sprich das Element, das die Steuerungspunkte umschließt, muss noch die gesamte Breite bekommen. #steuerung { float: left; width: 100%; Hier überschreiben wir die bisherige Anweisung für die #steuerung, die wir weiter oben auf float: right; gesetzt haben. Diese weiter oben wird aber so belassen, da dies für die klassische Steuerung wichtig ist. für jeden Steuerungspunkt eine Zeile und links ausgerichtet Gehen wir jetzt mit der Maus auf einen Steuerungspunkt, dann sehen wir, dass die gesamte Breite genutzt wird. Wir wollen noch zum Abgrenzen eine graue Linie darunter, sprich folgende CSS-Anweisung wird erweitert. #steuerung li { width: 100%; border-bottom: 2px solid silver; 45

46 zur Abgrenzung graue Trennlinie unter jeden Steuerungspunkt Und eigentlich sollen die einzelnen Steuerungspunkte erst angezeigt werden, wenn jemand auf dem MENÜ-Button klickt also müssen die Punkte erst einmal ausgeblendet werden. Die CSS-Anweisung für den Bereich #steuerung wird entsprechend erweitert: #steuerung { float: left; width: 100%; display: none; Steuerung ausblenden Damit man als Nutzer auch sieht, dass man etwas bei der Schaltfläche MENÜ auf machen kann, erweitern wir um die :hover-anweisung..menue-button:hover { color: black; 46

47 background: orange; MENÜ-Schaltfläche reagiert auf Mausberührung MENÜ-Button anklickbar Jetzt kommen wir zur eigentlich Magie. Über die CSS-Anweisung :target kommt nun die Magie der Aktion rein. Warum nicht :hover? Hover funktioniert auf Handy und Tablet nicht! Klickt, bzw. tippt der Besucher die Schaltfläche #nav-menue mit dem Finger an, soll der Bereich #steuerung aufklappen (sprich sichtbar werden). #nav-menue:target #steuerung { display: block; 47

48 MENÜ-Schaltfläche funktioniert die Steuerung klappt auf Jetzt fehlt uns noch, dass die Schaltfläche MENÜ auf verschwindet und MENÜ zu erscheint. #nav-menue:target.menue-button-beschr-open { display: none ; MENÜ-Schaltfläche funktioniert die Steuerung klappt auch wieder zu Und schon passt das Ganze. Im folgenden Kapitel automatisieren wir nun die Darstellung. Je nach Bildschirmgröße (besser Bildschirmbreite) wird die klassische Steuerung bzw. das Toggle-Menü angezeigt. 48

49 MENÜ-Button für responsives Design Die automatische Umschaltung des Designs bei kleineren Bildschirmabmessungen wird nun über die entsprechende MEDIA-Query integriert. Dadurch, dass wir unsere CSS-Anweisungen nur erweitert haben, können wir den entsprechenden Bereich einfach in die passende media-query packen und ab der gewünschten Breite umschalten zwischen den 2 entsprechenden Navigationsvarianten. /* Menü-Button oben rechts einblenden bei kleiner als 600px only screen and (max-width:600px) { klassische Steuerung bei genügend Platz Steuerung über Toggle-Menü bei wenige Platz/Handy 49

50 Dadurch, dass wir bei der media-query only eingeben, werden die Anweisungen nur von Browser geladen, die mit meda-queries umgehen können. Sprich wir haben für alte Versionen vom Internet-Explorer schon unser normales Fallback. Hier nun der komplette Code, damit sichtbar ist, wo was steht. Erweitert wurde es um ein bisschen Design für den Inhalt, sprich um Abstände bei section, h1 und p (siehe Quellcode). Um das Springen beim MENÜ-Button zu verhindern, kann auch anstelle MENÜ auf und MENÜ zu nur MENÜ geschrieben werden. Am besten mit dem so langsam üblichen Zeichen mit 4 Querstrichen. Jetzt kann noch an den Farben gedreht werden, damit diese harmonisch zusammenpassen und das ganze passt. Unter findet sich die Beispielseite bzw. hier der komplette Quellcode: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>toggle Menü ohne JavaScript (CSS:target)</title> <style> * { margin: 0; padding: 0; font-family: Arial, sans-serif; header { background-color: yellow; background-color: gray; width: 100%; float: left; border-bottom: 1px solid black; #bereichlogo { color: white; background-color: limegreen; display: block; padding: 0.5em; text-decoration: none; float: left; #bereichlogo { width: auto; #steuerung li { list-style: none; float: left; #steuerung a { display: block; height: 100%; width: 100%; 50

51 padding: 0.5em; text-decoration: none; color: white; background-color: gray;.menue-button { display: none; #steuerung { float: right; #steuerung a:hover { color: black; background: orange; /* CSS erweitern um MENÜ-Button und entsprechende Steuerung */ /* Menü-Button oben rechts einblenden bei kleiner als 600px only screen and (max-width:600px) {.menue-button { display: block;.menue-button { background-color: darkblue; display: block; position: absolute; right: 0; top: 0; padding: 0.5em; color: white; cursor: pointer; text-decoration: none; #bereichlogo { width: 100%; #steuerung { float: left; width: 100%; display: none; #steuerung li { width: 100%; border-bottom: 2px solid silver;.menue-button:hover { color: black; background: orange; /* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */ #nav-menue:target #steuerung { display: block; /* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */ #nav-menue:target.menue-button-beschr-open { display: none ; /* Allgemein Anweisungen */ section { padding: 0.5em; float: left; width: 100%; h1, p { margin: 0.5em 0 0 0; 51

52 </style> </head> <body> <header id="nav-menue"> <a href="#" id="bereichlogo">html-seminar.de</a> <nav id="steuerung" role="navigation"> <ul> <li><a href="#">startseite</a></li> <li><a href="#">html lernen</a></li> <li><a href="#">beispiele</a></li> <li><a href="#">kontakt</a></li> <li><a href="#">impressum</a></li> </ul> </nav> <a class="menue-button menue-button-beschr-close" href="#nav-menue-zu">menü zu</a> <a class="menue-button menue-button-beschr-open" href="#nav-menue">menü auf</a> </header> <section> <h1>toggle Menü ohne JavaScript (CSS:target)</h1> <h2>steuerung für mobile Geräte</h2> <p> Inhalt.</p> <p> Inhalt.</p> </section> </body> </html> 52