Frank L. Schad Responsive Webdesign mit CSS3 & LESS Art.-Nr. 126a047fc1ff Version 1.1.0 vom 15.4.2015 Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm 2015 by Webmasters Press www.webmasters-press.de Nordostpark 7, 90411 Nürnberg, Germany
Das vorliegende Fachbuch ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Fachbuch wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.
Informationen zu dieser Buchreihe Dieses Buch ist Teil unserer Buchreihe zum Zertifizierungsprogramm des Europäischen Webmasterverbandes, Webmasters Europe e.v. (WE). Das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm ist modular aufgebaut und bietet Abschlüsse und Zertifizierungen auf verschiedenen Ebenen an von der Experten- Zertifizierung für einzelne Themen bis hin zu Diploma-Abschlüssen für Webdesigner, Web- Entwickler, Webmaster und Online Marketing Manager. Nähere Informationen dazu finden Sie unter http://de.webmasters-europe.org/bildungsprogramm Unsere Buchreihe bietet Ihnen nicht nur eine fundierte und praxisnahe Einführung in das jeweilige Thema, sondern ist von Webmasters Europe e.v. offiziell autorisiert zur Vorbereitung auf die WE-Zertifikatsprüfungen. Damit haben Sie die Garantie, dass alle prüfungsrelevanten Themen behandelt werden.
Inhaltsverzeichnis Vorwort 11 1 Do it (much) better with LESS 13 1.1 1.2 1.3 Die Limitationen von CSS Was ist LESS? Wie funktioniert LESS? 13 14 15 2 Variablen 19 2.1 2.2 2.3 2.4 2.5 Variablen definieren Mehrere Werte für eine Variable Mit Variablen rechnen Variationen Fragen & Aufgaben zur Selbstkontrolle 19 20 22 23 24 3 Verschachtelte Selektoren 25 3.1 3.2 3.3 Verschachteln von kombinierten Selektoren Verschachteln von Pseudoklassen und Pseudoelementen Fragen & Aufgaben zur Selbstkontrolle 25 26 27 4 Mixins 28 4.1 4.2 4.3 4.3.1 4.3.2 4.4 Was sind Mixins? Zwei Varianten von Mixins Parametrische Mixins Standardwerte für Parameter Mehrere Parameter Fragen & Aufgaben zur Selbstkontrolle 28 29 31 32 33 34 5 Aufteilung in mehrere Dateien 35 5.1 5.2 Die @import-regel Syntax 35 36 6 Übung: Ein Layout mit LESS gestalten 38 6.1 6.2 6.3 6.3.1 6.3.2 6.3.3 6.4 6.5 6.6 Projektvorgaben Allgemeine Vorgaben Gestaltung des Headers Suchfeld Titel Hauptnavigation Positionierung des Inhalts und der Seitenleiste Gestaltung der Fußzeile Gemeinsame Formatierung der Inhalte 38 39 40 40 41 41 42 42 44
6.7 6.8 Gestaltung des Inhaltsbereichs Gestaltung der Seitenleiste 44 45 7 Grafische Effekte 46 7.1 7.1.1 7.1.2 7.1.3 7.2 7.2.1 7.2.2 7.3 7.3.1 7.3.2 7.4 Transformationen Unterschiede zu anderen Eigenschaften Den Transformationspunkt festlegen Verschiedene Transformationsarten ausprobieren Filter (Webkit) Unterschiede zu anderen Eigenschaften Weitere Filter ausprobieren Masken (Webkit) Bildmasken Clipping Fragen & Aufgaben zur Selbstkontrolle 46 47 48 49 49 50 51 51 52 53 54 8 Keyframe-Animationen 56 8.1 8.2 8.2.1 8.2.2 8.2.3 8.3 8.4 8.5 Das Grundprinzip von CSS-Animationen Animation definieren Die @keyframes-regel Keyframes definieren Auslagerung der Keyframes in ein Mixin Animation zuweisen Einzelbildanimationen Fragen & Aufgaben zur Selbstkontrolle 56 56 56 57 59 60 61 63 9 Grundlagen des Responsive Designs 65 9.1 9.2 9.3 9.4 Anpassung des Viewports Mobile Webseiten testen Fluid Content, Liquid Layouts und Flexible Images Fragen & Aufgaben zur Selbstkontrolle 65 67 68 69 10 Media Queries 70 10.1 10.2 10.3 10.4 Wann werden Media Queries benötigt? Medientypen und Media Queries Verwendung von Media Queries: Breakpoints Einbinden von Media Queries 70 70 73 75 Lösungen der Wissensfragen 81 Index 85
9.1 Anpassung des Viewports 65 Grundlagen des Responsive Designs 9 In dieser Lektion lernen Sie: die Unterschiede zwischen Desktop- und mobilen Browsern kennen. das Verhalten des Viewports anzupassen. was man unter Liquid Layouts und Flexible Images versteht. Eine essentielle Herausforderung im modernen Webdesign ist die Vielfalt an Geräten, die heutzutage zum Surfen im Web benutzt werden. Eine Website, die auf einem großen Desktop- Monitor gut aussieht, ist auf einem kleinen Smartphone-Display mit Touchscreen u. U. kaum benutzbar. Deshalb müssen moderne Weblayouts flexibel sein, sie müssen sich an die verschiedenen Bildschirmgrößen anpassen. Man spricht deshalb von anpassungsfähigen oder reaktionsfähigen Designs, auf englisch Responsive Designs. Das Prinzip dabei ist, dass jedes Gerät ob Desktop-PC oder Smartphone grundsätzlich die identischen Inhalte, also dieselben HTML-Dokumente, angezeigt bekommt. Lediglich die Darstellung der Inhalte passt sich dem jeweiligen Gerät an. Das bedeutet, dass Sie hier mehr denn je auf eine strikte Trennung zwischen Inhalt (HTML) und Design (CSS) achten müssen! Auch die Reaktionsfähigkeit selbst wird mit CSS realisiert. Dies geschieht mit Hilfe sogenannter Media Queries (»Medienabfragen«), mit deren Hilfe sie Layout-Alternativen für verschiedene Bildschirmgrößen definieren können. Neben dem Prinzip Responsive Design gib es natürlich noch andere Möglichkeiten, Webinhalte für mobile Geräte bereitzustellen: Zum einen die Gestaltung einer völlig unabhängigen Website, die auch unter einer anderen URL erreichbar ist (oftmals beginnend mit mobile oder einfach m anstelle von www), oder aber die Entwicklung nativer Apps für bestimmte Geräte. Responsive Design gehört hier jedoch zu den effizientesten (und kostengünstigsten) Varianten. Zuvor gilt es jedoch, ein Problem zu lösen, das die Grundvoraussetzung für Responsive Design ist: Das unterschiedliche Verhalten der Viewports von Desktop- und mobilen Browsern: 9.1 Anpassung des Viewports Der Viewport (auf deutsch etwa Ansichtsbereich, Sichtfenster) ist der Bereich innerhalb eines Browserfensters, der die eigentliche Website enthält (ohne Titelleiste, Adresszeile usw.). Dieser Viewport verhält sich auf Desktop- und mobilen Browsern unterschiedlich, wenn eine Website zu groß ist, um vollständig hineinzupassen: Auf Desktop-PCs werden einfach Scrollbalken erzeugt, in mobilen Browsern auf Touchscreens wird die Website stattdessen verkleinert, sodass möglichst viel davon zu sehen ist. Dies führt natürlich im Normalfall dazu, dass die
66 9 Grundlagen des Responsive Designs Texte kaum mehr lesbar sind: Der Benutzer muss Teile der Website mit den Fingern wieder heranzoomen. Auf ios und vielen anderen Geräten wird die Breite des Viewports standardmäßig auf exakt 980px skaliert, d. h. Websites werden so verkleinert, dass 980px davon in den Viewport passen (dieser Wert galt lange Zeit als durchschnittliche Standardbreite für Websites). Dieses Verhalten müssen wir deaktivieren. Die Grundvoraussetzung für Responsive Design ist, dass der Viewport immer die Originalgröße des jeweiligen Geräts hat, d. h. dass ein Pixel der Website einem Gerätepixel entspricht. Dies geschieht interessanterweise nicht mit CSS, sondern in HTML mit Hilfe eines Meta-Tags: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Das Schlüsselwort device-width sorgt dafür, dass der Viewport 1:1 an die jeweilige Breite des Geräts angepasst wird. initial-scale=1.0 stellt zusätzlich die anfängliche Skalierung der Seite auf 100%. Als dritter Wert neben width=device-width und initial-scale=1.0 wäre theoretisch auch noch user-scalable=no möglich. Damit könnten Sie das manuelle Zoomen mit zwei Fingern komplett deaktivieren. Dies ist aber in der Praxis selten sinnvoll, denn warum sollte man den Benutzern dieses Feature nehmen? (Diese Angabe ist eher für Apps gedacht, die die nativen Interface-Elemente des Geräts verwenden. Solche Oberflächen müssen in der Regel nicht gezoomt werden.) Dieser Meta-Tag wirkt sich nur auf Mobilgeräte (Smartphones und Tablets) aus. Auf Desktop-Browser hat er keinerlei Einfluss! Beispiel: Im Ordner viewport im Begleitmaterial zu diesem Buch finden Sie eine gleichnamige HTML- Datei, die nur ein Bild enthält. In den CSS-Vorgaben im head wurde lediglich sichergestellt, dass der body kein margin und kein padding hat, was die Darstellung beeinflussen könnte. Das Bild hat eine Breite von 320px. Dies entspricht exakt der Breite eines klassischen iphone- Displays im Hochformat. (Dies gilt auch für iphones mit Retina-Display. Diese Geräte arbeiten zwar mit einer wesentlich höheren Auflösung, jedoch werden Bilder auf die Standardauflösung interpoliert.) Das Bild müsste also eigentlich den gesamten Bildschirm eines iphones ausfüllen. Wie Sie jedoch in Abb. 9.1 links sehen, erscheint das Bild dennoch viel kleiner: Der Browser skaliert die Webseite wieder auf 980px. Mit dem Meta-Tag jedoch bekommen wir das gewünchte Ergebnis: Die Breite der Webseite entspricht der Breite des Displays (Abbildung rechts).
9.2 Mobile Webseiten testen 67 Abb. 9.1 Links die Webseite ohne, rechts mit Viewport-Meta-Tag. Diesen Meta-Tag müssen Sie von nun an im head jeder Ihrer HTML-Dateien notieren! 9.2 Mobile Webseiten testen Das oben gezeigte Beispiel können Sie auch live testen. Sie benötigen dafür allerdings zwei Dinge: Eine Webserver-Software wie z. B. den in Mac-Systemen enthaltenen Apache-Webserver oder alternativ XAMPP 5 (Mac, Windows, Linux) bzw. MAMP 6 (Mac). Ein Smartphone/Tablet oder den ios-simulator für Mac (Bestandteil von Xcode, kostenlos erhältlich im App Store). Auf neueren Mac-Systemen hat Apple die Systemeinstellung zum Starten des Apache- Webservers entfernt. Diese kann jedoch nachinstalliert werden unter clickontyler.com/ web-sharing/. Kopieren Sie dann den Ordner viewport ins Stammverzeichnis des Webservers auf Ihrem Computer und starten Sie den Server. Rufen Sie nun die lokale Adresse im Browser Ihres Smartphones/Tablets (das Gerät muss sich im selben lokalen WLAN-Netzwerk wie der Computer befinden) oder des ios-simulators auf. 5. http://www.apachefriends.org 6. http://www.mamp.info
68 9 Grundlagen des Responsive Designs Wenn Sie den ios-simulator verwenden, taucht die dort gerade angezeigte Webseite auch im Entwickler-Menü der Desktop-Vesion von Safari auf, sodass Sie sie mit dem WebInspector untersuchen können. Für die weiteren Übungen in diesem Buch ist dieses Setup jedoch nicht erforderlich. Sie können die Übungen direkt im Desktop-Browser testen. In der Praxis ist jedoch früher oder später ein Test auf möglichst vielen verschiedenen Geräten unerlässlich. 9.3 Fluid Content, Liquid Layouts und Flexible Images Ich hatte eingangs bereits erwähnt, dass moderne Websites flexibel sein müssen. Das Besondere daran ist, dass HTML-Seiten ohne CSS-Vorgaben dies bereits von Haus aus sind! Bei einer Veränderung der Fenstergröße umbricht sämtlicher Text einer HTML-Seite neu, sodass er auf den meisten Bildschirmen immer gut lesbar bleibt. Lediglich die Bilder behalten ihre Originalgröße. Erst mit CSS wurden Weblayouts in der Vergangenheit statisch. Designer haben angefangen, mit festen Breiten in Pixeln zu arbeiten. Dies hat zwar die Gestaltung und exakte Platzierung der Layoutelemente enorm erleichtert, ist aber dem Umstand geschuldet, dass die meisten Designer ihre Wurzeln im Print-Design haben und bewusst oder unbewusst dieses Prinzip auch auf Websites übertragen haben: Alles brauchte seinen festen Platz! Erst in jüngerer Zeit, mit der Verbreitung winziger Smartphone-Displays, hat man eingesehen, dass dies der falsche Weg war. Websites sind keine Print-Dokumente und folgen ganz anderen Regeln. Die Aufgabe ist deshalb, bei der Gestaltung von Websites mit CSS die Flexibilität von HTMLSeiten beizubehalten und sogar noch zu optimieren. Die Schlagworte sind hier Liquid Layouts und Flexible Images (»flüssige Layouts, flexible Bilder«). Und das Beste daran: Das haben wir bereits die ganze Zeit über getan! Wir haben für die Breitenangaben sowohl für den body und einzelne Textspalten als auch für die Bilder Prozentwerte benutzt. Dadurch skalieren diese Elemente bei einer Änderung der Fenstergröße bereits mit und passen sich auch an kleinere Bildschirme an. Mit zusätzlichen Angaben von min-width und max-width haben wir die Breite auf einen bestimmten Toleranzbereich eingeschränkt.
9.4 Fragen & Aufgaben zur Selbstkontrolle 69 Für Schriftgrößen und Höhenangaben haben wir die Maßeinheiten em oder rem verwendet. Dadurch passen sich diese Größen an die Standardschriftgröße des Browsers an und skalieren bei einer Änderung der Schriftgröße ebenfalls mit. Diese Vorarbeiten sind für ein Responsive Design bereits die halbe Miete! Nur dort, wo Sie damit nicht weiterkommen, benötigen Sie tiefergreifende Layoutänderungen mit Media Queries. 9.4 Fragen & Aufgaben zur Selbstkontrolle Wie unterscheiden sich die Viewports von Desktop- und mobilen Browsern?
70 10 Media Queries 10 Media Queries In dieser Lektion lernen Sie: mit Media Queries alternative Layouts für verschiedene Bildschirm- und Viewport-Größen zu definieren. 10.1 Wann werden Media Queries benötigt? Eingangs wurde bereits erwähnt, dass Weblayouts, die auf Desktop-Monitoren gut aussehen, für Smartphones häufig nicht geeignet sind. Dies kann unterschiedliche Gründe haben, die»üblichen Verdächtigen«hierfür sind jedoch Elemente, die nebeneinander angeordnet sind, wie z. B. horizontale Menüleisten oder mehrspaltige Layouts. Auf Smartphones vor allem im Hochformat werden Elemente sinnvollerweise eher untereinander angeordnet. In solchen Fällen kommen wir mit Breitenangaben in Prozent nicht mehr weiter hier benötigen wir umfassendere Layoutanpassungen. Dafür stehen in CSS die Media Queries (Medienabfragen) zur Verfügung. Damit können Sie für verschiedene Bildschirm- bzw. Viewport-Größen unterschiedliche Layouts definieren. 10.2 Medientypen und Media Queries Sie kennen bereits die Medientypen, die Sie beim Einbinden von CSS im head Ihrer HTML- Dateien angeben können, z. B. <link href="styles.css" rel="stylesheet" type="text/css" media="screen" /> Damit können Sie angeben, dass die eingebundene CSS-Datei nur für die Bildschirmdarstellung gilt (im Gegensatz etwa zum Druck, media="print"). Dieselbe Angabe ist alternativ dazu auch mit CSS möglich: @media screen { /* Vorgaben */ } Innerhalb der geschweiften Klammern stehen dann die Selektoren und Eigenschaften, die nur für die Bildschirmdarstellung gelten, z.b. @media screen { body { background-color: black; } /* Weitere Vorgaben */ } Dabei bezieht sich jedoch die Angabe screen egal ob in HTML oder CSS notiert auf alle Arten von Bildschirmen, sowohl auf Desktop-Monitore als auch auf Smartphone-Displays.
10.2 Medientypen und Media Queries 71 (Die Angabe media="handheld" bezog sich nur auf klassische Mobiltelefone u. dgl. meist noch mit monochromen Bildschirmen und ist heute veraltet. Smartphones und Tablets hingegen gelten ebenfalls als Computerbildschirme screen.) Deshalb wurden in CSS 3 zusätzliche Unterscheidungsmöglichkeiten, u. a. anhand der Bildschirmgröße, eingeführt, die Media Queries. Auch diese können Sie entweder in HTML oder in CSS notieren, z.b. HTML: <link href="styles.css" rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px)" /> CSS: @media screen and (max-device-width: 1024px) { /* Vorgaben */ } Hier wird der Medientyp screen mit bestimmten Merkmalen (sogenannten Media Features, hier die Maximalbreite) verknüpft. Die im Beispiel angegebenen CSS-Vorgaben gelten also nur für Bildschirme mit einer Maximalbreite von 1024px (z. B. ipad), nicht aber für größere Monitore. Bisweilen sieht man hier noch den Zusatz only: @media only screen and (max-device-width: 1024px) Das Schlüsselwort only dient lediglich dazu, die Angaben vor älteren Browsern zu verbergen. Es ist heute kaum mehr notwendig. HTML oder CSS? Der Unterschied, ob Sie die Media Queries in die Verknüpfung im head Ihrer HTML-Datei oder in die CSS-Datei notieren, liegt auf der Hand: Im ersten Fall gelten die Vorgaben der gesamten verknüpften CSS-Datei nur für eine bestimmte Bildschirmgröße. Sie bräuchten dann für jede Bildschirmgröße eine separate CSS-Datei. Im zweiten Fall können Sie in einer einzigen CSS-Datei in beliebig vielen @media-blöcken unterschiedliche Vorgaben für verschiedene Bildchirmgrößen machen. Da in diesem Fall nur ein CSS-Dokument geladen werden muss, werden auch die HTTP-Requests verringert und dadurch die Ladezeiten beschleunigt. Ich empfehle Ihnen deshalb folgende Vorgehensweise: Notieren Sie die einfachen Medientypen weiterhin in die HTML-Verknüpfung, z.b. <link href="screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="print.css" rel="stylesheet" type="text/css" media="print" /> In die screen.css kommen dann die alternativen Vorgaben für verschiedene Bildschirmgrößen. 7 Dort ist die Angabe screen nun nicht mehr notwendig und kann weggelassen werden. Bleibt noch folgende Syntax:
72 10 Media Queries @media (max-device-width: 1024px) { /* Vorgaben */ } @media (max-device-width: 800px) { /* Vorgaben */ } Bildschirmgröße und Viewportgröße Mit dieser Syntax haben Sie nun die Möglichkeit, in einer einzigen CSS-Datei für jedes beliebige Element Ihrer Website beliebig viele Layout- und Designvarianten zu definieren. Dabei haben Sie die Wahl, ob Sie dafür die Bildschirmgröße oder die Viewport-Größe zugrundelegen. Folgende Größenangaben stehen u. a. zur Verfügung (die Pixelwerte sind natürlich nur Beispielwerte): Größenangaben für den Viewport Größenangaben für den Bildschirm @media (width: 1024px) @media (min-width: 1024px) @media (max-width: 1024px) @media (device-width: 1024px) @media (min-device-width: 1024px) @media (max-device-width: 1024px) @media (height: 768px) @media (min-height: 768px) @media (max-height: 768px) @media (device-height: 768px) @media (min-device-height: 768px) @media (max-device-height: 768px) Bildschirmgröße device Die device-varianten beziehen sich auf die Bildschirmgröße des jeweiligen Geräts (Computermonitor, Smartphone-Display etc.), unabhängig von der tatsächlichen Fenstergröße des Browsers. Dadurch haben diese Varianten jedoch zwei gravierende Nachteile: Sie können nicht direkt am Arbeitsrechner getestet werden. Sie unterscheiden nicht zwischen Hoch- und Querformat eines Mobilgerätes, d. h. wenn Sie ein Mobiltelefon hochkant halten, ist die max-device-width trotzdem die Breite des Querformats. Für letzteres Problem gäbe es folgende Lösung: @media (max-device-width: 1024px) and (orientation: portrait) { /* Vorgaben */ } @media (max-device-width: 1024px) and (orientation: landscape) { /* Vorgaben */ } 7. Auch wenn Sie Ihre CSS-Vorgaben in mehrere Dateien auslagern, werden diese, wenn Sie mit LESS arbeiten, dennoch wieder in eine Datei kompiliert.