0414 A03. Dr. Thomas Wecker Ove Kimms MMDE10K. Websites für Smartphones Anpassen und optimieren

Transkript

1 0414 A03 Dr. Thomas Wecker Ove Kimms MMDE10K Websites für Smartphones Anpassen und optimieren

2 Das Studienheft und seine Teile sind urheberrechtlich geschützt. Jede Nutzung in anderen als den gesetzlich zugelassenen Fällen ist nicht erlaubt und bedarf der vorherigen schriftlichen Zustimmung des Rechteinhabers. Dies gilt insbesondere für das öffentliche Zugänglichmachen via Internet, Vervielfältigungen und Weitergabe. Zulässig ist das Speichern (und Ausdrucken) des Studienheftes für persönliche Zwecke. In unseren Studienheften verweisen wir auf Seiten im Internet. Wir haben diese nach sorgfältigen Erwägungen ausgewählt. Auf Inhalt und Gestaltung haben wir jedoch keinen Einfluss. Wir distanzieren uns daher ausdrücklich von diesen Seiten, soweit darin rechtswidrige, insbesondere jugendgefährdende oder verfassungsfeindliche Inhalte zutage treten sollten.

3 Websites für Smartphones 0414 A03 Anpassen und optimieren Inhaltsübersicht 1 Einleitung Begriffe und Definitionen Zusammenfassung Webdesign für Smartphones Smartphones vs. PC Konsequenzen: Webdesign für kleine Bildschirme Grundlagen HTML Zusammenfassung Strategien für das mobile Web Rein mobile Websites Browserweichen ( Browser-Sniffing ) WURFL One Web Mobile First Responsive Webdesign Media Queries Umgang mit Bildern beim Responsive Webdesign Umgang mit Texten beim Responsive Webdesign Das Meta-Tag "viewport" Print und große Bildschirme ipad und Android-Tablets Serverseitiges Responsive Webdesign Zusammenfassung CSS-Layout Grundlage Standardlayout zweispaltig CSS: Wiederholung und Vertiefung Die Eigenschaft float Fest, elastisch oder flüssig Zusammenfassung A03

4 6 Praxisbeispiele Dreispaltig flüssig (Sidebar auf Smartphones ausgeblendet) Dreispaltig fest (Sidebar auf Smartphones am Seitenende) Stylesheets für Print Zusammenfassung Dreamweaver, Pakete und Frameworks Adobe Dreamweaver CS Pakete für mobile Websites App-Baukästen und Frameworks Zusammenfassung Tests und Emulatoren iphone-emulation Android-Emulation Opera Mobile Emulation Zusammenfassung Schlussbetrachtung Anhang Literaturverzeichnis Lösungen der Aufgaben zur Selbstüberprüfung Glossar Sachwortverzeichnis Einsendeaufgaben... 91

5 1 Einleitung Liebe Fernschülerin, lieber Fernschüler, der Markt für Smartphones und Tablet-PCs weist unglaubliche Wachstumszahlen auf, denn diese Geräte sind der größte Hype der letzten Jahre im IT-Bereich. Die Nutzerzahlen für das mobile Web steigen rasant. iphone und Android-Handys sind in der Lage, auf ihren brillianten, berührungsempfindlichen Minidisplays ( Touchscreens ) ganz normale Webseiten korrekt anzuzeigen, was auf den ersten Blick sehr beeindruckend ist. Mithilfe von Multitouch-Zoom können die Nutzer/- innen die entsprechenden Inhalte im Prinzip auch lesen. Trotzdem ist es auf die Dauer doch ziemlich anstrengend, immer wieder die Zoomstufe zu wechseln, oder den aktuellen Zoombereich zu verschieben, um die gewünschten Inhalte bequem ansehen zu können. Ein echtes Vergnügen ist das auf die Dauer jedenfalls nicht. Deshalb muss es das Ziel sein, Webseiten für die Displays von Smartphones zu optimieren, um so deren Usability zu steigern, um damit die Nutzer an das jeweilige Angebot zu binden, oder sogar neue Besucher zu gewinnen. Gleichzeitig sollen die Websites aber selbstverständlich auch weiterhin auf normalen PC-Monitoren mit ihrer heute ja meist hohen Breitbildauflösung ein attraktives Layout bieten. Darüber hinaus wünschen sich viele Nutzer/-innen auch, dass sich Webseiten gut ausdrucken lassen, ohne dass ihr Drucker dabei wichtige Inhalte abschneidet, oder unzählige überflüssige, halbleere Seiten produziert. Ich möchte Ihnen in diesem Studienheft zeigen, wie sich alle diese Anforderungen mithilfe von Cascading Stylesheets (CSS) realisieren lassen. Bereits vorhandenes Grundwissen im Bereich HTML und CSS ist für die Bearbeitung des Studienheftes Grundvoraussetzung. Wenn Sie sich doch noch unsicher fühlen sollten, oder während der Bearbeitung dieses Studienhefts auf Begriffe stoßen, die Ihnen unbekannt erscheinen, empfehle ich Ihnen, immer wieder einmal im bewährten Online-Kompendium SELFHTML ( nachzuschlagen. Ich bin sicher, Sie werden dort schnell eine Erklärung für den gesuchten Begriff finden. Ich hoffe jedenfalls, es wird Ihnen Spaß machen, sich mit diesem hochaktuellen Thema zu beschäftigen. Dr. Thomas Wecker 5

6 2 Begriffe und Definitionen Lernziel: In diesem kurzen Kapitel möchte ich Ihnen zunächst einige wichtige Begriffe erklären. Dadurch kann ich Ihnen präziser erklären, auf welche Themen wir uns in diesem Studienheft konzentrieren und welche Techniken Sie bei Bedarf mithilfe weiterführender Literatur aus dem Internet im Selbststudium erlernen können. Smartphones nutzen das Mobilfunknetz (UMTS) für den Internetzugang, können aber wie die Tablet-PCs auch mithilfe eines WLAN online gehen. In Deutschland stehen die zweite (2G) und dritte Generation (3G) der Mobilfunknetze zur Verfügung: Das G steht dabei für Global System for Mobile Communications (GSM). Der wichtigste 3G-Standard ist das Universal Mobile Telecommunications System (UMTS). Ist ein Internetzugang hergestellt, steht auf iphone und ipad dem User standardmäßig der bekannte Safari-Browser zur Verfügung (auf Android-Geräten Google s Chrome-Browser), mit dem ganz normale Webseiten angesehen werden können. Auf den Android-Geräten ist das die mobile Variante von Google Chrome. Sowohl Safari als auch Chrome basieren auf der freien HTML-Rendering-Bibliothek Webkit. In diesem Studienheft werden wir uns auf die Betrachtung von iphone und Smartphones mit dem Android-Betriebssystem von Google beschränken. Damit decken wir den größten Anteil aller Smartphones ab, die sich heute (2011) auf dem Markt befinden. Die Darstellung von Browseranzeigen (Screenshots) basiert immer auf den Webkit-basierten Standardbrowsern dieser Geräte, obwohl natürlich von den Nutzer/-innen auch andere Browser, wie die mobilen Versionen von Opera oder Firefox installiert werden können. Obwohl das Layout dieser Seiten für normale PC-Monitore (ich nenne sie in diesem Studienheft einfach Standard- oder DesktopMonitore) entworfen wurde, können sie dank des Multitouch-Zooms (das ist die mit zwei Fingern gesteuerte Zoomfunktion auf Touchscreens) selbst auf den kleinen Bildschirmen der Smartphones recht bequem gelesen werden. Abb. 1: Multitouch-Zoom, von links: pinch, zoom out, zoom in (Quelle: Wikimedia) Definition: Webseiten, die für mobile Geräte optimiert sind Es ist allerdings auch möglich, mithilfe spezieller Stylesheets bestimmte Inhalte einer Webseite auszublenden, wenn diese auf einem Smartphone angezeigt werden. Dazu kann man als Webdesigner ein spezielles Stylesheet für genau diesen Medien- bzw. Gerätetyp erstellen. Dieses wird zusammen mit dem HTML-Code vom Server geliefert und automatisch vom Browser des Smartphones verwendet. In diesem Stylesheet wird durch entsprechende CSS-Regeln gezielt die Anzeige solcher Inhalte unterdrückt, die auf einem kleinen Smartphone-Screen nicht unbedingt erforderlich sind und trotz cleverer Zoomfunktion die Lesbarkeit der ganzen 6

7 Seite erschweren. Dazu gehören z. B. Sidebars, die oft Zusatzinformationen enthalten, besonders große Fotos, aber auch nicht unbedingt erforderliche Navigationselemente und bestimmte Werbebanner. Bei Letzteren handelt es sich ja meistens um Flash-Animationen und Flash-Filme und diese können zumindest auf iphone und ipad sowieso nicht angezeigt werden: Apple und Adobe konnten sich nicht über die Entwicklung eines Flash-Players für diese Geräte einigen. Mit Hilfe der speziellen CSS-Regeln für Smartphones lassen sich aber auch umgekehrt Inhalte in Smartphone-Browsern anzeigen, die auf den normalen Webseiten im Standard-Monitor nicht sichtbar sind. Definition: Webseiten, die für mobile Geräte optimiert sind, werden mithilfe spezieller Stylesheets an die Anforderungen von Smartphones angepasst können aber ebenso auch auf normalen PC-Monitoren betrachtet werden. Die unzähligen Apps (Applications) üben eine besondere Anziehungskraft auf die Benutzer von Smartphones und Tablet-PCs aus. Selbst wenn Sie bisher noch nicht selbst ein derartiges Gerät besitzen, haben Sie sicher schon oft die kleinen Icons auf den Touchscreens gesehen, mit denen die Apps gestartet werden können. Viele bekannte Medien (Stern, Spiegel, Focus, n-tv, N24, Tagesschau), aber auch unzählige andere Unternehmen (ADAC, DB, Lufthansa) und selbstverständlich alle sozialen Netzwerke (Facebook, Xing, Twitter) bieten bereits ihre eigenen, in der Regel kostenlosen Apps zum Download für die am meisten verbreiteten Smartphones (iphone und Android) an. Im Gegensatz zum normalen Web-Content, der mithilfe eines Browsers betrachtet wird, werden über diese Apps speziell für das jeweilige Endgerät aufbereitete Inhalte angeboten. Die Erstellung solcher Apps gehört normalerweise nicht zum Aufgabenbereich von Webdesignern, denn es handelt sich hier um echte Software-Programmierung. Apps sind auch nicht plattformunabhängig, d. h., sie müssen speziell für die jeweilige Hardware (iphone, Nokia, Android-Handys wie Samsung oder HTC etc.) programmiert werden. Man spricht deshalb auch von nativen Apps. Für die Erstellung von Apps benötigt man die Entwicklungsumgebung Software Development Kit (SDK) für die entsprechende Hardware. Definition: Native Apps müssen speziell für die jeweilige Hardware eines bestimmten Smartphones programmiert werden. Definition: Native Apps In diesem Studienheft beschränke ich mich ausschließlich auf die Behandlung von mobilen Websites. Es gibt allerdings inzwischen auch schon Wege, mithilfe der etablierten Internettechnologien (HTML, CSS, PHP, usw.) derartige Apps zu erstellen. Im Schlusswort werde ich Ihnen dazu einen kurzen Ausblick geben. 2.1 Zusammenfassung Smartphones benutzen das Mobilfunknetz der zweiten und dritten Generation, sowie WLANs, um online zu gehen. iphone und Android-Handys verwenden Browser, die auf der Webkit-Bibliothek basieren. Moderne Smartphones sind in der Lage, Webseiten, die für normale Standard-Monitore entworfen wurden, korrekt darzustellen. Ein Multitouch-Zoom macht die Inhalte zugänglich. 7

8 Mithilfe spezieller Stylesheets können Webseiten für die Darstellung auf Smartphone-Displays optimiert werden. Native Apps müssen mithilfe der entsprechenden Entwicklungsumgebung (SDK) speziell für das jeweilige Endgerät programmiert werden. 8

9 3 Webdesign für Smartphones Lernziel: In diesem Kapitel werde ich Ihnen zunächst deutlich machen, welche grundlegenden Unterschiede bei der Anzeige von Webseiten zwischen einem Smartphone oder Tablet-PCs (in der Folge nur noch als Tablets bezeichnet) gegenüber einem Standard-Monitor bestehen. Daraus lassen sich die Konsequenzen ableiten, die man beim Webdesign für diese Geräte beachten muss. Wir werfen einen kurzen Blick auf HTML 5 um zu verstehen, warum dieser zukünftige Standard (und jetzige Quasi -Standard, denn die meisten namhaften Websites sind bereits in HTML 5 implementiert) für mobiles Webdesign besonders geeignet ist. Wir klären die Bedeutung des Begriffs Viewport und wenden uns schließlich dem zentralen Thema zu: Wie kann man mithilfe von Media Queries gezielt Stylesheets für Smartphones anwenden? Zuletzt befassen wir uns noch mit weiteren speziellen Ausgabemedien wie Ausdrucke, Breitbildmonitore, sowie das ipad und Android-Tablets. Wie ich in der Einleitung bereits erklärt habe, sind moderne Smartphones durchaus in der Lage, normale Webseiten, d. h. echtes Internet, korrekt anzuzeigen. Die Usability von Websites wird jedoch erheblich gesteigert, wenn deren Seiten für die Darstellung auf kleinen Displays optimiert werden. 3.1 Smartphones vs. PC Es lohnt sich, zunächst einmal die Unterschiede zwischen der Darstellung von Webseiten auf Smartphones und auf Standard-Monitoren zu analysieren. Ich habe die wichtigsten Punkte in der folgenden Tabelle zusammengefasst: Smartphone Browserfenster hat feste Abmessungen, die der Breite/Höhe des Gerätemonitors entsprechen Kleine Bildschirme Geringe absolute Auflösung, aber zum Teil sehr hohe Pixeldichte (bis 326 ppi beim Retinabildschirm des iphone 4) Bedienung mit Fingern (Gesten). Finger- Druckpunkt größer als Mauscursor Auch Formularelemente sind anklickbar Internetzugang über UMTS (2G/3G) oder WLAN, also nicht immer optimale Bandbreite Panning, Zooming, Doppeltip-Zoom Standardmonitor Browserfenster, das von den Nutzer/-innen in seiner Größe verändert werden kann Große Abmessungen (>20 Monitor-Diagonale) Hohe absolute Auflösung (>1024x768 bei 4:3 Normalformat und >1600x900 bei 16:9 Breitbildformat); Pixeldichte zwischen 92 und 110 ppi Bedienung per Maus (oder Tastatur, z. B. Tab- oder Enter-Taste bei Formularen) Klick nur bei Links Interzugang praktisch immer über schnelle Verbindung (DSL) Vertikale und horizontale Scroll-Leisten 9

10 Smartphone Virtueller Layout Viewport Orientierung Portrait/Landscape [Hochformat/Querformat] Standardmonitor Viewport wird durch das Browserfenster definiert Orientierung im allgemeinen Landscape (es sei denn, ein User stellt sein Browserfenster auf ein Pseudo-Portait-Format ) 3.2 Konsequenzen: Webdesign für kleine Bildschirme Aus diesen Besonderheiten lassen sich folgende Konsequenzen ableiten, die man beim Webdesign für kleine Bildschirme beachten muss. Das fängt bereits mit den Grundlagen an. Die folgenden Punkte sollten heute auch bei konventionellem Webdesign selbstverständlich sein beim mobilen Web sind sie unverzichtbar: Eine Trennung von Struktur und Gestaltung, d. h. konsequentes CSS-Layout ohne Tabellen oder Frames, sowie ein semantisch strukturierter und validierter HTML- Code. Kriterien zur Optimierung für mobile Geräte Darüber hinaus führt die Beachtung der besonderen Umstände bei der Darstellung von Webseiten auf Minidisplays (s. vorherige Tabelle) zu weiteren Konsequenzen: Das Layout muss linearisiert werden, d. h. statt mehrerer Spalten nur noch eine. Unwichtige Seitenelemente sollten ausgeblendet oder am Seitenende platziert werden. Einsparung von Pixeln durch Reduktion von Außen- und Innenabständen (margin und padding). Stark komprimierte Grafiken mit sinnvollen Abmessungen. Kein Skalieren via width/height. Text-Links oder CSS-Buttons statt grafischer Buttons. Verbesserung der Lesbarkeit durch größere Schriften. Verwendung kurzer URLs bei Links. Wenn die Navigation sehr umfangreich ist, sollte sie am Seitenende platziert werden, damit User schnell den eigentlichen Content lesen können. Vergrößerung der klickbaren Fläche bei wichtigen Buttons und Links. Verzicht auf große Hintergrundbilder (um Bandbreite zu sparen). Mouseover-Effekte (Pseudoklasse hover) sind nicht darstellbar, stattdessen Einsatz der Pseudoklasse active. Falls möglich Bevorzugung relativer Maße (em oder %) gegenüber absoluten Maßen (Pixel, Punkt oder Zoll). 10

11 Kein Java (und kein Flash bei iphone/ipad). Telefon- und Maillinks nutzen. Bei Formularen kontextual Keyboards berücksichtigen. Damit haben wir nun eine erste Vorstellung davon, was wir bei der Optimierung von Websites für das mobile Web beachten müssen. In den folgenden Kapiteln werde ich Ihnen die Details dazu erklären und vor allem, wie man das umsetzen kann. Dazu müssen wir uns als Erstes mit dem neuen Quasi-Standard HTML 5 befassen. 3.3 Grundlagen HTML 5 Obwohl HTML 5 noch gar nicht vom W3C als neuer Standard verabschiedet worden ist, erfreut es sich bereits größter Beliebtheit. Nachdem Google als einer der ersten Sitebetreiber HTML 5 eingesetzt hat, haben sich weltweit die Webentwickler schnell von den Vorteilen der neuen Version überzeugen lassen. Dazu wurden sie nicht zuletzt deshalb ermutigt, weil alle modernen Browser bereits die wichtigsten Sprachelemente von HTML 5 unterstützen. Die vollständige Grundstruktur eines HTML-5-Dokuments ist deutlich einfacher als die des bisherigen (und offiziell immer noch gültigen) Standards XHTML 1.0, wie die folgende Abbildung zeigt: Abb. 2: HTML-5-Grundstruktur Selbst, wenn man sonst noch keines der weiteren attraktiven Sprachelemente von HTML 5 verwendet (z. B. Unterstützung von Vektorgrafiken im SVG-Format, das canvas-element zum Generieren von Grafiken per JavaScript, oder neue Elemente wie nav oder section etc.), ist diese vereinfachte Grundstruktur ein großer Vorteil und trägt zu einem kompakten, bandbreitenschonenden Source-Code bei. Es ist leider nicht möglich, im Rahmen dieses Studienhefts eine umfassende Darstellung aller Eigenschaften von HTML 5 zu liefern. Ich muss deshalb an dieser Stelle auf die zahlreichen im Internet vorhandenen Tutorials zu diesem Thema verweisen (z. B. HTML 5-Code ist kompakt und ermöglicht einfache Audiound Videoeinbindung 11

12 Gerade für Seiten, die für das mobile Web optimiert werden sollen, erweist sich HTML 5 als äußerst vorteilhaft: Die Browser von iphone, ipad sowie einiger anderer Geräte unterstützen nicht das Flash-Plug-in. Webseiten mit multimedialen Flash-Anwendungen können demnach auf diesen Geräten nicht dargestellt werden. HTML 5 bietet mit seinen neuen Sprachelementen audio und video eine hervorragende Alternative für native Audio- und Videoeinbindung ohne Plugin. Diese Sprachelemente werden von den Smartphone-Browsern bereits unterstützt. Aufgrund der gegenüber XHTML vereinfachten Syntax erlaubt HTML 5 eine deutliche Verkürzung des Quellcodes. Die damit reduzierte Datenmenge führt zu einem schnelleren Seitenaufbau und zu einer verbesserten Performance, wenn die Geräte ihren Internetzugang über das Mobilfunknetz herstellen. Mit HTML 5 lassen sich auch Offlineanwendungen realisieren. Damit funktioniert eine Website auch dann noch, wenn wegen eines Funklochs oder schlechter Verbindung die Onlineverbindung von Smartphones abreißt. Selbst, wenn Sie keines der neuen Features von HTML 5 einsetzen, führt allein die Möglichkeit, den Code zu verkürzen, zu einer deutlichen Performance-Verbesserung einer Webseite auf Smartphones und Tablets. 3.4 Zusammenfassung Neben der reinen Bildschirmgröße gibt es zahlreiche weitere Unterschiede zwischen der Darstellung und Nutzung von Webseiten auf Desktop-Monitoren bzw. Smartphones. Daraus lassen sich die Konsequenzen ableiten, die beim Webdesign für Smartphones zu berücksichtigen sind. Konsequente Trennung von Struktur und Gestaltung sowie semantisch strukturierter und validierter HTML-Code sind wesentliche Grundvoraussetzungen. Der neue Quasi-Standard HTML 5 mit seinem kompakten Code und der einfachen Audio- und Videoeinbindung ist besonders für die Entwicklung mobiler Websites geeignet. 12

13 4 Strategien für das mobile Web Grundsätzlich kann man zwei unterschiedliche Strategien anwenden, um Websites für mobile Geräte zu optimieren: 1. Man entwickelt eine völlig eigenständige Website für diese Geräte. Mit Techniken zur Browsererkennung (Browserweiche, Browser-Sniffing ) werden Browser von mobilen Geräten automatisch zu dieser speziellen Site umgelenkt. 2. Es wird nur eine einzige Version einer Website erstellt ( One Web ), bei der sich jedoch das Webdesign automatisch an unterschiedliche Bildschirmformate anpasst ( Responsive Webdesign ). Es gibt auch Websitebetreiber (z. B. IKEA oder Wikipedia), die es den Usern selbst überlassen, ob sie die mobile, oder die Standardversion der Website ansehen möchten. 4.1 Rein mobile Websites Einige namhafte Anbieter (tageschau.de, stern.de) haben sich für diese Variante entschieden. Es ist inzwischen auch üblich, rein mobile Websites über die Subdomain m erreichbar zu machen (m.sueddeutsche.de). Aus Gründen, die ich später noch näher erläutern werde, bevorzuge ich Strategie 2, werde aber trotzdem in diesem Abschnitt die wichtigsten Techniken erklären, die man zur Realisierung rein mobiler Websites benötig Browserweichen ( Browser-Sniffing ) Mit Browserweichen (engl. browser sniffing ) bezeichnet man Techniken, mit deren Hilfe man die Unterschiede in der Darstellung von Webseiten in verschiedenen Webbrowsern umgehen kann. Dazu wird für unterschiedliche Browser unterschiedlicher Code angeboten. Browserweichen können serverseitig (durch Auslesen des User-Agent-Headers), oder clientseitig mit JavaScript realisiert werden. Die Browsererkennung gilt oft als nicht ganz zuverlässig, da Browser auch einen benutzerdefinierten User-Agent-Header übertragen können und JavaScript vom User deaktiviert werden kann. Betrachten wir hier kurz ein Beispiel für eine PHP-basierte Browserweiche: Die Funktion "get_browser()" liefert einen Array zurück, der alle Informationen über den Browser enthält. Folgender Code macht den ausgelieferten Inhalt davon abhängig, ob es sich um ein sogenanntes mobile device handelt: 13

14 Browser- Sniffing mit PHP oder JavaScript Abb. 3: Browser-Sniffing mit PHP Wie schon erwähnt, lässt sich auch mit JavaScript eine Browserweiche implementieren. Das kann z. B. durch Abfrage von Eigenschaften des Objekts useragent erfolgen, wie das folgende kleine Beispiel für das iphone zeigt: if(navigator.useragent.tolowercase().indexof('iphone') > -1) location.href = 'indexmobi.html'; Da in diesem Studienheft die Strategie rein mobiler Websites nicht im Vordergrund steht, möchte ich das Thema hier nicht weiter vertiefen. Bei Bedarf finden Sie im Web unzählige Anwendungsbeispiele WURFL Ich möchte der Vollständigkeit halber noch ganz kurz auf eine Technik eingehen, mit der sich Websites noch genauer an mobile Geräte anpassen lassen. Dazu benötigt man mehr Informationen über die jeweiligen Geräte, die man mit WURFL erhält. Umformulieren: WURFL steht für Wireless Universal Resource File und ist ein Open-Source-Projekt. Bei WURFL handelt es sich um eine frei verfügbare XML- Datei zum Herunterladen. Diese Datei enthält für über 400 Mobilgeräte Informationen zur Auflösung der Displays sowie zu den unterstützten Bildformaten. Darüber hinaus lassen sich über die XML-Datei Informationen zum Dateiformat der Klingeltöne bis hin zur Auflösung von Hintergrundbildern für das Display abfragen. Die bereitgestellten Informationen variieren von Modell zu Modell und geben teils eine sehr genaue Funktionsübersicht der Geräte wieder. Der folgende Code zeigt den Ausschnitt einer WURFL-XML-Datei: 14

15 Abb. 4: WURFL-Beispielcode Die XML-Datei lässt sich mit einer beliebigen Programmiersprache, beispielsweise mit PHP, auslesen. So lassen sich mobile Websites ganz konkret auf einzelne Geräte abstimmen. Vor allem, wenn man spezielle Dienste wie den Download von Klingeltönen oder Hintergrundbildern anbietet, kann WURFL helfen, dem Besucher der Website direkt das richtige Format anzubieten. 4.2 One Web Ich bin Ihnen noch eine Erklärung dafür schuldig, warum ich die Strategie 1, rein mobile Websites anzubieten, hier nicht weiter vertiefe, sondern mich in diesem Studienheft auf Strategie 2 konzentriere, nämlich die Erstellung von Websites, deren Webdesign sich automatisch an unterschiedliche Bildschirmformate anpasst: Die Erstellung, Pflege und Wartung einer eigenständigen, rein mobilen Variante einer Website ist mit einem sehr hohen Aufwand verbunden. Alle Inhalte müssen für die mobile Website parallel zur normalen Desktop-Website gepflegt werden. Moderne Content-Management-Systeme können bei dieser Aufgabe zwar große Unterstützung leisten. Ein Zusatzaufwand (und auch eine zusätzliche Fehlerquelle) bleiben aber immer bestehen. One Web statt rein mobile Websites Die Kritik an der zusätzlichen Bereitstellung rein mobiler Websites geht aber noch einen wesentlichen Schritt weiter: In der jüngeren Vergangenheit hat es meistens damit angefangen, dass Unternehmen eine spezielle iphone-website haben wollen. Als Nächstes vielleicht eine für das ipad. Und was ist mit den Android-Smartphones? Und den neuen Android-Tablets? Zwei von drei bedeutenden Spielkonsolen haben inzwischen auch schon Webbrowser. Wo soll das also alles hinführen? Ich denke, diese Aufzählung macht Ihnen deutlich, warum tatsächlich langfristig alles für die eine Strategie spricht, die inzwischen auch als One Web bezeichnet wird: Soweit es irgendwie sinnvoll und möglich ist, werden dieselbe Information und Anwendungen den Nutzern vollkommen unabhängig von ihrem aktuell genutzten Gerät angeboten. Das bedeutet allerdings keineswegs, dass diese Informationen und Dienste auf allen Geräten in gleicher Weise dargestellt werden. 15

16 4.2.1 Mobile First Mobile First: Von klein nach groß In diesem Zusammenhang möchte ich noch eine weitere Strategie erwähnen, die ganz aktuell in der Webdesigner-Szene diskutiert wird: Mobile First. In den meisten Fällen wurde bisher die Optimierung einer Website für das mobile Web erst dann vorgenommen, wenn die normale Desktop-Version fertig ist. Es werden drei Gründe angeführt, warum man das künftig genau umgekehrt machen sollte: 1. Das mobile Web explodiert. Der Absatz von Smartphones und Tablets weist ein gigantisches Wachstum auf und Notebooks gehen auch schon vermehrt per UMTS-Stick online. Der Zugriff auf das Internet wird in den nächsten Jahren sehr wahrscheinlich überwiegend von mobilen Geräten aus erfolgen. 2. Da die Bildschirme mobiler Geräte klein sind, wird man bei Mobile First gezwungen, sich bei Konzeption und Implementierung von Websites auf das Wesentliche zu konzentrieren. Viele Desktop-Websites zeichnen sich durch umständliche Umwege und überflüssigen Schnickschnack aus. 3. Mobile erweitert die Möglichkeiten von Webdesign: Das mobile Web bietet aufregende neue Optionen, die von Desktop-Browsern gar nicht umgesetzt werden können: Nutzung von Positionsinformationen per GPS, Multi-Touch Input durch eine oder mehrere gleichzeitige Gesten, Orientierungswechsel von Hoch-/Querformat (Portrait/Landscape) und weitere Anwendungen durch Beschleunigungsmessung. Ich wende in diesem Studienheft noch die traditionelle Methode an (sofern man bei einem insgesamt so jungen Gebiet von Tradition überhaupt sprechen kann) und zeige die Optimierung von Websites für das mobile Web ausgehend von der Desktop-Website. Es spricht aber sehr viel dafür, den Mobile First -Ansatz zu verfolgen, und erst nach Fertigstellung der mobilen Version die Desktop-Version zu implementieren. Wohlgemerkt nicht als eigenständige Website, sondern durch automatische Anpassung der dargestellten Inhalte an die größeren Bildschirme Responsive Webdesign Für diesen Ansatz hat sich in der Fachwelt der Begriff Responsive Webdesign eingebürgert. Damit meint man ein Webdesign, das auf die aktuelle Umgebung (nämlich die jeweilige Geräte-Hardware insbesondere deren Monitore) anspricht, bzw. darauf reagiert. Schon mit der Spezifikation CSS 2.1 wurde es möglich, für verschiedene Ausgabemedien unterschiedliche Stylesheets einzubinden. Auf diese Art könnte man im Prinzip auch ein Stylesheet für mobile Geräte referenzieren. Der folgende Beispielcode zeigt die Einbindung von Stylesheets für die Medientypen "screen" (normaler Bildschirm), "print" (Druckausgabe) und "handheld" (mobile Geräte): <link rel="stylesheet" href="screen.css" type="text/css" media="screen" > <link rel="stylesheet" href="print.css" type="text/css" media= print > 16

17 <link rel="stylesheet" href="handheld.css" type="text/css" media= handheld > Diese Methode ist recht schnell und ohne größeren Aufwand realisierbar. Die Inhalte der Website werden nur einmal angelegt und mithilfe separater CSS- Dateien unterschiedlich dargestellt. Der Pferdefuß: Moderne Smartphones ignorieren leider die Angabe media="handheld" und benutzen das Stylesheet für media="screen". Der Grund ist ganz einfach: Sie sind sich einfach zu schade für media="handheld" und halten sich mit Recht für etwas Besseres. Der Medientyp "handheld" unterstützt nicht die anspruchsvollen Inhalte, die heutige Smartphones problemlos darstellen können. Deshalb laden Smartphones wenn man sie nicht durch andere Angaben daran hindert zunächst das Stylesheet für media="screen". Schließlich können Sie ja auch problemlos die normalen Desktop-Websites anzeigen, solange Ihnen keine für das mobile Web optimierte Website angeboten wird. Abhilfe für das Problem schafft die im folgenden Abschnitt beschriebene Technik der Media Queries Media Queries Wie lässt sich nun das One Web mithilfe des Responsive Webdesigns technisch realisieren? Den Schlüssel dazu bilden die Media Queries, die als Teil der Spezifikation CSS 3.0 vom W3C eingeführt worden sind. Media Queries erlauben es nicht nur wie bisher die Medientypen, also bestimmte Geräteklassen gezielt anzusprechen, sondern die tatsächlichen physikalischen Eigenschaften des Zielgeräts abzufragen, das unsere Webseite aktuell anzeigen soll. Genauer gesagt: Die Maße des Gerätemonitors bzw. des zugrundeliegenden Viewports, wie das folgende Beispiel zeigt: Mit Media Queries zum Responsive Webdesign <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" > Die Abfrage ( Query ) umfasst zwei Bestandteile: den Medientyp screen, wie bisher, und die aktuelle Abfrage in Klammern: Auf das darin angegebene Merkmal (maxdevice-width) soll das Medium (genauer gesagt, dessen Bildschirm) in Bezug auf den anschließenden Sollwert (480px) überprüft werden Im Klartext fragen wir also: Beträgt die horizontale Auflösung vom Bildschirm des aktuellen Geräts 480 Pixel, oder weniger? Wird diese Abfrage positiv beantwortet (falls wir die Webseite also gerade auf einem kleinen Monitor wie dem des iphones oder eines Android-Smartphones betrachten), dann wird der Smartphone- Browser das Stylesheet mobile.css laden. Andernfalls wird diese Link-Zeile komplett ignoriert. Die Spezifikation der Media Queries stellt eine Vielzahl von Medienmerkmalen bereit, die weit über die reine Abfrage von Auflösungswerten hinausgeht. Darüber hinaus lassen sich auch mehrere Merkmale in einer einzigen Abfrage kombinieren, in dem diese mit dem Schlüsselwort and verkettet werden. Das folgende Beispiel zeigt eine kombinierte Abfrage nach der absoluten horizontalen Auflösung (480px) und der relativen Auflösung (Pixeldichte, 163dpi): 17

18 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="mobile.css" > In den bisherigen Beispielen waren die CSS-Regeln für bestimmte Medien in einem separaten Stylesheet untergebracht. Man kann diese aber auch in einem einzigen, zentralen Stylesheet mithilfe des neuen screen and (max-device-width: 480px) { column { float: none; } } Steht dieser Teil ganz am Ende nach den übrigen CSS-Regeln für die normale Website, wird sein Inhalt nach den Gesetzen der Kaskade die Inhalte eventuell zuvor anders deklarierter Regeln überschreiben. Der Effekt ist in diesem Fall also genau derselbe, wie in dem zuvor gezeigten Beispiel mit der Link-Zeile: Besteht das aktuelle Gerät den durch Media Queries definierten Test, werden die zugehörigen CSS-Regeln auf das entsprechende HTML-Markup angewandt. Bei den Praxisbeispielen, später in diesem Studienheft, werden wir eine der Layout-Varianten mit dieser Implementierung der Media Queries realisieren. Der Vorteil liegt in der Performance: Während bei mehreren separaten Stylesheets auch mehrere http-requests an den Server erfolgen, muss in diesem Fall nur ein einziges Stylesheet angefordert werden. Der Nachteil kann unter Umständen in einem sehr großen Stylesheet mit einer unübersichtlichen Menge von CSS-Code liegen Umgang mit Bildern beim Responsive Webdesign Fluid Images: Bilder passen sich an Eine einschränkende Anmerkung möchte ich hier noch machen: Auch mit Media Queries können nicht alle Inhalte perfekt an mobile Geräte angepasst werden: So lassen sich Bilder zwar per CSS kleiner darstellen. Allerdings wird nach wie vor das Bild in Originalgröße geladen. Die derzeit häufig angewandte Methode zum optimalen Umgang mit Bildern im mobilen Web wird als Fluid Images bezeichnet. Dabei wird mithilfe einer Klasse bei allen Bildern die Eigenschaft maxwidth auf 100% (bezogen auf die Originalbreite des geladenen Bildes) gesetzt: img { max-width: 100%; } Statt Bilder mit ihrer Originalbreite anzuzeigen, die dabei womöglich aus ihrem umhüllenden Container überlaufen, werden sie nur so lange mit ihrer Originalbreite angezeigt, wie diese die Breite des Containers nicht übersteigt. Andernfalls werden sie skaliert, wobei moderne Browser in der Lage sind, automatisch die Proportionen zu erhalten. 18

19 Es hat sich herausgestellt, dass diese Vorgehensweise auch bei den meisten eingebetteten Videos gut funktioniert: img, object { max-width: 100%; } Auf die Tatsache, dass ältere Versionen des Internet Explorers mit der Eigenschaft max-width nicht umgehen können und welche lästigen Umwege man in diesem Fall gehen muss, möchte ich hier nicht weiter eingehen. Bei Bedarf finden Sie im Internet die entsprechenden Workarounds. Sie haben gesehen, dass Fluid Images die Möglichkeit bieten, ein Bild beim Responsive Webdesign so darzustellen, dass es auf den Displays der jeweiligen Endgeräte in der richtigen Größe gezeigt werden. Dazu muss aber in jedem Fall das Bild in derjenigen Auflösung vom Server geladen werden, welche für das Display mit der maximalen Auflösung benötigt wird. Möchte man also auch ein Macbook Pro in 15 Zoll mit seinen 2880 x 1800 Pixeln (bei 220 ppi) optimal bedienen, muss das dafür geeignete Bild auch dann heruntergeladen werden, wenn es nur auf einem iphone 5 mit seinen lediglich 1136 x 640 Pixeln (bei 326 ppi) angezeigt werden soll. Es wird dann, wie Sie gesehen haben, nach dem Fluid Images-Prinzip mithilfe der CSS-Regel max-width: 100 %; auf das iphone-display skaliert. Wie die Beispiele eben zeigen, geht es aber nicht mehr nur um die Auflösung in absoluten Pixelmaßen, sondern auch um die relative Auflösung oder Pixeldichte in ppi. Seit der ersten Ausgabe dieses Studienhefts sind zahlreiche neue Mobilgeräte mit hoher Pixeldichte auf den Markt gekommen. Für diese hat sich inzwischen der Begriff HiDPI-Displays eingebürgert (hier wird die eigentlich unzutreffende Maßeinheit DPI statt PPI für Displays benutzt, s. u.). Websites mit Bildern, die nur für die 96 ppi eines typischen Desktop-Displays optimiert wurden, sehen auf HiDPI-Displays unscharf aus, weil die fehlenden Pixel interpoliert werden. Um die volle Schärfe der modernen mobilen Geräte mit so hoher Pixeldichte ausnutzen zu können, müssen wir die Media Queries weiter verfeinern, wie der folgende Abschnitt zeigen wird. Wie Sie gesehen haben, wird bei den Media Queries meistens eine Abfrage nach Merkmalen vorgenommen, deren Wert in Pixeln gemessen wird (width, device-width, max-device-width, usw.). Spätestens seitdem das iphone 4 auf den Markt gekommen ist, wurde es notwendig, zwischen CSS-Pixeln und Geräte-Pixeln ( Device Pixel) zu unterscheiden: Das Retina Display des iphone 4 verdoppelt nämlich die Pixeldichte. Diese wird oft fälschlich in dpi (Dots per Inch) angegeben, obwohl es auf Monitoren keine Punkte gibt (die gibt es nur beim Drucken), sondern bekanntlich quadratische Pixel. Deshalb sollte man besser mit der Einheit ppi (Pixel per Inch) arbeiten, aber selbst in vielen Fachbeiträgen wird mit dpi argumentiert. Bei allen Bildern wird auf dem iphone 4 also automatisch die Zahl der Pixel für die Darstellung verdoppelt. Dies führt zu der begrifflichen Spaltung von CSS- und Device-Pixeln: Bisher konnte man sich die Pixel, mit denen in einer CSS-Regel z. B. die Breite eines Containers angegeben wird, gleichzeitig als die Pixel auf dem Monitor vorstellen. Auf dem Retina Display wird nun jedes dieser CSS-Pixel durch einen quadratischen Bereich von 2x2 Gerätepixeln repräsentiert. Neue Herausforderung: Displays mit hoher Pixeldichte Welche Konsequenzen hat dieses Verhalten für mobil optimierte Webdesigns? Liefert man dem Retina Display dasselbe Bildmaterial wie den übrigen Smartphones (und natürlich den Desktop-Browsern), ergibt sich zunächst kein unmittelbarer Vorteil. Erst, wenn man höher aufgelöste Bilder in sein Webdesign einbindet, kön- 19

20 nen die Besitzer eines iphone 4 wirklich in den vollen Genuss dieser hohen Pixeldichte kommen. Die damit verbundenen höheren Ladezeiten müssen aber die Nutzer aller anderen Smartphones auch in Kauf nehmen und das ist keine akzeptable Lösung. Wie kann man also mithilfe von Media Queries Webdesign realisieren, das speziell für das hochauflösende Retina Display des iphone 4 optimiert ist? Das iphone 4 antwortet nämlich auf die oben erläuterte Abfrage nach der maximalen Breite seines Displays (max-device-width) weiterhin mit dem Wert 480 px (in der Orientierung Landscape ). Es bezieht sich hier also auf CSS- Pixel, denn sonst müsste die Antwort ja 960 px lauten. Die Lösung besteht in dieser speziellen Abfrage nach dem Verhältnis zwischen CSS- und only screen and (-webkit-min-device-pixel-ratio: 2) Dadurch ist es möglich, für das iphone 4 separate CSS-Regeln anzuwenden. Leider ist es bekanntlich nicht möglich, via CSS ganz andere Bilder zu laden, denn die Bildquelle wird ja im img-tag des HTML-Codes spezifiziert. Die Retina-Optimierung muss sich also auf die Hintergrundbilder beschränken, denn diese werden ja via CSS eingebunden. Für deren Skalierung wird die CSS-Eigenschaft background-size benutzt. Für alle anderen muss man auf Vektorgrafiken im SVG-Format ausweichen, um die hohe Pixeldichte des Retina Displays voll ausnutzen zu können. Möchte man als Webdesigner Bilder sowohl für normale Desktop-Displays, als auch für alle HiDPI-Displays mit unterschiedlichsten Pixeldichten in optimierter Form anbieten, muss man eine Reihe von benutzen. Jede dieser Abfragen referenziert dann die benötigten Bilder in der passenden Auflösung. Infolgedessen muss für jedes Bild eine speziell für diese Auflösung optimierte Version bereitgestellt werden. Der Aufwand dafür ist allerdings beträchtlich: Will man auch nur zwei verschiedene HiDPI-Displays berücksichtigen, verdreifacht sich dieser (statt nur Bilder für 96 ppi, nun zusätzlich auch für 220 ppi und 326 ppi). Und nochmal: Mit dieser Methode können bisher nur Hintergrundbilder beeinflusst werden. Es wird derzeit (Januar 2014) allerdings an einem neuen Standard für eine HTML5-Erweiterung gearbeitet, mit der dann auch für die Bilder im Vordergrund je nach Displaygröße und Pixeldichte individuelle Varianten geladen werden können. Diese Vorgehensweise wird als Responsive Images bezeichnet ( Bis diese Erweiterung allgemein unterstützt wird, kann allerdings noch einige Zeit vergehen. Wer nicht so viel Geduld hat, kann auch auf andere Lösungen zurückgreifen: Eine davon ist das Konzept der Adaptive Images von Matt Wilcox ( Ein JavaScript aus nur einer Zeile erkennt dabei die Größe des Zieldisplays, erzeugt serverseitig mithilfe von PHP automatisch eine optimierte Version der benötigten Bilder und liefert diese an den Client aus. Eine deutschsprachige Einführung zu diesem Verfahren finden Sie auf Weitere Lösungen sind das Plugin HiSRC ( Foresight.js ( oder Riloadr ( tubalmartin/riloadr). Alle diese Lösungen können von dem webbasierten Hosting- Dienst für Software-Entwicklungsprojekte GitHub heruntergeladen werden. Aus Platzgründen können wir in diesem Studienheft nicht näher auf diese Systeme eingehen. Für die Anzeige von Icons auf den unterschiedlichen Displays gibt es eine ganz andere und sehr elegante Lösung: Die Verwendung sogenannter Symbolschriften: Statt Pixelgrafiken werden hier spezielle Textzeichen benutzt, die mithilfe von 20

21 CSS leicht skaliert werden können. Sie werden ohne Verlust an Schärfe auf allen Displays unabhängig von der Zoomstufe perfekt dargestellt. Beispiele dazu finden Sie bei CSS-Tricks ( Umgang mit Texten beim Responsive Webdesign Wie Sie erfahren haben, bedeutet Responsive Webdesign, dass mithilfe von Media Queries Weblayouts, je nach dem verfügbaren Platz auf dem Display, ganz unterschiedlich gestaltet werden können. Auf großen Bildschirmen kann eine Webseite vierspaltig, bei weniger Platz zweispaltig und auf einem Smartphone sogar nur einspaltig angezeigt werden. Im vorigen Abschnitt habe ich Ihnen erläutert, welche Probleme in diesem Zusammenhang bei Bildern entstehen und was für Lösungsmöglichkeiten dafür bisher existieren. Responsives Weblayout beschränkt sich aber natürlich nicht nur auf die Platzierung der großen Blöcke und Bilder: Auch die verwendeten Schriften sollten sich im Idealfall automatisch an die verschiedenen Ausgabemedien anpassen. Man benötigt eine geeignete Strategie für die Typografie auf Webseiten: Solche flüssigen Texte sind bei den verschiedensten Bildschirmgrößen immer optimal lesbar. Die erste Entscheidung betrifft die Wahl der richtigen Schriftgröße. Dabei muss berücksichtigt werden, in welchem Abstand sich das Display von den Augen des Benutzers befindet. Am weitesten entfernt wird sicher der große Desktop-Monitor sein, während bei einem Smartphone der Abstand typischerweise sehr gering ist. Die Schrift für ein Smartphone darf also kleiner gewählt werden als die für den Desktop-Monitor. Mit Media Queries ist es kein Problem, unterschiedliche Schriftgrößen für die verschiedenen Endgeräte über entsprechende CSS-Regeln vorzugeben. Aber auch auf die Zeilenlänge muss geachtet werden: Hier liegt der empfohlene Wert je nach Schriftgröße zwischen 45 und 75 Zeichen pro Zeile. Kommen wir zur Schriftgröße zurück und beschäftigen uns mit einer geeigneten Maßeinheit für flüssige Texte : Hier bietet sich die Maßeinheit em an, damit die Schriftgröße auch durch die Leser leicht angepasst werden kann. Ein empfehlenswerter Artikel zu diesem Thema findet sich hier: welche-einheit-ist-fur-schriftgrosen-in-css-am-besten-geeignet. Definition: 1em entspricht 100% der vom jeweiligen Elternelement (z. B. vom body) geerbten Schriftgröße. Da sich die Maßeinheit em also stets auf einen geerbten Wert bezieht, ist der vom Browser umgerechnete, absolute Wert z. B. von 0.75em nicht unmittelbar bekannt. Das body-tag ist bereits das oberste Element in der Hierarchie. Wird für dieses die Schriftgröße mit der Angabe font-size:0.75em; festgelegt, so ist hier die zugrunde gelegte Schriftgröße die Grundeinstellung des Browsers. Sie liegt normalerweise bei 16px, sodass 0.75em für das body-tag eine Schriftgröße von 12px ergibt. Diese Schriftgröße vererbt sich an alle weiteren Elemente, es sei denn, die anderen Elemente erhalten via CSS eine spezifischere Größenangabe. 21

22 Um em für flüssige Texte einzusetzen, muss nur Schriftgröße des umgebenden HTML-Elements angepasst werden, das den Bezugspunkt darstellt. Dazu hier ein kleines Beispiel, bei dem wie im oben zitierten Artikel für das body-tag zunächst die Schriftgröße auf 100% (bzw. 150%) festgelegt screen and (min-width: 700px) { body {font-size: 100%} screen and (min-width: 1100px) { body {font-size: 150%} } Wird anschließend em als Einheit für die Schriftgröße benutzt, bezieht sich diese immer auf den nach Auswertung der Media Query Abfrage gültigen Wert für den body. So gilt z. B. für eine h1-überschrift und eine ungeordnete Liste: h1 {font-size: 1em} ul {font-size: 0.8em} Wie wir gesehen haben, bezieht sich die Maßeinheit em immer auf die aktuelle Schriftgröße. Die h1-überschrift hätte auf einem Smartphone (min-width: 700px) demnach 16px: In dem Fall soll für den body die Schriftgröße 100% gelten, was hier genau 16px entspricht (s. Definition oben). Auf einem großen Monitor (min-width: 1100px) hätte die h1-überschrift mit 1em dagegen eine Schriftgröße von 24px (150% von 16px). Eine ungeordnete Liste mit 0.8em würde auf einem Smartphone mit 0.8*16px=12.8px dargestellt. Auf dem großen Bildschirm wären es 0.8*24=19.2px. Empfindet man während des Designprozesses die Schriftgrößen auf dem großem Monitor doch als zu groß, muss man lediglich für das body-tag die Basis-Schriftgröße auf z. B. 120% herabsetzen. Der Mechanismus der Einheit em sorgt automatisch dafür, dass alle anderen Schriftgrößen automatisch angepasst werden. Neuerdings wird auch öfters die Maßeinheit rem für Schriftgrößen herangezogen ( root em ). Die Einheit rem verhält sich ähnlich wie em, bezieht sich aber immer auf das Root-Element (orientiert sich also stets an der Schriftgröße für den body). Bei em kann das Bezugselement jedes beliebige Eltern-Element sein. Mit CSS3 wurden ganz neue dynamische Maßeinheiten eingeführt, die sich an der Größe des Viewports orientieren. Diese Themen können in diesem Studienheft leider nicht weiter erläutert werden. Ich empfehle daher zur Vertiefung folgende Quellen im Netz: Das Meta-Tag "viewport" Als Viewport wird die im Monitor sichtbare Fläche des Browsers (abzüglich der Scrollbalken) bezeichnet. Leider ist bei Smartphones der Viewport nicht einfach die Größe des Displays. Hier ist die Situation komplizierter und wir müssen uns deshalb mit diesem Thema eingehend befassen. Die mobilen Browser der Smartphones arbeiten nämlich mit einem internen quasi virtuellen Viewport: Die- 22

23 ser auch als Layout Viewport bezeichnete Bereich verwendet die Pixelmaße für Breite und Höhe eines typischen Desktop-Monitors. Diese Maße sind je nach Smartphone-Modell unterschiedlich, d. h., deren Hersteller entscheiden, welcher Viewport für die Darstellung von Desktop-Websites optimal ist. So geht der Safari-Browser des iphones von einem Layout Viewport mit einer Breite von 980 Pixeln aus, also bei Weitem mehr, als die Größe seines Bildschirms. Was hat das für einen Sinn? Die Antwort lautet: Wenn eine Webseite nicht für das kleine Display eines Smartphones optimiert wurde, muss der mobile Browser diese zunächst in dem virtuellen Layout Viewport aufbauen. Dieser Bereich wird anschließend so stark verkleinert, dass er genau in den tatsächlichen Smartphone-Monitor passt. Beim iphone 4 hat dieser die Maße 320 x 480 Pixel. Die Nutzer müssen dann die Zoomfunktion verwenden, um die Inhalte ansehen und Texte lesen zu können. Um die Konsequenzen dieses Themas zu verstehen, sehen wir uns ein konkretes Beispiel an, das ich dem sehr empfehlenswerten Beitrag Combining meta viewport and media queries (s. Anhang: Informationsquellen im Internet) entnommen habe: Abb. 5: Media Queries CSS-Beispielcode Als Ergebnis der hier vorgenommenen Abfragen würde man erwarten, dass für Smartphones die CSS-Regeln ( Styles ) für mobile Geräte ( mobile ) angewandt werden, denn deren Display ist ja mit Sicherheit nicht breiter als 600 Pixel. Da die Smartphones jedoch mit ihrem virtuellen Layout Viewport einen wesentlich größeren Monitor vorgaukeln, würden tatsächlich hier die Desktop-Styles angewandt. Was würde passieren, wenn man in der Abfrage der Media Queries den Parameter device-width (also die tatsächliche Breite des Gerätemonitors) anstelle von width (Viewport-Breite) verwendet? In diesem Fall würde zwar, wie gewünscht, der Regelsatz mobile verwendet werden, allerdings bauen die Smartphone-Browser die Seite trotzdem relativ zu dem virtuellen Viewport auf, um anschließend auf den realen Monitor zu skalieren: Neben der korrekt dargestellten mobil optimierten Seite (z. B. einspaltiges Layout ohne Hintergrundbilder usw.) erscheint eine große leere Fläche. Darüber hinaus kommt es bei einigen Geräten vor, dass die Abfrage nach device-width nicht immer den korrekten Wert zurückgibt. Diese Problematik wird durch die Einführung des Meta-Tags "viewport" behoben: 23

24 <meta name="viewport" description="width=device-width, height=device-height" > Viewport-Tag: Echte Gerätebreite statt virtuellem Layout- Viewport Die Meta-Angabe "viewport" wurde ursprünglich von Apple für dessen iphone eingeführt. Damit hat man als Webseiten-Entwickler/-in nun selbst die Möglichkeit, die Maße für den Viewport einer Seite festzulegen: Die Angabe width=device-width bedeutet demnach, dass der mobile Browser den virtuellen Layout Viewport ignorieren und stattdessen die tatsächliche Breite des Gerätemonitors für die Definition des Viewports heranziehen soll. Alle Angaben in den CSS-Stilen, wie z. B. width:20%, beziehen sich anschließend auf diese Gerätebreite. Für eine korrekte Darstellung mobil optimierter Webseiten auf Smartphones gilt also folgende Bedingung: Die Kombination der Abfrage nach width in den Media Queries mit der Angabe width=device-width im Viewport-Tag. In dem bereits zitierten Artikel wird noch begründet, aus welchen Gründen die ebenfalls mögliche Kombination der Abfrage nach device-width mit dem Viewport- Tag langfristig nicht empfehlenswert ist. Ich möchte das hier aus Platzgründen nicht vertiefen. Mithilfe des Viewport-Tags lassen sich aber auch weitere Vorgaben machen, die in der Regel jedoch nur vom iphone interpretiert werden. So lässt sich einstellen, ob der Benutzer die Website skalieren kann oder nicht: <meta name="viewport" description="user-scalable=no" > Wenn die Desktop-Version auf dem Smartphone angezeigt wird, ist Zoomen sinnvoll und nötig. Bei einer mobil optimierten Version ist der Zoom eher störend. Darüber hinaus lässt sich die minimale und maximale Skalierung festlegen: <meta name="viewport" content="width=device-width; initialscale=1.0; maximum-scale=1.0; user-scalable=0;" > Das Meta-Tag "viewport" behebt noch ein weiteres Problem, das im Zusammenhang mit Media Queries auftritt: Ein weitverbreiteter Browser für Mobilgeräte ist Opera. Neben dem Opera Mini für Mobiltelefone und PDAs gibt es noch den Opera Mobile für Smartphones und Pocket PCs mit den Betriebssystemen Windows Mobile, Symbian OS und Linux. Diese Browser sind auf vielen Geräten bereits vorinstalliert, sodass Opera eine Vorreiterrolle unter den Browsern für mobile Geräte einnimmt. Mit Opera wurde das sogenannte Small Screen Rendering eingeführt. Dadurch werden Internetseiten für Mobilgeräte ganz automatisch optimiert dargestellt: Das Layout wird auf eine Spalte reduziert und Fotos werden verkleinert, um auch normale Websites auf den kleinen Displays darstellen zu können. Für nicht optimierte Seiten ist das natürlich ein Vorteil. Hat man sich dagegen die Mühe gemacht, die Website für das mobile Web zu optimieren, gerät es zum Nachteil. Denn das Small Screen Rendering ignoriert alle Einstellungen aus dem per Media Queries angebotenen mobilen Stylesheet. Erst das Viewport-Tag teilt dem Browser mit, dass es sich um eine mobil optimierte Website handelt und dann verzichtet Opera auf sein Small Screen Rendering. Mit dem Viewport-Tag lassen sich also die logischen Dimensionen und das Skalierungsverhalten der Smartphone-Browser kontrollieren und es wird gleichzeitig deutlich gemacht, dass die aktuelle Webseite für mobile Geräte optimiert ist. 24

25 4.2.7 Print und große Bildschirme Sie werden sich jetzt fragen: Wir befassen uns doch hier mit Webdesign für Smartphones was haben Ausdrucke und große Bildschirme damit zu tun? Wie Sie ja bereits erfahren haben, ist es schon seit CSS 2.1 möglich, ein spezielles Stylesheet für den Medientyp "print" zu referenzieren. Dies sorgt dafür, dass beim Ausdrucken von Webseiten der Drucker wichtige Inhalte nicht abschneidet oder unzählige überflüssige, halbleere Seiten produziert, wie wir das alle schon erlebt haben. Diese Methode lässt sich ideal mit der Weiterentwicklung der Technologie, den Media Queries, und dem Konzept des Responsive Webdesigns kombinieren, d. h., wir können insgesamt folgende Kombination von Stylesheets im Head-Bereich einer HTML-Datei anbieten: <link rel="stylesheet" href="style_print.css" media="print" type="text/css" > <link rel="stylesheet href="style.css" media="screen and (min-device-width: 481px)" type="text/css" > <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="style_mobile.css" > <link rel="stylesheet" href="style_mobile.css" media="handheld" type="text/css" > Moderne Smartphones fühlen sich ja bekanntlich vom Medientyp "handheld" nicht angesprochen. Es schadet aber nicht, dasselbe mobile Stylesheet, das man den Smartphones per Media Queries zuweist, mit dem an sich veralteten Medientyp "handheld" älteren mobilen Geräten zuzuweisen. Ich wollte in diesem Kapitel zum Thema Responsive Webdesign also zunächst darauf hinweisen, dass die optimale Druckaufbereitung von dieser Technik ebenfalls abgedeckt wird. Wie das allerdings im Detail geschieht, werde ich Ihnen erst später in diesem Studienheft erklären, wenn wir uns im Praxisteil mit konkreten Anwendungsbeispielen befassen. Heute verwenden viele User bereits Breitbildmonitore mit einem Seitenverhältnis von 16:9 und einer Auflösung von 1920x1080 Pixeln. Für die Darstellung auf diesen Bildschirmen wird natürlich das normale Stylesheet mit dem Parameter media="screen" herangezogen. Viele Webseiten sehen auf Breitbildmonitoren ziemlich unattraktiv aus, weil der viele Platz auf dem Monitor nicht ausgenutzt und ein großer Teil des Browserfensters einfach leer (d. h. weiß) bleibt oder mit einem langweiligen Hintergrundmuster gefüllt wird. Noch schlimmer ist es, wenn Text über die gesamte Bildschirmbreite läuft, was die Leser dann zwingt, das Browserfenster zu verkleinern. Wenn Sie sich intensiver damit befassen möchten, wie man als Webdesigner Layouts für große Bildschirme optimieren kann, finden Sie dazu im Internet und in der Fachliteratur weiterführende Informationen (s. Literaturverzeichnis im Anhang). Ich werde mich hier darauf beschränken Ihnen lediglich ein paar einfache Maßnahmen aufzuzählen, die hier angewandt werden können: 25

26 Intelligente Wahl eines Hintergrundbildes (Maße 1920x1080px, flächiges, zum Thema passendes Motiv, keine Bildwiederholung): Auf Monitoren mit geringer Auflösung wirkt das Bild dann lediglich wie eine Headergrafik, auf Breitbildmonitoren füllt es die Fläche und sorgt für Abwechslung und räumliche Tiefe. Verwendung von Flexiblen Layouts: Etwas später in diesem Studienheft werde ich im Zusammenhang mit der Vertiefung des Themas CSS-Layout auf diesen Punkt zurückkommen und Ihnen erklären, was man unter liquid layout, bzw. elastic layout versteht. Hier erst einmal nur so viel: Statt die Breite der Layoutelemente starr in Pixeln anzugeben, verwendet man die Einheiten % oder ems, wodurch sich das Layout in gewissen Grenzen der Größe des Browserfensters automatisch anpasst. Zusätzliche Leerspalten und/oder größere Außenabstände (margin) als Abstandshalter, die sich dynamisch mit der Auflösung verbreitern. Alle genannten Techniken funktionieren, ohne dass dafür ein spezielles Stylesheet für Breitbildmonitore benötigt wird. Die Darstellung auf Smartphones wird davon nicht beeinflusst, da diese ja mithilfe der Media Queries ohnehin ihre eigenen CSS-Regeln erhalten. Sollte ein in jeder Hinsicht perfekt für Breitbildmonitore optimiertes Layout erwünscht sein, kann man das selbstverständlich mit entsprechenden Abfragen via Media Queries auch realisieren ipad und Android-Tablets Tablets haben deutlich größere Monitore als Smartphones und können deshalb in der Regel auch die regulären Desktop-Websites problemlos anzeigen. Bei Bedarf können die Nutzer ja immer noch die Zoomfunktion in Anspruch nehmen, die ja auf diesen Geräten genauso komfortabel wie auf Smartphones zur Verfügung steht. Möchte man allerdings als Webdesigner doch den speziellen Abmessungen der Monitore von ipad und Android Tablets Rechnung tragen, kann man selbstverständlich mit Media Queries auch auf diese Geräte speziell zugeschnittene CSS-Regeln bereitstellen. So könnte dann eine entsprechende Abfrage aussehen: only screen and (min-device-width: 768px) and (max-devicewidth: 1024px) and (orientation: landscape) oder auch so: only screen and (min-device-width: 768px) and (max-devicewidth: 1024px) and (orientation: portrait) Hier haben Sie mit orientation noch ein weiteres Merkmal kennengelernt, das mit Media Queries abgefragt werden kann: Demnach kann hier sogar je nach aktueller Ausrichtung des Geräts ein anderes Layout mithilfe spezieller CSS- Regeln generiert werden Serverseitiges Responsive Webdesign Ich habe Ihnen in diesem Kapitel die Vorteile von Responsive Webdesign deutlich gemacht. Es soll hier jedoch nicht verschwiegen werden, dass diese Methode nicht in allen Situationen für eine perfekte Darstellung und Nutzbarkeit von Websites auf allen denkbaren Geräten sorgen kann. Responsive Websites sind nämlich in 26

27 Bezug auf Performance nicht automatisch mobilgerätefreundlich: Sie sind häufig zu groß in Bezug auf die Menge und Größe der Dateien. So haben Sie schon erfahren, dass bestimmte Inhalte bei zu kleinen Viewport-Größen einfach mit display:none versteckt werden können. Sie müssen aber trotzdem vom Server geladen werden. Dasselbe gilt für Bilder, die oft für große Displays optimiert und dann nach dem Prinzip der Fluid Images verkleinert dargestellt werden. Gerade mobile Geräte, die meist eine schlechtere Verbindung als stationäre Rechner besitzen, müssen Inhalte laden, die dann nicht benötigt werden. Hier kann eine Methode weiterhelfen, die mit der RESS bezeichnet wird: REsponsives Webdesign mit ServerSeitigen Elementen. Dabei muss eine Website zunächst nach den zuvor in diesem Kapitel erläuterten Grundsätzen des Responsive Webdesign entwickelt werden. Bestimmte Inhalte werden jedoch je nach dem identifizierten mobilen Gerät auf unterschiedliche Weise ausgeliefert bzw. komplett eingespart. Ein einfaches Beispiel für RESS ist die serverseitig angepasste Auslieferung von Bildern. Die Identifikation des Browsers, bzw. des Geräts gibt es grundsätzlich schon lange: Wenn eine Website durch einen Browser angefordert wird, sendet dieser im Header unter anderem den User Agent String. Aus diesem können grundsätzlich Browser, Betriebssystem und Gerät abgeleitet werden. Ich hatte dieses Browser Sniffing bereits zuvor in diesem Kapitel kurz angesprochen. Das Verfahren funktioniert jedoch angesichts der großen Zahl der verfügbaren mobilen Geräte jetzt schon nicht mehr eindeutig und kommt deshalb für künftige Entwicklungen nicht mehr in Frage. Besser geeignet und auch zukunftssicher sind die sogenannten Devices Description Repositories kurz DDR genannt. Diese enthalten Beschreibungen aller Eigenschaften der einzelnen Geräte. Mit WURFL haben Sie früher in diesem Kapitel schon eine derartige Datensammlung kennengelernt. WURFL stellt die Gerätedaten in einer XML-Datei zur Verfügung, die in der Cloud abgelegt und ständig aktualisiert wird. Mithilfe einer API für verschiedene gängige serverseitige Programmiersprachen können die Geräteeigenschaften aus WURFL abgefragt werden. Dazu steht jeweils ein passender WURFL-Cloud-Client zur Verfügung. Dieser Service steht unter zur Verfügung und ist kostenpflichtig. Es würde zu weit führen, hier im Studienheft den Umgang mit dieser Technologie im Detail zu erläutern. Eine Beschreibung samt Videoeinführung finden Sie unter Die Website wurde selbst mit der RESS-Technologie implementiert. Eine Analyse ergab hier folgende Unterschiede in Abhängigkeit vom aufrufenden Endgerät: Bei einem Desktop-PC waren 80 HTTP-Requests nötig und es wurden Daten in der Größenordnung von 800 KB übertragen. Bei einem iphone waren es nur 50 HTTP-Requests und die Datenmenge lag mit etwa 520 KB knapp über der Hälfte. Für Benutzer eines mobilen Geräts kann der Einsatz von RESS also zu einer deutlichen Verbesserung der Performance führen. 27

28 4.3 Zusammenfassung Es lassen sich zwei Strategien für das mobile Web unterscheiden: Rein mobile Websites und der One Web -Ansatz, der mithilfe von Responsive Webdesign realisiert werden kann. One Web bedeutet: Soweit es irgendwie sinnvoll und möglich ist, werden dieselben Informationen und Anwendungen den Nutzern vollkommen unabhängig von ihrem aktuell genutzten Gerät angeboten. Beim Mobile First -Ansatz wird erst nach Fertigstellung der mobilen Version aus dieser die Desktop-Version einer Website entwickelt. Responsive Webdesign bedeutet: Ein Webdesign, das auf die aktuelle Umgebung anspricht bzw. darauf reagiert. Der Schlüssel zum Responsive Webdesign liegt in den Media Queries: Diese erlauben es, gezielt die tatsächlichen physikalischen Eigenschaften der Zielgeräte abzufragen und für diese dann spezielle CSS-Stile zu laden. Zur Anpassung von Bildern an die unterschiedlichen Bildschirmgrößen wendet man die Methode der Fluid Images an. Smartphones verwenden einen virtuellen Layout Viewport, mit dessen Hilfe sie ganz normale Webseiten aufbauen und dann auf die tatsächlichen Bildschirmmaße abbilden können. Mithilfe des Meta-Tags viewport kann dieser Mechanismus für Webseiten abgeschaltet werden, die bereits für mobile Geräte optimiert sind. Ebenfalls mithilfe von Media Queries kann auch die Darstellung von Webseiten für Breitbildmonitore, Tablet-PCs sowie für den Druck optimiert werden. 28

29 I. Aufgaben zur Selbstüberprüfung A Überprüfen Sie nun bitte Ihre Kenntnisse. Lösen Sie die nachfolgenden Aufgaben bitte schriftlich und vergleichen Sie Ihre Lösungen mit den Musterlösungen im Anhang. Es ist in Ihrem eigenen Interesse, die Aufgaben selbstständig zu lösen, ehe Sie im vorausgehenden Text oder Anhang nachschlagen. 1. Nennen Sie bitte zwei Argumente, die für die Strategie des One Web sprechen. 2. Erklären Sie bitte, in welcher Hinsicht Media Queries über die bisher praktizierte Einbindung medienspezifischer Stylesheets hinausgehen. 3. Welche beiden Bestandteile umfasst ein Query? Benutzen Sie ein Beispiel für Ihre Erklärung. 4. Worin besteht die Notwendigkeit für das Meta-Tag viewport? A 29

30 5 CSS-Layout Lernziel: In diesem Kapitel möchte ich zunächst mit Ihnen ganz unabhängig vom mobilen Internet Ihre Kenntnisse im Bereich CSS-Layout erweitern. Für dieses Studienheft werden zwar CSS-Grundkenntnisse vorausgesetzt. Wir müssen uns hier allerdings mit realistischen Beispielen befassen, die auch den Ansprüchen an professionelle Websites genügen. Damit Sie auch solche anspruchsvolleren CSS-Layouts verstehen können, benötigen Sie weiterführende CSS-Kenntnisse. Wie ich bereits im vorangegangenen Kapitel erklärt habe, kommt für mobil-optimierte Webseiten selbstverständlich nur noch konsequentes CSS-Layout infrage. Sie werden gerade bei unserem Thema Webdesign für Smartphones besonders gut erkennen können, warum diese Technologie den alten Layoutverfahren mit Tabellen und Frames so überlegen ist. 5.1 Grundlage Standardlayout zweispaltig Die Basis für unsere weiteren Betrachtungen ist ein für Unterrichtszwecke vielfach bewährtes und deshalb naturgemäß noch recht einfaches, zweispaltiges CSS- Layout. Sehen wir uns dieses Beispiel zusammen an. Das Layoutschema in der folgenden Grafik soll Ihnen das Verständnis erleichtern. Es zeigt die fünf DIV-Container mit ihren wichtigsten CSS-Eigenschaften, aus denen dieses Layout aufgebaut ist. Abb. 6: Layoutschema Standardlayout 30

31 Ich fasse hier noch mal die wichtigsten Punkte zusammen: Innerhalb des body kommt zunächst der holder mit fester Breite von 760 Pixeln und automatischer Zentrierung mithilfe der auto-werte für linken und rechten Außenabstand. Die Basis: zweispaltiges Layout mit header und footer Ein header ist ein einfacher DIV-Container ohne nennenswerte Eigenschaften. Das nav enthält die Navigation und hat neben einer fixen Breite die wichtige Eigenschaft float:left, d. h. alle weiteren Inhalte fließen rechts um nav herum. content hat einen linken Außenabstand, damit auch nach Ende von nav der Eindruck eines zweispaltigen Designs erhalten bleibt (sonst würde ja der Inhalt von content nach dem unteren Ende von nav wieder ganz links im holder weiterfließen). Als kleine kosmetische Ergänzung besitzt content noch einen Rand auf seiner linken Seite. footer ist wie header ein einfacher DIV-Container, besitzt lediglich noch einen Rand auf seiner oberen Seite. Die folgende Abbildung zeigt die Seite mit diesem Layout, wie sie von Firefox dargestellt wird: Abb. 7: Basislayout im Firefox 31

32 Dieses Beispiel repräsentiert ein typisches fixed layout, d. h., es hat eine feste Breite. Der holder (760 px) schwimmt in dem graubraun gefärbten body und ist automatisch immer horizontal zentriert. Die Navigationselemente wurden als ungeordnete Liste (ul-tag) implementiert. In der nächsten Abbildung sehen Sie den zugehörigen HTML-5-Quellcode: Abb. 8: HTML-Code Basislayout 32

33 Die folgende Abbildung zeigt einen Screenshot des CSS-Codes, wie er von Adobe Dreamweaver angezeigt wird. Obwohl man sich natürlich den CSS-Code auch von Firefox anzeigen lassen kann, zeige ich Ihnen lieber die Dreamweaver-Darstellung. Deren anschauliche Formatierung mit Farben und Einrückungen erleichtert die Lesbarkeit und fördert damit das Verständnis. Abb. 9: CSS-Code Basislayout 33

34 Ich verlasse mich an dieser Stelle auf Ihre CSS-Grundkenntnisse und hoffe, dass Sie auch ohne weiterreichende Erläuterungen einzelner CSS-Codezeilen dieses einfache Beispiel mithilfe der bereits zuvor gegebenen Erklärungen alleine nachvollziehen können. Falls nicht, verzweifeln Sie bitte nicht, sondern lesen Sie zuerst einmal die nächsten Abschnitte: Dort werde ich nochmal wichtige Konzepte des CSS-Layouts wiederholen und vertiefen. Ich bin sicher: spätestens dann wird Ihnen auch dieses Beispiel klar sein. 5.2 CSS: Wiederholung und Vertiefung In diesem Kapitel möchte ich die in unserem Basislayout bereits angewandten CSS-Techniken noch einmal genauer erläutern, Ihnen dann aber weiterführende Verfahren des CSS-Layouts vermitteln Die Eigenschaft float Ohne float geht nichts beim CSS-Layout Am Beispiel des Basislayouts aus dem vorigen Abschnitt haben wir ja die prinzipielle Funktionsweise der CSS-Eigenschaft float kennengelernt. Da dies die für CSS-Layouts wohl wichtigste Eigenschaft ist (auf Layouts mit absoluter und relativer Positionierung kann ich aus Platzgründen hier nicht eingehen), möchte ich sie Ihnen genauer erklären. Wir beginnen mit einem ganz einfachen Beispiel, das sich an unser Basislayout anlehnt: In einem holder (grau) befinden sich zwei weitere Container nav (feste Breite, grün) und content (gelb). Ich gehe davon aus, dass Sie auch ohne explizite Auflistung des HTML- und CSS-Codes so ein einfaches Beispiel nachvollziehen können. Es wurden keine anderen Strukturen verwendet, die nicht bereits in dem Basislayout vorgekommen sind. Wenn man also nav und content keine weiteren CSS-Eigenschaften zuweist, ergibt sich folgende Darstellung im Browser: 34

35 Abb. 10: Float-Beispiel Grundzustand Die DIVs werden ganz normal nacheinander vom Browser dargestellt, d. h. genau so, wie sie im Fluss des HTML-Codes aufeinander folgen. Ganz wie in unserem Basislayout-Beispiel erweitern wir jetzt das Stylesheet für nav und content um je eine Eigenschaft. In der gewohnten Schreibweise mit ID-Selektoren lauten diese: #nav {float:left;} #content {margin: px;} Wie die folgende Abbildung zeigt, wird nun der Container nav erwartungsgemäß aus dem Fluss der Seitenelemente entfernt und stattdessen rechts umflossen (gleichzeitig wandert ein gefloatetes Element immer so weit wie möglich nach oben was bei diesem Beispiel für nav keinen zusätzlichen Effekt bringt). Voraussetzung für das Umfließen eines Elements ist, dass es ein Block-Element (im Gegensatz zu Inline-Elementen) ist und eine feste Breite aufweist, was ja beides bei nav der Fall ist. Der Container content hat deshalb einen großen linken Außenabstand bekommen, damit auch dann noch eine zweispaltige Darstellung erhalten bleibt, wenn der Inhalt von content länger werden sollte, als der von nav (sonst würde ja der gegebenenfalls längere Inhalt von content links am holder-rand weiterfließen, wenn sich dort am unteren Ende von nav wieder Platz bietet). In diesem Beispiel wurde aber bewusst der linke nav-container länger gemacht als der content, um einen bestimmten Effekt beim Floaten demonstrieren zu können: 35

36 Abb. 11: Float-Beispiel ohne clear Float: irgendwann muss Schluss sein! Wie Sie sehen können, schließt der äußere Container holder (grau) nach dem Floaten den Container nav nun nicht mehr ein dieser ragt praktisch unten aus holder heraus. Dieses Verhalten ist kein Bug, sondern beim Floaten von Elementen ganz normal und entspricht der CSS-Spezifikation. Allerdings ist das meistens nicht das, was man als Designer haben will (außer, der äußere Container hat keine Hintergrundfarbe dann würde es ja nicht auffallen). Die Lösung lautet: Das Floaten muss in diesem Container wieder beendet werden, damit er alle enthaltenen Unter-Container wieder vollständig einschließt. Die Eigenschaft float bleibt nämlich so lange wirksam, bis sie explizit wieder aufgehoben wird. Um dies zu erreichen, gibt es mehrere Möglichkeiten. Ich wähle hier die simpelste: Man fügt an der Stelle in dem äußeren Container holder, an der das Floaten beendet werden soll, ein unsichtbares Element ein, dem man die CSS- Eigenschaft clear:all gibt. Durch den Wert all werden alle gegebenenfalls benutzten Floats aufgehoben (man könnte auch die individuellen Werte left bzw. right verwenden). Dieses unsichtbare Element ist ein DIV-Container, dem mithilfe der Klasse brclear folgende CSS-Eigenschaften zugewiesen werden: brclear { clear:both; height:0; margin:0; font-size: 1px; line-height: 0px; } Bitte vergleichen Sie die eben beschriebene Vorgehensweise mit dem HTML- und CSS-Code unseres Basislayouts (s. oben): Dort wurde das Beenden von float:left genauso implementiert! Ich kann deshalb darauf verzichten, den notwendigen Quellcode hier noch mal im Detail zu zeigen. Bei unserem aktuellen Beispiel führt diese Vorgehensweise zu folgender Browserdarstellung, die in den meisten Fällen eher den Vorstellungen von Webdesignern entsprechen wird: 36

37 Abb. 12: Float-Beispiel mit clear Lassen Sie mich nun noch ein weiteres Detail des Floatens von Elementen erklären. Betrachten wir dazu ein anderes, ganz simples Beispiel: Eine Reihe von DIV- Containern, die durch folgenden HTML-Code generiert werden: <div class="lefty"><p>platzhalter</p></div> Über die Klasse "lefty" wurde allen Containern die grüne Farbe und der rote Rand zugewiesen (warum ich diese Klasse so genannt habe, werden Sie gleich verstehen). Diese DIVs werden ganz normal nacheinander vom Browser dargestellt, d. h. genau so, wie sie im Fluss des HTML-Codes aufeinander folgen (bitte achten Sie hier schon darauf, dass einer dieser DIVs aus der Reihe tanzt, weil ihm mithilfe einer weiteren Klasse eine größere Höhe zugewiesen wurde). Die folgende Abbildung zeigt einen Teil dieser Container, weil ich das Browserfenster bewusst nicht so groß eingestellt habe. 37

38 Abb. 13: Mehrere DIVs im regulären Fluss der Elemente Was geschieht nun, wenn alle Container die Eigenschaft float:left erhalten? Sehen Sie sich die folgende Abbildung an, die das Ergebnis in der Firefox-Darstellung zeigt: Abb. 14: Mehrere DIVs alle float:left (breiteres Browserfenster) float:left: alle in Reih und Glied Offensichtlich reihen Sie sich alle schön nebeneinander. Mit dieser Technik lassen sich also sehr einfach mehrere nebeneinander aufgereihte Thumbnail-Bilder, Buttons oder ähnliche Szenarien erzeugen, bei denen sich die Elemente unabhängig von der aktuellen Größe des Browserfensters automatisch nebeneinander anordnen. Beachten Sie bitte, wie unser höheres Spezial-DIV aus dieser Reihe unten 38

39 herausragt, wodurch aber bei diesem Szenario allerdings keine Probleme entstehen. Was passiert nun, wenn wir das Browserfenster horizontal schmaler machen? Sehen Sie sich dazu die nächste Abbildung an: Abb. 15: Mehrere DIVs alle float:left (schmaleres Browserfenster) Offensichtlich müssen sich die DIVs nun einen neuen Platz innerhalb des Viewports suchen. Da kommt nun unser Spezial-DIV ins Spiel: Es hindert die anderen DIVs zu seiner Rechten zunächst daran, ganz nach links zu wandern. Erst wenn man wie im nächsten Bild das Browserfenster noch schmaler macht, zwingt das die DIVs ganz nach links und eines davon beginnt sogar eine dritte Reihe. Abb. 16: Mehrere DIVs alle float:left (noch schmaleres Browserfenster) Man könnte dieses Spiel noch weiter fortsetzen. Für unsere künftigen, anspruchsvolleren Layout-Projekte möchte ich nur diesen Punkt festhalten: Man kann jederzeit innerhalb eines umschließenden Containers mehreren DIVs gleichzeitig die Eigenschaft float:left zuweisen. Solange sichergestellt ist, dass das Browserfenster eine ausreichende Breite hat, lassen sich damit bequem und problemlos Mehrspaltige Container- Anordnungen: allen DIVs float:left zuweisen 39

40 mehrspaltige Anordnungen erzeugen. Ein User, der sein Fenster zu klein einstellt, wird ja schnell merken, dass sich die betreffende Seite nicht mehr angenehm betrachten lässt und sein Fenster entsprechend anpassen. Aber auch bei zu schmalem Browserfenster geht auf keinen Fall ein Layout-Element verloren. Wir werden im nächsten Kapitel die eben erlernte Methode verwenden, um eine Variante für ein dreispaltiges Layout zu erstellen Fest, elastisch oder flüssig fixed, liquid, elastic die Grundtypen der CSS-Layouts In diesem Abschnitt möchte ich Ihnen kurz die drei wichtigsten Varianten von CSS-Layouts erläutern: Feste Layouts (englisch: fixed ) zeichnen sich, wie der Name sagt, durch einen festen Pixelwert für die Breite des Hauptcontainers (bei uns heißt der meistens holder) aus. Derartige Layouts sehen nur bei einer bestimmten Monitorauflösung (bzw. Größe des Browserfensters) optimal aus. Wird das Browserfenster kleiner als die festgelegte Breite des Hauptcontainers, erscheinen horizontale Scrollbalken, was aus Usability-Gründen äußerst unerwünscht ist. Bei sehr großen Fenstern wird die vorhandene Fläche nicht genutzt und das Layout wirkt häufig etwas verloren. Bei festen Layouts kommt es auch zu hässlichen Effekten, wenn Nutzer die Schriftgröße ihres Browsers erhöhen, weil dann die Texte nicht mehr in die dafür vorgesehenen Container passen. Flüssige Layouts (englisch: liquid ) verwenden dagegen einen in Prozent definierten Wert für die Breite des Hauptcontainers. Beträgt dieser 100 %, nimmt das Layout immer die volle Breite des Browserfensters ein. Werden auch die Breite der untergeordneten Container in Prozent angegeben, dann wachsen oder schrumpfen bei einer Größenänderung des Browserfensters alle Bereiche, weshalb dieser Layout-Typ als flüssig bezeichnet wird. Solche flexiblen Layouts sind aber bei sehr großen oder sehr kleinen Auflösungen auch problematisch. Es gibt meistens eine Mindestbreite, bei der das Layout gut aussieht und optimal benutzbar ist. Umgekehrt wird es bei übergroßen Browserfenstern nicht mehr funktionieren, weil dann meistens die Textblöcke viel zu breit werden, was bekanntlich die Lesbarkeit verschlechtert. Abhilfe kann hier die Verwendung der CSS-Eigenschaften min-width und max-width schaffen, mit der sich eine obere und untere Grenze für die Flexibilität des Hauptcontainers festlegen lässt. Elastische Layouts (englisch: elastic ) benutzen die Einheit em für die Definition der Breite: em bezieht sich immer auf die aktuell gewählte Schriftgröße, die Nutzer in ihrem Browser eingestellt haben. Wurde die Standardgröße beibehalten, dann entspricht 1em einer Schriftgröße von 12pt und das entspricht genau 16px. Mit der relativen Einheit em können aber nicht nur Schriftgrößen definiert, sondern auch die Breite von Layoutcontainern festgelegt werden. Wählt ein Nutzer dann eine größere Schrift, wächst der zugehörige Container automatisch mit. Die Breite des Layouts verändert sich also nicht wie bei flüssigen Layouts durch Vergrößerung oder Verkleinerung des Browserfensters, sondern durch Änderung der Schriftgröße durch die User. Für eine tiefergehende Beschäftigung mit diesem besonders wichtigen Aspekt des Webdesigns empfehle Ihnen, sich mithilfe der entsprechenden Fachliteratur und der zahlreichen Tutorials im Internet (s. Anhang) darüber weiter zu informieren. Zwei der hier vorgestellten Varianten, nämlich fixed und liquid, werden Sie gleich im folgenden Kapitel bei den Praxisbeispielen genauer kennenlernen. 40

41 5.3 Zusammenfassung Eine der wichtigsten Eigenschaften zur Realisierung von CSS-Layouts ist die Eigenschaft float. Wenn mithilfe von float bestimmte Inhalte einer Webseite andere Inhalte umfließen, muss dieses Floaten auch gezielt wieder beendet werden, damit es nicht zu Problemen bei der Darstellung im Browser kommt. Es können auch mehrere Layout-Container mit derselben float-eigenschaft versehen werden. Diese werden dann im Browser nebeneinander angeordnet, sofern der dafür erforderliche Platz vorhanden ist. Feste Layouts (englisch: fixed ) zeichnen sich durch einen feste Pixelwert für die Breite des Hauptcontainers aus. Derartige Layouts sehen nur bei einer bestimmten Monitorauflösung (bzw. Größe des Browserfensters) optimal aus. Flüssige Layouts (englisch: liquid ) verwenden einen in Prozent definierten Wert für die Breite des Hauptcontainers. Beträgt dieser 100%, nimmt das Layout immer die volle Breite des Browserfensters ein. Elastische Layouts (englisch: elastic ) benutzen die Einheit em für die Definition der Breite: em bezieht sich immer auf die aktuell gewählte Schriftgröße, die Nutzer in ihrem Browser eingestellt haben. II. Aufgaben zur Selbstüberprüfung A Überprüfen Sie nun bitte Ihre Kenntnisse. Lösen Sie die nachfolgenden Aufgaben bitte schriftlich und vergleichen Sie Ihre Lösungen mit den Musterlösungen im Anhang. Es ist in Ihrem eigenen Interesse, die Aufgaben selbstständig zu lösen, ehe Sie im vorausgehenden Text oder Anhang nachschlagen. 1. Welche CSS-Eigenschaft ist für die Realisierung von Spaltenlayouts unverzichtbar? 2. Was bedeutet der CSS-Code clear:right;? 3. Reproduzieren Sie bitte das Beispiel mit mehreren gefloateten Containern aus diesem Kapitel: Schreiben Sie den notwendigen HTML-5-Code (6 Container gleicher Höhe sind ausreichend) und verwenden Sie ein eingebettetes Stylesheet für den CSS-Code. Sehen Sie sich Ihr Resultat in Ihrem Browser an und testen Sie das Verhalten der Container, wenn Sie das Browserfenster schmaler machen. A 41

42 6 Praxisbeispiele Lernziel: Wir sind nun in dem zentralen Kapitel dieses Studienhefts angekommen: den Praxisbeispielen. Hier lernen Sie ganz konkret, wie man mit der Strategie des Responsive Webdesigns Internetauftritte so implementieren kann, dass sie von Desktop-Browsern korrekt dargestellt werden und gleichzeitig für mobile Geräte optimiert werden können. Der Schlüssel zum Erfolg liegt in der Anwendung passender Abfragen mithilfe von Media Queries. Ich möchte Ihnen in diesem Kapitel zwei Varianten eines Layouts präsentieren, die beide von Desktop-Browsern auf Standardmonitoren dreispaltig dargestellt werden. Auf Smartphones dagegen erscheinen sie nach den Empfehlungen für mobiles Webdesign, die wir bereits früher in diesem Studienheft kennengelernt haben, nur noch einspaltig und enthalten weitere Optimierungen für kleine Displays. Beide Layoutvarianten basieren auf dem im vorangegangenen Kapitel erläuterten, zweispaltigen Standardlayout. 6.1 Dreispaltig flüssig (Sidebar auf Smartphones ausgeblendet) Mein erstes Beispiel ist eine Kombination aus einem flüssigen Layout mit festen Komponenten. Die folgende Grafik soll Ihnen das entsprechende Layoutschema veranschaulichen. Es zeigt die sechs DIV-Container mit ihren wichtigsten CSS- Eigenschaften, aus denen dieses Layout aufgebaut ist: Abb. 17: Layoutschema flüssiges Layout 42

43 Ich fasse hier noch mal die wichtigsten Punkte zusammen: Innerhalb des body kommt wie immer zunächst der holder. Dessen Breite ist mit 100% der aktuellen Fensterbreite definiert und repräsentiert damit ein typisches Liquid Layout. Allerdings wird sein flüssiges Verhalten durch die Angabe von min-width:980px; max-width:1200px eingeschränkt: Nur in den durch diese Werte definierten Bereichen für die Breite des Browserfensters kann sich das Layout automatisch anpassen. Wird das Fenster schmaler, reagiert die Seite wie bei einem festen Layout mit width:980px und es erscheinen horizontale Scrollbalken. Wird das Browserfenster breiter, verhält sich das Layout ebenfalls starr mit width:1200px und es erfolgt eine automatische Zentrierung des holder-bereichs mithilfe der auto-werte für linken und rechten Außenabstand. Diese Layoutvariante enthält aber auch feste Komponenten, wie nav und sidebar man könnte sie also auch als flüssig-fest bezeichnen. Dreispaltiges Layout: ein Klassiker wird flüssig gemacht header ist ein einfacher DIV-Container ohne nennenswerte Eigenschaften. nav enthält die Navigation und hat neben einer fixen Breite die wichtige Eigenschaft float:left, d. h., alle weiteren Inhalte fließen rechts um nav herum. Dieses Layoutelement ist also identisch mit dem in unserem Standardlayout und bildet eine der festen Komponenten in diesem sonst flüssigen Layout. sidebar kann zusätzliche Textaufmacher (sog. Teaser ) enthalten und hat neben einer fixen Breite die wichtige Eigenschaft float:right, d. h. alle weiteren Inhalte fließen links um sidebar herum. Dieses Layoutelement bildet die zweite feste Komponente in diesem sonst flüssigen Layout. content hat einen linken und rechten Außenabstand, damit auch nach Ende von nav bzw. sidebar der Eindruck eines dreispaltigen Designs erhalten bleibt (sonst würde ja der Inhalt von content nach dem unteren Ende von nav (bzw. sidebar) wieder ganz links (bzw. rechts) im holder weiterfließen). Der Inhalt von content fließt also bei diesem Layout rechts um nav, sowie links um sidebar herum. Als kleine kosmetische Ergänzung besitzt content noch einen Rand auf seiner linken und rechten Seite. Als zusätzliche Besonderheit enthält content die zwei weiteren Unterelemente container. Diese Behälter mit identischen Eigenschaften dienen nur einem einzigen Zweck: Sie erlauben es, die darin enthaltenen Bilder unterschiedlich (nämlich eines links und das andere rechts) vom Text umfließen zu lassen, ohne dass das gesamte Layout dadurch in Unordnung gerät. Beide nehmen 99% der aktuellen Breite von content in Anspruch, die sich ja in den gesetzten Grenzen mit der Breite des Browserfensters verändern kann. Beide besitzen die Eigenschaft float:right, d. h., sie ordnen sich innerhalb von content immer rechtsbündig an. Da diese DIVs mehrmals im Layout verwendet werden können, werden sie im CSS-Code nicht als kontextbezogene Selektoren deklariert, sondern als Klassen. footer ist wie header ein einfacher DIV-Container, besitzt lediglich noch einen Rand auf seiner oberen Seite. 43

44 Hier sehen Sie den zugehörigen HTML-Code: Abb. 18: HTML-Code flüssiges Layout 44

45 Analysieren wir die wesentlichen Teile dieses HTML-Codes. Beginnen wir mit der CSS-Einbindung: Abb. 19: CSS-Einbindung (vergl. rote Markierung im Gesamtcode) Nach dem obligatorischen Viewport-Tag werden in diesem Beispiel mithilfe von Media Queries drei Stylesheets für unterschiedliche Medientypen eingebunden. In der folgenden Abbildung sehen Sie zunächst den CSS-Code für das Screen-Stylesheet, das für die Darstellung auf Desktop-Browsern geladen wird. Als Abfragekriterium für die Media Queries dient die Angabe media="all and (max-width: 600px)". Der Schwellenwert von 600px hat sich bewährt und wird derzeit (Sommer 2011) in der Fachliteratur und in fast allen Design-Paketen und Frameworks benutzt. Media Queries Schwellenwert: 600px für Smartphones Noch eine Anmerkung zum HTML-Code: Die Seiten wurden mithilfe von Dreamweaver-Vorlagen erstellt. Deshalb enthalten sie entsprechende HTML-Kommentare, mit denen jeweils Beginn und Ende von bearbeitbaren Bereichen definiert werden, wie hier z. B. für den Container Content: <!-- InstanceBeginEditable name="content" --> <!-- InstanceEndEditable --> Die nächste Abbildung zeigt den CSS-Code des Screen-Stylesheets. Ich hoffe, dass Sie auch ohne weiterreichende Erläuterungen einzelner CSS-Codezeilen dieses Beispiel mithilfe der bereits zuvor gegebenen Erklärungen alleine nachvollziehen können. 45

46 46

47 Abb. 20: CSS-Code flüssiges Layout: screen 47

48 Die folgende Abbildung zeigt die Seite mit diesem Layout, wie sie von Firefox auf einem 16:9 Breitbildmonitor im Vollbildmodus dargestellt wird: Abb. 21: Flüssiges Layout im Firefox (1920x1080 Vollbild) Flüssiges Layout Aktion Wie Sie sehen, nimmt hier der holder die ihm maximal zugewiesene Breite von max-width:1200px ein, sodass links und rechts im Browserfenster nicht allzu viel Leerraum übrig bleibt. Die nächste Abbildung zeigt dieselbe Seite, wenn dieses Browserfenster schmaler gemacht wird. Sie können an der Textmenge, die die Bilder umfließt, genau erkennen, dass sich nun in diesem flüssigen Layout auch die Breite des holders angepasst hat. Bei einer weiteren Verringerung der Fensterbreite würden schließlich horizontale Scrollbalken erscheinen, wenn der holder seine Minimalbreite von min-width:980px erreicht hat. 48

49 Abb. 22: Flüssiges Layout im Firefox (schmales Fenster: 1000x1080) Noch ein Hinweis zur Navigation in den beiden Beispielen: Neben dem Home- Link enthält diese Links zu drei Dummy -Unterseiten, um das Beispiel etwas realistischer erscheinen zu lassen. Darunter gibt es einen Link zu dem jeweils anderen Beispiel, d. h., man kann direkt von der Layoutvariante flüssig zu der Layoutvariante fest gelangen, die ich Ihnen im nächsten Abschnitt vorstellen werde. Damit Sie diese Beispiele auch selbst ansehen können, stehen Sie im Internet unter folgendem URL zur Verfügung: 49

50 Mit der nächsten Abbildung kommen wir endlich zum Thema Optimierung Smartphones, denn diese zeigt den CSS-Code für das mobile Stylesheet: 50

51 51

52 Abb. 23: CSS-Code flüssiges Layout: mobile Die Smartphone- Optimierung Wie Sie sehen, sind Stile aus dem Screen-Stylesheet, die hier nicht wirksam werden sollen, erhalten geblieben, damit Sie Änderungen besser nachvollziehen können. Sie wurden jedoch auskommentiert. Lassen Sie uns genau analysieren, welche Styles zusätzlich deklariert worden sind, um die Seite für mobile Geräte zu optimieren. Ich habe wesentliche Teile des CSS-Codes dem Beitrag von Harry Roberts ( entnommen. Er stellt aufgrund seiner universellen Verwendungsmöglichkeit eine Art Instantlösung für die Optimierung mobiler Websites dar: Die Deklaration -webkit-text-size-adjust:none; sorgt im body dafür, dass Texte in allen Webkit-basierten Browsern (also Safari auf dem iphone und Chrome auf Android-Smartphones) automatisch in einer optimalen Größe angezeigt werden. 52

53 Ein Innenabstand von 5 Pixeln (padding:5px) sorgt dafür, dass die Inhalte nicht den Rand des Displays berühren. Das Layout wird mit clear:both und float:none konsequent linearisiert, d. h., alle vorhandenen Floats werden aufgehoben die DIV-Container erscheinen nacheinander in der Reihenfolge, wie das zugehörige HTML- Markup im Quellcode. Alle DIV-Container im gesamten Layout erhalten eine Breite von 100%, d. h., sie nehmen die gesamte Breite des jeweiligen Displays ein abzüglich der 10 Pixel (5 Pixel Innenabstand auf jeder Seite!) Um den auf kleinen Displays zur Verfügung stehenden Platz optimal zu nutzen, werden die überflüssigen Außen- und Innenabstände aller Layout-Container auf Null gesetzt (margin:0; padding:0). Es ist heute allgemein üblich, Navigationselemente in einen Container namens nav zu stellen und als ungeordnete Liste auszuzeichnen (#nav ul). Damit die zugehörigen Listenelemente auf Smartphone-Displays gut dargestellt werden, hebt Harry Roberts auch bei diesen alle gegebenenfalls vorhandenen Floats auf. Dadurch werden sogar die Elemente einer im Screen- Stylesheet gegebenenfalls horizontal gemachten Hauptnavigation wieder vertikal nacheinander dargestellt (dies ist bei unserem Layout natürlich nicht erforderlich, ich habe die Codezeile jedoch trotzdem stehen lassen, um die Quelle vollständig zu zitieren). Im linearisierten Layout wird nav als erstes Element erscheinen. Darum wird lediglich ein unterer Außenabstand von 20px benötigt, um die Navigation vom eigentlichen Content abzugrenzen. Mit display:block erhalten die Navigationslinks eine größere aktive Fläche ( Hit Area ). Damit alle Bilder nach der bereits früher beschriebenen Methode der Fluid Images auch auf kleinen Displays korrekt dargestellt werden, erhalten sie folgende Eigenschaften: img,.img-leftfloat,.img-rightfloat{ max-width:100%; height:auto; float:none; margin:0; } Für alle DIV-Container im Layout werden nun folgende Regeln festgesetzt: #holder, #header, #content, #nav, #sidebar, #footer,.container { clear:both; display:block; width:100%; float:none; margin:0; padding:0; } Alle Floats werden aufgehoben und die Container erhalten immer die volle Breite des Gerätemonitors. Überflüssige Innen- und Außenabstände werden eliminiert. 53

54 In unserem speziellen Fall muss das mobile Stylesheet außerdem noch durch folgende Regeln ergänzt werden: #sidebar { display: none; } #sidebar ul { display: none; } Aufgrund der Position des HTML-Markups für sidebar im HTML-Dokument würde in dem für Smartphones linearisierten Layout dieser Container unmittelbar nach der Navigation dargestellt werden. Das ist unerwünscht, denn die Nutzer müssten nicht nur über die Navigationselemente scrollen, sondern auch noch über die Liste mit den Teasertexten, bis endlich der eigentliche Content erscheint. Deshalb bleibt nur eine Möglichkeit: Der Container sidebar samt Inhalt muss komplett ausgeblendet werden, wenn die Seite von einem Smartphone-Bildschirm dargestellt wird. Zusätzlich wird auch noch eine Regel für die Pseudoklasse #nav a:active deklariert. Wie ich Ihnen bereits bei dem Vergleich zwischen Smartphoneund Desktop-Browsern erklärt habe (s. Tabelle im ersten Teil des Studienhefts), gibt es auf Touchscreens keine MouseOver-Ereignisse. Die Pseudoklasse #nav a:active ist also wirkungslos. Stattdessen kann man durch Deklaration der Pseudoklasse #nav a:active die Links wenigstens mit denselben Eigenschaften darstellen, während ein User diese tappt. Und so sieht unsere Seite schließlich auf dem iphone im Portrait-Modus aus. Der Screenshot wurde mit einem App auf dem iphone erstellt, das sinnvollerweise die Seite in ihrer gesamten Länge darstellt: 54

55 Abb. 24: Flüssiges Layout auf dem iphone (Portrait) 55

56 Zum Vergleich ein Screenshot von der Darstellung im Android-Emulator (s. Kapitel über Emulatoren am Ende dieses Studienhefts): Abb. 25: Flüssiges Layout im Android-Emulator (2.2) Landscape Hier noch ein Hinweis: Wenn Sie sich das Beispiel im Firefox auf dem Desktop- PC ansehen, können Sie live den Wechsel des Layouts verfolgen: Ziehen Sie das Browserfenster immer schmaler. Wird der Viewport schließlich schmaler als 600 Pixel, hält sich Firefox für ein Smartphone und lädt das mobile Stylesheet: das Layout wird einspaltig. Verringern Sie die Breite noch weiter, können Sie außerdem sehr schön das Verhalten der Fluid Images beobachten. Zuletzt möchte ich Ihnen noch einige weitere Optimierungsmöglichkeiten für mobile Webseiten erklären, die nicht im CSS-, sondern im HTML-Code vorgenommen werden müssen. Ein Detail haben Sie vielleicht schon in der Abbildung des HTML-Codes für unsere eben besprochene flüssige Layoutvariante bemerkt, dessen Erklärung ich Ihnen aber bisher vorenthalten habe. Es geht um folgende Codezeile im head: <link rel="apple-touch-icon" href="images/kugel.png" > 56

57 Dabei handelt es sich um einen Befehl, der ausschließlich von iphones interpretiert wird. Man kann damit den Link auf das Apple Touch Icon setzen: Ein 57x57px großes Icon in png-format, das von iphones als eine Art von Bookmark auf dem Home-Bildschirm angelegt wird, wenn ein User dies wünscht. Das Icon erscheint dann auf dem Screen des iphones mit dem gleichen Erscheinungsbild, wie die bekannten Icons von nativen Apps. Falls Sie ein iphone besitzen, können Sie das mit unserer Beispielseite selbst ausprobieren, die ja bekanntlich online unter dem URL zur Verfügung steht. Es gibt aber noch weitere HTML-Befehle, die man bei der Optimierung für mobile Geräte verwenden kann. Mit folgendem Link können Telefonnummern auf Webseiten so dargestellt werden, dass man diese nur tappen muss, um sie mit seinem Smartphone sofort anzuwählen: <a href="tel: ">(0123) </a> Die Struktur dieses speziellen Link-Tags mit dem Schlüsselwort tel erinnert natürlich an den bekannten Maillink, den es natürlich auch auf mobilen Webseiten gibt: <a Links und Textfelder: Extras für Smartphones Wird dieser Link getappt, startet erwartungsgemäß sofort das Mail-App des Smartphones. Während Maillinks auf Desktop-Browsern nicht immer funktionieren, weil nicht alle User ein Mailprogramm installiert und konfiguriert haben, klappt das auf Smartphones gut, da ja ein Mail-App zur Standardsoftware gehört. Nun möchte ich Ihnen noch zwei spezielle Textfelder für Formulare auf Webseiten für Smartphones vorstellen: <input type="text" name="textfield3" id="textfield3"> <input type="tel" name="textfield" id="textfield"> <input type=" " name="textfield2" id="textfield2"> Die erste Codezeile zeigt das bekannte Standardtextfeld. In den beiden nächsten Zeilen sehen Sie spezielle Eingabefelder für Telefonnummern bzw. Mailadressen. Der Vorteil dieser Textfelder besteht darin, dass auf Smartphones automatisch kontextabhängige Keyboards angezeigt werden, sobald ein Nutzer so ein Feld tappt. Im Fall des Telefonfelds erscheint also eine virtuelle Tastatur mit Zahlen, während man beim Mailfeld eine Tastatur erhält, auf der neben Buchstaben automatisch auch angeboten wird. Man kann dieses Verhalten nicht in einem Screenshot erfassen, denn die virtuellen Tastaturen gehören nicht zur Website und werden deshalb nicht dargestellt. Dasselbe gilt für das durch Telefon- und Maillinks ausgelöste Verhalten der Smartphones. Ich habe deshalb alle in diesem Abschnitt vorgestellten Tags zum Testen auf der Seite eingebaut, die in meinem Beispiel mit dem Dummy-Link Drei erreicht werden kann. 57

58 6.2 Dreispaltig fest (Sidebar auf Smartphones am Seitenende) Mein zweites Beispiel ist ein durchgehend festes Layout. Die folgende Grafik soll Ihnen das zugehörige Layoutschema veranschaulichen. Es zeigt die sechs DIV- Container mit ihren wichtigsten CSS-Eigenschaften, aus denen dieses Layout aufgebaut ist: Abb. 26: Layoutschema festes Layout Ich fasse hier noch mal die wichtigsten Punkte zusammen: Innerhalb des body kommt zunächst der holder mit fester Breite von 980px und automatischer Zentrierung mithilfe der auto-werte für linken und rechten Außenabstand. header ist ein einfacher DIV-Container ohne nennenswerte Eigenschaften. nav enthält die Navigation und hat neben einer fixen Breite die wichtige Eigenschaft float:left, d. h., alle weiteren Inhalte fließen rechts um nav herum. Dieses Layoutelement ist wieder identisch mit dem in unserem Standardlayout. sidebar kann zusätzliche Textaufmacher (sog. Teaser ) enthalten und hat neben einer fixen Breite die wichtige Eigenschaft float:right, d. h., alle weiteren Inhalte fließen links um sidebar herum. Dieses Layoutelement ist identisch zu der sidebar im ersten Praxisbeispiel. 58

59 content hat hier eine feste Breite von 638px. Damit ist in diesem Layoutbeispiel nicht nur der holder fest, sondern auch darin alle enthaltenen Unterkomponenten. Selbstverständlich müssen sich die Breiten aller Unterkomponenten zur Gesamtbreite des holder addieren, wobei, wie Sie ja wissen, nach dem CSS-Box-Modell auch die Werte für Außen- und Innenabstände sowie von Rahmenlinien berücksichtigt werden müssen. Bemerkenswert ist bei diesem Layout, dass hier content auch die Eigenschaft float:left besitzt. Wir haben es hier also mit einem Beispiel für mehrere Elemente mit float:left zu tun. Wie Sie bereits in meinem Beispiel mit mehreren Containern der Klasse lefty gelernt haben, ordnen sich diese normalerweise problemlos nebeneinander an. Auch hier enthält content wieder die Unterelemente container. footer ist wie header ein einfacher DIV-Container, besitzt lediglich noch einen Rand auf seiner oberen Seite. Hier sehen Sie den zugehörigen HTML-Code: 59

60 Abb. 27: HTML-Code festes Layout Analysieren wir die wesentlichen Teile dieses HTML-Codes. Beginnen wir mit der CSS-Einbindung: Abb. 28: CSS-Einbindung (vgl. rote Markierung im Gesamtcode) Nach dem obligatorischen Viewport-Tag wird in diesem Beispiel nur das einzige Stylesheet mystyles.css eingebunden. Dadurch ist auch nur ein einziger http- Request notwendig, was zur Verbesserung der Performance beiträgt. In diesem Stylesheet wird der Code für die mobile Optimierung in angegeben. Als Abfragekriterium für die Media Queries dient, wie schon beim ersten Praxisbeispiel, die Angabe all and (max-width: 600px). Der CSS-Code selbst ist nahezu derselbe, den ich bereits im ersten Beispiel ausführlich erläutert habe. Ausnahme: Hier fehlt das Ausblenden der Sidebar und ihres Inhalts. Warum das hier nicht benötigt wird, erkläre ich Ihnen sofort: Wieder fest statt flüssig: Alles hat seinen Preis Was ist denn eigentlich der Vorteil dieses Layouts im Vergleich zu dem ersten Praxisbeispiel? Im ersten Praxisbeispiel mussten wir den Container sidebar für Smartphones komplett ausblenden. Aufgrund der Position des zugehörigen HTML- Markups im HTML-Dokument wäre in dem für Smartphones linearisierten Layout der Container sidebar sonst unmittelbar nach der Navigation (nav) dargestellt worden. Ausblenden war hier also die Methode der Wahl. Im aktuellen Beispiel ist die Position des HTML-Markups von sidebar nach content. Damit wird es möglich, den Inhalt von sidebar auch Smartphone- Usern zugänglich zu machen: Diese Inhalte erscheinen am Ende der Seite, d. h. wer sie lesen möchte, muss scrollen kann aber trotzdem schneller an den eigentlichen content heran. Manche Webseiten-Entwickler-/innen fordern sogar, dass die gesamte Hauptnavigation bei der Darstellung auf Smartphones an das Ende der Seite verbannt werden sollte, damit die Nutzer sofort den eigentlichen Inhalt lesen können. Um die entsprechenden Container also beliebig mithilfe entsprechender Styles im mobilen Stylesheet an andere Stellen im Layout bewegen zu können, reicht es 60

61 nicht, mit unterschiedlichen Float-Konzepten zu arbeiten, denn bei der Darstellung in Desktop-Browsern muss die Navigation natürlich weiterhin in einer Spalte links vom Content bleiben. Man benötigt dazu vielmehr eine ausgeklügelte Kombination aus absoluter und relativer Positionierung. Auch zu diesem Thema finden Sie natürlich wieder weiterführende Informationen in der Fachliteratur und im Internet. Beachten Sie bitte im HTML-Code die Zuweisung der Klasse break-before zur zweiten h3-überschrift. Wir kommen im Abschnitt über Print-Optimierung darauf zurück. Die nächste Abbildung zeigt das Stylesheet, jedoch aus Gründen der Übersicht zunächst ohne d. h. nur den Teil, der für die Darstellung auf normalen Bildschirmen relevant ist: 61

62 62

63 Abb. 29: Das Stylesheet Die folgende Abbildung zeigt die Seite mit diesem Layout, wie sie von Firefox auf einem 16:9 Breitbildmonitor im Vollbildmodus dargestellt wird: Abb. 30: Festes Layout im Firefox (1920x1080 Vollbild) Wenn Sie dieses Bild mit der entsprechenden Vollbild-Darstellung unseres ersten Praxisbeispiels (das mit dem flüssigen Layout ) vergleichen, erkennen Sie sicherlich sofort den Unterschied anhand der Textmenge, die die Bilder umfließt: Hier nimmt der holder stets die ihm maximal zugewiesene Breite von 980px ein, 63

64 sodass links und rechts im Browserfenster wesentlich mehr Leerraum entsteht. Dieser Nachteil wird aber durch einen Vorteil wieder gut gemacht, wie Sie gleich sehen werden. Die nächste Abbildung zeigt den Teil des CSS-Codes, in dem die Optimierung für Smartphones vorgenommen wird, d. h. den Code-Bereich all and (max-width: 600px): Abb. 31: für Smartphones 64

65 Hier sehen wir die Darstellung der Seite im Android-Emulator (s. Kapitel über Emulatoren am Ende dieses Studienhefts). Abb. 32: Festes Layout im Android-Emulator (Portrait, sidebar am Seitenende) Dieser Screenshot zeigt bewusst nur das untere Ende der Seite. Hier erscheint jetzt die ehemalige Sidebar mit den Teasertexten als Seitenabschluss! Bei dieser Layoutvariante mussten wir ja sidebar mit seinen Inhalten nicht ausblenden und können den Nutzern die Teasertexte wenigstens grundsätzlich zugänglich machen. 65

66 In der nächsten Abbildung möchte ich Ihnen zur Abwechslung einmal ein echtes Smartphone zeigen, auf dem gerade das Beispiel mit dem festen Layout angezeigt wird. Es handelt sich um ein HTC Desire: Abb. 33: Festes Layout auf einem HTC Desire (Portrait) Damit können wir die Betrachtung unserer Praxisbeispiele in Bezug auf die Optimierung für mobile Geräte abschließen und wenden uns zur Abrundung des Themas medienspezifische Stylesheets noch kurz der Printoptimierung zu. 6.3 Stylesheets für Print Ich möchte nicht unser Hauptthema Webdesign für Smartphones zu sehr mit anderen Themen überfrachten. Es bietet sich jedoch an, Ihnen anhand unseres letzten Praxisbeispiels wenigstens kurz die wichtigsten Techniken zu erläutern. Die Vorgehensweise ist ja ganz analog: In einem print werden die CSS-Regeln untergebracht, die speziell für den Druck gelten sollen. Sehen wir uns diesen Bereich an: 66

67 Abb. 34: für Print 67

68 Ich denke, ich darf an dieser Stelle des Studienhefts davon ausgehen, dass Sie die meisten dieser Styles auch ohne Erklärung verstehen. Deshalb hier nur einige kurze Hinweise Keine Hexerei: Webseiten auf Papier Zunächst werden mithilfe des globalen Selektors * alle Außen- und Innenabstände auf Null gesetzt. Dann werden die Hintergrundfarben für body und den header entfernt. Für den Druck wird die Schrift Times New Roman in der Größe 12 pt mit Zeilenabstand 18 pt eingestellt. Wenn es um den Druck geht, spielen andere Einheiten eine Rolle: Während wir bei den Angaben für Bildschirme Pixel und Prozent verwendet haben, kommen hier Zentimeter (für Breitenangaben) und Punkt (für Schriftgrößen und Abstände) zum Einsatz. Alle Floats bei Containern und bei Bildern werden aufgehoben, d. h., ähnlich wie bei der Optimierung für Smartphones erscheinen diese Elemente linear nacheinander. Neu ist die Klasse break-before mit der Eigenschaft page-break-before, für die in diesem Fall der Wert always; gewählt wurde. Ich hatte Sie bei der Erklärung des HTML-Codes darauf aufmerksam gemacht, dass diese Klasse der zweiten h3-überschrift zugewiesen worden ist. Als Konsequenz wird beim Drucken vor dieser Überschrift immer ein Seitenumbruch vorgenommen. Meistens wird auf gedruckten Webseiten die Navigation als nutzlose Papierverschwendung empfunden. Darum wird der Container nav mit display:none; hier einfach ausgeblendet. 68

69 Sehen wir uns nun an, wie die Druckvorschau für unsere Seite im Firefox aussieht: Abb. 35: Druckvorschau für das feste Layout Wie Sie sehen, kann man mit ganz einfachen Mitteln erreichen, dass Webseiten auch im Ausdruck gut aussehen. Weitere Details zur Druckoptimierung finden Sie in zahlreichen Tutorials im Internet. 69

70 6.4 Zusammenfassung Bei bestimmten Konstellationen der Container werden bei der Linearisierung des Layouts im Rahmen der Optimierung für mobile Geräte unnötige Inhalte zuerst dargestellt. Diese müssen dann auf Smartphones mithilfe entsprechender CSS-Stile ausgeblendet werden. Es sind aber auch Layoutvarianten möglich, bei denen weniger wichtige Inhalte auf Smartphones am Seitenende angezeigt werden und so den Nutzern bei Bedarf trotzdem zur Verfügung stehen. Im Rahmen der Optimierung für mobile Geräte können im HTML-Code spezielle Befehle verwendet werden: Telefon- und Maillinks, sowie entsprechende Textfelder für Telefonnummern und Mailadressen. Man kann auf normalen Desktop-Browsern das Verhalten von Layouts live nachvollziehen, die mithilfe von Media Queries nach dem Prinzip des Responsive Webdesigns implementiert worden sind. Die wichtigsten Optimierungen für den Ausdruck von Webseiten betreffen Eingriffe in das Layout (z. B. Linearisierung), geänderte Maßeinheiten für Schriftgrößen und Abstände, Ausblenden überflüssiger Inhalte sowie die Definition von Seitenumbrüchen. A III. Aufgabe zur Selbstüberprüfung Überprüfen Sie nun bitte Ihre Kenntnisse. Lösen Sie die nachfolgenden Aufgaben bitte schriftlich und vergleichen Sie Ihre Lösungen mit den Musterlösungen im Anhang. Es ist in Ihrem eigenen Interesse, die Aufgaben selbstständig zu lösen, ehe Sie im vorausgehenden Text oder Anhang nachschlagen. A 1. Gehen Sie bitte von einem sehr einfachen, zweispaltigen Layout aus (basierend auf dem Standardlayout aus dem Kapitel CSS-Layout jedoch ohne Header und Footer). Entwickeln Sie aus diesem festen Layout ein Layout, das sich zwischen 500px und 800px flüssig verhält. 70

71 7 Dreamweaver, Pakete und Frameworks Lernziel: Ich möchte Ihnen in diesem Kapitel demonstrieren, wie der beliebte Webeditor Dreamweaver in seiner aktuellen Version CS6 (Sommer 2011) Optimierungen für das mobile Web unterstützt. Es ist ohnehin nicht notwendig, Das Rad immer wieder neu zu erfinden. Das Wissen und die Erfahrung vieler kompetenter Webdesigner stehen in Form sogenannter Pakete und Frameworks zur Verfügung, die im Internet kostenlos heruntergeladen werden können. Bereits in der vorigen Hauptversion Dreamweaver CS5 gab es bei Dreamweaver selbstverständlich bereits eine hervorragende Unterstützung für HTML 5 und CSS 3.0. Durch das immense Wachstum auf dem Markt für mobile Geräte und dem damit verbundenen großen Interesse der professionellen Webdesigner an diesem Thema sah sich der Hersteller Adobe offensichtlich veranlasst, diese Zwischenversion herauszubringen. Pakete und Frameworks basieren heute auf HTML 5 und enthalten eine ganze Reihe von Dateitypen, die für die Entwicklung professioneller Websites erforderlich sind, d. h. in erster Linie HTML-, CSS- und JavaScript-Dateien. Diese Vorlagen wurden sorgfältig nach den neuesten Gesichtspunkten modernen Webdesigns entwickelt. Setzt man derartige Pakete ein, ist man als Webseiten-Entwickler/-in auf der sicheren Seite. Die auf dieser Grundlage entwickelten Websites funktionieren browserübergreifend, sind geschwindigkeitsoptimiert, erfüllen die Anforderungen der Barrierefreiheit, sorgen für schöne Ausdrucke und funktionieren außerdem auch noch auf Smartphones. Die mobile Internetrevolution hat derzeit nochmal an Fahrt aufgenommen: Die ständig steigende Zahl der Nutzer von Android- und Apple-Smartphones bzw. Tablets laden weltweit Milliarden Apps pro Monat herunter. Fachleute vermuten ein Anhalten dieses Trends und erwarten bis zum Jahr 2016 zehn Milliarden internetfähige Mobilgeräte. Im Vergleich zu heute werden diese Geräte ein 50- faches Datenvolumen verursachen. Diese Datenmenge wird jedoch überwiegend nicht in den mobilen Browsern, sondern in mobilen Apps verarbeitet werden, denn die Nutzer ziehen immer mehr echte mobile Apps den einfachen mobilen Webdiensten vor. Die hier vorgestellten Pakete vereinfachen und unterstützen das Design mobiler Webseiten. Mit den Frameworks dagegen wird die Entwicklung mobiler Apps auf der Basis bekannter Webtechnologien (HTML 5, CSS3, JavaScript) erheblich beschleunigt: Webentwickler können dank dieser Frameworks ihr vorhandenes Know-how in diesen Sprachen nutzen, um im Handumdrehen native Apps für Smartphones und Tablets zu produzieren. 7.1 Adobe Dreamweaver CS6 Die Programmversion CS5.5 bietet tatsächlich einige bemerkenswerte Innovationen, die den Designprozess für das mobile Web erheblich erleichtern und beschleunigen. Diese Funktionen wurden in der Version CS6 noch weiter verbessert. Um diese neuen Tools effektiv einsetzen zu können, sollte man allerdings immer genau wissen, was man tut aber wenn Sie dieses Studienheft bis hierher durchgearbeitet haben, sind Sie für den Einsatz dieser Werkzeuge gut vorbereitet. Die neuen Funktionen lassen sich am leichtesten nachvollziehen, wenn man sie anhand eines unserer Praxisbeispiele aus diesem Studienheft analysiert. Ich habe 71

72 dazu die Layoutvariante flüssig als neue Website in Dreamweaver importiert. Wenn man dann beispielsweise die Startseite im Editor öffnet und anschließend den neuen Menübefehl Einfügen>Media Queries wählt, erscheint folgendes Dialogfenster (in der aktuellen Testversion nur auf Englisch verfügbar): Abb. 36: Verwaltung der Media Queries in Dreamweaver CS6 Wie Sie sehen, werden hier bereits alle wichtigen Daten angezeigt, die in dem Code ja bereits manuell eingefügt worden waren: die für die Seite relevanten Stylesheets mit den zugehörigen Abfragen und Schwellenwerten. Auch das vorhandene Meta-Tag viewport wird hier durch die aktivierte Checkbox bei Force devices to report actual width angezeigt. Hat man, wie in unserem Fall, diese Daten noch nicht eingegeben, kann dies ganz einfach mithilfe der angebotenen Dialogfelder erfolgen. So könnte man hier leicht mit einem Klick auf das + ein weiteres Stylesheet z. B. mit einem speziellen Layout für Tablets samt zugehörigen Media Queries anfügen. Eine hervorragende Übersicht über den aktuellen Stand eines Projekts bietet die neue Funktion Multiscreen-Preview, für die es jetzt eine neue Schaltfläche neben den bereits bekannten Ansichten Code, Teilen, Entwurf, Live-Ansicht gibt. Für unser Beispiel erhält man folgendes Bild: 72

73 Abb. 37: Multiscreen-Preview in Dreamweaver CS6 Für alle heute verbreiteten Medientypen, nämlich Phone, Tablet und Desktop wird genau das Layout angezeigt, das mithilfe von Media Queries und den zugehörigen Stylesheets definiert worden ist. Da in unserem Fall für Tablets kein separates Stylesheet existiert, wird hier ebenfalls das Screen-Stylesheet angewandt: Auf Tablets erscheint dasselbe dreispaltige Layout, wie auf Desktop-Monitoren, was völlig akzeptabel ist. Selbstverständlich könnte man hier mithilfe eines separaten Stylesheets und entsprechender Media Queries aber auch spezielle Optimierungen für Tablets vornehmen. Darüber hinaus bietet Dreamweaver CS6 auch Designvorlagen für mobile Websites, die auf einer mobilen Variante des bekannten JavaScript-Frameworks jquery und den zugehörigen Stylesheets basieren. Die damit erstellten mobilen Webseiten weisen ein Look&Feel wie native Apps auf, d. h., es gibt beispielsweise animierte Seitenübergänge mit einem Slide-Effekt. Wie folgende Abbildung zeigt, existieren drei Typen von Startvorlagen für Smartphones: Dreamweaver CS 5.5 hat alles schon an Bord 73

74 Abb. 38: Mobile jquery-vorlagen in Dreamweaver CS6 Bei der Variante CDN liegt der jquery-code auf einem Server, sodass man stets auf die aktuelle Version zugreift. Bei Local wird der Code lokal zusammen mit dem eigenen Quellcode gespeichert. Die Integration von PhoneGap ermöglicht bei der dritten Variante sogar die spätere Umwandlung der erstellten Inhalte in echte, native Apps. 7.2 Pakete für mobile Websites Ein besonders populäres Paket ist das HTML5-basierte Boilerplate: Das englische Wort Boilerplate bedeutet übersetzt nicht nur Kochplatte, sondern komischerweise auch Textbaustein und Vorlage. Die beiden letzteren Bedeutungen erklären, was hier gemeint ist. Boilerplate ist eine HTML-5-Vorlage für neue Webprojekte und bietet neben einer HTML-Vorlage für die Startseite (index.html) eine große Fülle an weiteren Bausteinen und Dateien ( html5boilerplate.com): Eine CSS-Datei, mit vielen interessanten und nützlichen Snippets ( Code- Schnipsel) eine.htaccess-datei (Konfiguration für den Apache-Webserver, Alternativen für andere Server ebenfalls vorhanden) robots.txt (Datei zur Steuerung der Suchmaschinencrawler) favicon.ico (Favicon von Boilerplate, das man durch das eigene ersetzten muss) 74

75 404.html (Basis für eigene 404-Fehlerseite) apple-touch-icon.png (Icon für das iphone-bookmark auf dem Homescreen, das man durch das eigene ersetzten muss Hinzu kommen die bekannten JavaScript Frameworks jquery und Modernizr sowie das JavaScript Unit Testing Framework QUnit. Zusätzlich demonstriert eine vollständige Demo die Leistungsfähigkeit des Pakets. Die Vorlage für die Startseite fängt mithilfe eine Reihe von Conditional Comments die bekannten Bugs der älteren Versionen des Internet Explorers ab, die sonst die Webdesigner zur Verzweiflung bringen. Die CSS-Datei beginnt mit einem Reset, d. h. dem Zurücksetzen aller Formatierungen auf eine einheitliche Basis. Dann folgen zahlreiche nützliche Klassen und Snippets, auf die man bei Bedarf in seinem Projekt zurückgreifen kann. Zuletzt stehen für mobile Browser und für den Druck, die mithilfe von Media Queries angesprochen werden können, zur Verfügung. Pakete und Frameworks: Man muss das Rad nicht neu erfinden! Eine besondere Rolle spielt Centurion ( Die Stärken dieses Systems liegen in der schnellen Entwicklung von Website-Prototypen für Responsive Webdesign dem sog. Rapid Responsive Prototyping. Centurion nutzt den CSS-Preprozessor SASS und setzt auf die in diesem Studienheft eingeführten Media Queries. Mit Centurion lassen sich auch sehr schnell Themes (d. h. Vorlagen) für alle gängigen Content-Management- und Blog-Systeme entwickeln. 7.3 App-Baukästen und Frameworks Moderne Smartphones mit ihren Touchscreens stellen besonders hohe Anforderungen an das Webdesign in Bezug auf den Bedienungskomfort. Das ist nicht so einfach zu realisieren, denn die von Fingern ausgelösten Touch-Ereignisse auf den kleinen Monitoren haben nicht dieselbe Präzision, wie der Mauscursor auf einem normalen PC-Monitor. Smartphones haben auch eine geringere Rechenleistung als ein schneller PC oder Mac und reagieren daher etwas langsamer. Die User wünschen sich aber trotzdem realistisch animierte Benutzeroberflächen. Inzwischen stehen viele Frameworks zur Verfügung, die diese Anforderungen an einen hohen Bedienungskomfort auf unterschiedliche Weise gelöst haben und gleichzeitig die Entwicklung Cross-Plattform-fähiger mobiler Anwendungen erheblich vereinfachen. Einige sollen hier kurz vorgestellt werden. Sproutcore Touch ( ist ein quelloffenes, kostenloses Framework für die Implementierung anspruchsvoller Webdienste und mobiler Apps. Es besitzt gleichermaßen die Funktionalität vollwertiger Desktop-Anwendung, wie die Flexibilität von Cloud-Lösungen. SproutCore bietet eine komfortable Unterstützung bei der Umsetzung von Touch-, Drag und Pinch-Gesten. Implementiert wird dies mithilfe einer Bibliothek von JavaScript-Objekten und -Methoden. Es ermöglicht Webentwicklern, die Geschwindigkeit normaler Desktop-Anwendungen auf der Basis von HTML 5-Webseiten zu realisieren, ohne bei der Benutzerführung Kompromisse eingehen zu müssen. Das Framework zeichnet sich durch einen kompakten und effizienten Quellcode aus. Ein Referenzprojekt ist der deutsche Dienst Bong.TV. Sencha Touch 2 ( ist ein kostenloses Framework für mobile Apps, dessen Entwicklungswerkzeuge allerdings kostenpflichtig sind (z. B. die grafische Entwicklungsumgebung Sencha Architect 2 oder ein 75

76 Eclipse-Plugin). Sencha Touch ist sehr leistungsfähig und implementiert mobile Apps unter Verwendung der bekannten Webtechnologien HTML5, CSS3 und JavaScript. Die aktuelle Version unterstützt dabei unter anderem bereits HTML5- Elemente für Audio und Video, CSS3-Animationen und adaptive Layouts. Phonegap ( wurde bereits im Zusammenhang mit Dreamweaver erwähnt, weil es vollständig in die aktuelle Version dieses beliebten Webeditors integriert wurde. Das Framework eignet sich für die Entwicklung mobiler Apps und setzt ebenfalls auf die bewährte Kombination aus HTML5, CSS3 und JavaScript auf. Phonegap unterstützt native Eigenschaften mobiler Geräte nahezu aller Anbieter wie z. B.: Kameras, Kompass, Geolocation, Netzwerk, Adressbuch, Accelerometer, Vibrationsalarm. Ein bekanntes Referenzprojekt für Phonegap ist die offizielle App von Wikipedia. Phonegap ist für eine private App und bis zu 100 Übersetzungsvorgänge (Kompilierungen) pro Monat kostenlos. Weitere Frameworks, auf die hier nicht im Detail eingegangen werden kann, sind: LungoJS ( Jo ( Joshfire ( und Appspresso ( In die gleiche Richtung zielt das Paket jquery mobile die aktuelle Version für mobile Geräte des allgemein anerkannten und etablierten JavaScript-Frameworks jquery ( Sie haben ja bereits erfahren, dass dieses Paket vollständig in die aktuelle Version des Webeditors Adobe Dreamweaver CS6 integriert worden ist. 7.4 Zusammenfassung Dreamweaver CS6 unterstützt die Verwendung von Media Queries und bietet mit dem Multiscreen-Preview einen guten Überblick bei der Optimierung für mobile Geräte. Dreamweaver CS6 enthält Designvorlagen, die auf dem Framework jquery mobile basieren. Die Integration von PhoneGap ermöglicht die Umwandlung mobiler Webseiten in native Apps. Die Pakete Boilerplate und 320 and up bieten einen bequemen Einstieg für Webdesigns auf der Grundlage von HTML 5. Frameworks wie SproutCore Touch, Sencha Touch, Phone Gap, jquery mobile usw. bieten komfortable Unterstützung bei der Realisierung von Touch-, Drag und Pinch-Gesten. 76

77 8 Tests und Emulatoren Lernziel: Eine wichtige Aufgabe von Webdesignern am Ende des Entwicklungsprozesses war immer schon das sorgfältige Testen von Websites auf verschiedenen Plattformen und mit unterschiedlichen Browsern. Das ist nach der Optimierung für das mobile Web natürlich nicht anders. Natürlich ist es am sichersten und aussagekräftigsten, wenn man mobil optimierte Websites mit der echten Hardware, d. h. mit den realen Smartphones testet. Allerdings werden aus Kostengründen bei Weitem nicht alle Webdesigner eine Sammlung sämtlicher Smartphones auf dem Markt selbst besitzen, um diese Tests in dieser Weise durchführen zu können. Ein eigenes Smartphone (iphone oder Android) ist sicher ein Muss und mithilfe von Emulatoren ist es darüber hinaus trotzdem möglich, die mobil optimierte Website auch auf den anderen Plattformen zu testen. Ich möchte Ihnen deshalb hier einen kurzen Überblick über die verfügbare Emulationssoftware geben. 8.1 iphone-emulation Voraussetzung für die Nutzung der iphone-entwicklungsumgebung (SDK= Software Development Kit ) ist die kostenlose Registrierung als Apple-Entwickler. Anschließend haben Sie Zugriff auf das Software-Paket ios SDK 4, mit dem native Applikationen für ipad, iphone und ipod touch entwickelt werden können, zu dem aber auch ein iphone-simulator gehört ( Erwartungsgemäß gibt es ios SDK 4 nur für den Mac. Der Simulator verhält sich tatsächlich wie ein richtiges iphone. Allerdings sind nur die nötigsten Applikationen installiert. Nichts geht ohne Emulatoren: Wer hat schon mehr als ein Smartphone Leider auch nur für den Mac verfügbar ist iphoney ( Dieser iphone-emulator, ermöglicht es Applikationen, aber natürlich auch Webseiten auf ihre iphone-kompatibilität zu prüfen. Der iphoney- Emulator kann gedreht werden, um Webseiten im Portrait- oder Landscape-Format anzeigen zu lassen. Leider gibt es keine Möglichkeit, das iphone vollständig unter Windows zu emulieren. Unter findet man einen iphone-emulator für Windows, der die meisten Merkmale von Webseiten zumindest sehr ähnlich zu einem echten iphone darstellt. 8.2 Android-Emulation Der kostenlose Android-Emulator von Google funktioniert unter Windows, Mac OS X und Linux ( Einzige Voraussetzung ist die Installation der vollständigen Java-Entwicklungsumgebung (JDK). Die Java- Runtime-Umgebung (JRE) alleine reicht hier nicht aus. Ansonsten gestaltet sich die Installation und Nutzung des Android-Emulators unproblematisch. Es lassen sich Smartphones mit den Android-Versionen 2.1-update1, 2.2 und sowie auch schon Tablets mit Android 3.0 testen. Lediglich die Funktion zum Wechseln des Emulators zwischen Portait- und Landscape-Format ist etwas versteckt und ich möchte sie Ihnen deshalb hier verraten: Der Num-Modus der Tastatur muss abgeschaltet werden (Kontrollleuchte Num aus): Dann dient die Taste 7 auf dem Ziffernblock zur Umschaltung der Orientierung. 77

78 8.3 Opera Mobile Emulation Ganz ohne vorherige Installation von SDKs funktioniert der Emulator für Opera Mobile 10 und der Opera Widgets Mobile Emulator. Hier läuft nicht ein vollständiges virtuelles Smartphone mit seinem mobilen Browser. Stattdessen bietet Opera eine simple, aber völlig zufriedenstellende Lösung, bei der Webseiten exakt genau so dargestellt werden, wie von der echten mobilen Browserversion ( Wenn Sie die Anwendung zum ersten Mal starten, sehen Sie den sogenannten Launcher: Dieser erlaubt Ihnen, unterschiedliche Instanzen von Opera Mobile mit verschiedenen Konfigurationen (Orientierung, Auflösung) zu generieren. Es sind aber bereits fertige Smartphone-Profile für HTC Hero, HTC Desire, usw. mitgeliefert, die Sie sofort anwenden können. Ein interessanter Effekt lässt sich mit diesem Emulator studieren: Er verhält sich im Prinzip wie ein normales Browserfenster: Nachdem man ein bestimmtes Profil aufgerufen hat, sieht man die Webseite wie auf dem zugehörigen Smartphone. Dann kann man aber jederzeit die Fenstergröße ändern und live verfolgen, wie die Media Queries plötzlich ein anderes Stylesheet laden und sich das Layout damit spontan verändert. 8.4 Zusammenfassung Mithilfe von Emulatoren kann sich eine Hardware (z. B. ein PC) wie eine andere Hardware (z. B. ein Smartphone) verhalten. Emulatoren können sowohl für das iphone, als auch für Android-Handys kostenlos im Internet heruntergeladen werden. Allerdings müssen zusätzlich auch die zugehörigen SDKs installiert werden. Der Emulator für Opera Mobile 10 und der Opera Widgets Mobile Emulator funktioniert ohne vorherige Installation von SDKs. 78

79 9 Schlussbetrachtung Ich hoffe, ich konnte Ihnen einen verständlichen und praxisnahen Einstieg in dieses hochaktuelle, ständig an Bedeutung gewinnende und gleichzeitig nicht ganz einfache Thema Webdesign für Smartphones ermöglichen. Ich habe versucht, Ihnen in diesem Studienheft auch noch solide Grundlagen im Bereich CSS-Layout mit auf den Weg zu geben, ohne die ein echtes Verständnis der erforderlichen Schritte auf dem Weg zum mobilen Web nicht möglich ist. Kaum ein Bereich entwickelt sich so dynamisch, wie das mobile Web. Sofern man vor diesem Hintergrund überhaupt Prognosen wagen darf, glaube ich doch, dass die von mir in diesem Studienheft präsentierten Strategien des One Web und des Responsive Webdesigns in die richtige Richtung weisen. Auch Webseiten, die sorgfältig für mobile Geräte optimiert worden sind, können in Bezug auf das Look&Feel nativer Apps, mit all ihren Raffinessen in der Benutzeroberfläche, nicht konkurrieren. Bezieht man Pakete wie SproutCore Touch oder jquery mobile ein, können mobile Webseiten gegenüber echten Apps schon sehr gut mithalten. Es gibt aber noch eine Art von Zwischenlösung einen dritten Weg, auf den ich Sie zum Schluss noch aufmerksam machen möchte: Es ist möglich, native Apps auf der Basis etablierter Webtechnologien (also HTML 5, CSS 3 und JavaScript) zu entwickeln. Dazu benötigt man allerdings spezielle Entwicklungsumgebungen, mit deren Hilfe fertig entwickelte Webseiten sozusagen in Apps übersetzt werden können: Dieser Transformationsprozess ist nicht ohne Tücken und funktioniert auch nicht gleich gut für iphones und die Android-Welt. Sie haben ja bereits erfahren, dass das PhoneGap-System vollständig in die aktuelle Version des Webeditors Adobe Dreamweaver CS6 integriert worden ist. Auch zahlreiche, teilweise sogar kostenlose Frameworks bieten eine sehr gute Unterstützung für diese Strategie. Wir dürfen jedenfalls gespannt sein, welche aufregende Entwicklung das mobile Web noch nehmen wird. Für Webdesigner wird es mit Sicherheit nicht so schnell langweilig werden und es kann sehr leicht sein, dass gerade in dem Moment, wo Sie dieses Studienheft bis hierher durchgearbeitet haben, schon die nächste technologische Neuerung vor der Tür steht. Auf jeden Fall haben Sie sich jetzt eine Pause verdient, bevor Sie beginnen, sich mit der Einsendeaufgabe zu beschäftigen. Ich hoffe natürlich, dass Ihnen die Lektüre dieses Studienhefts neben aller Mühe auch etwas Spaß gemacht hat. Vielen Dank für Ihre Aufmerksamkeit und weiter viel Erfolg! 79

80 10 Anhang 10.1 Literaturverzeichnis Spona, Helma Maurice, Florence Spiering, Markus/ Haiges, Sven Mobile Webseiten mit HTML 5 Verlag: Data Becker ISBN , Preis: 34,95 CSS3: Leitfaden für Webdesigner (gebundene Ausgabe) Verlag: Addison-Wesley, 1. Auflage ISBN-10: , ISBN-13: , Preis: 39,80 HTML5-Apps für iphone und Android (broschiert) Franzis Verlag ISBN , Preis: 30,00 Informationsquellen im Internet Bei einem so dynamischen Thema ist es keine gute Idee, nur statische Weblinks aufzulisten. Ich empfehle Ihnen deshalb, zusätzlich nach unterschiedlichen Kombinationen (d. h. verknüpft mit und ) der Begriffe Webdesign, CSS, Responsive Webdesign, Media Queries, iphone Smartphone und Android zu suchen. Aus diesem Grund gebe ich hier nur einige ausgewählte Links zu dem Thema an. Grundlagen Webdesign für Smartphones

81 media-queries.html Viewport

82 Pakete und Frameworks SDKs und Emulatoren

83 10.2 Lösungen der Aufgaben zur Selbstüberprüfung Vergleichen Sie bitte Ihre Lösungen! Bei freier Formulierung kommt es nicht auf wörtliche Übereinstimmung an, sondern auf inhaltliche. Sind Sie zu einem anderen Ergebnis gekommen, sollten Sie das entsprechende Kapitel dieses Studienheftes wiederholen und die zugehörige Aufgabe nach einer Pause noch einmal schriftlich lösen. Gegebenenfalls berichtigen Sie Ihr Ergebnis nach einem erneuten Versuch. Lassen Sie kein falsches Ergebnis stehen. I. 1. Großer Aufwand und Fehleranfälligkeit bei Erstellung, Pflege und Wartung eigenständiger Sites für das mobile Web. Auch eine mobile Variante muss ständig an neue Gerätetypen angepasst werden. 2. Sie erlauben es nicht nur, wie bisher die Medientype, sondern die tatsächlichen physikalischen Eigenschaften des Zielgeräts abzufragen. 3. Ein Query besteht aus dem Medientyp und der eigentlichen Abfrage. Beispiel: screen and (max-device-width: 480px) 4. Bei Smartphones entspricht der Viewport nicht einfach der Größe des Displays. Mobile Browser bauen Webseiten zunächst in einem virtuellen Layout Viewport auf. Dieser Bereich wird anschließend so stark verkleinert, dass er genau in den tatsächlichen Smartphone-Monitor passt. Ist eine Seite bereits für die Darstellung auf Smartphones optimiert, führt dieser Mechanismus zu falschen Resultaten. Mit dem Viewport-Tag kann der Viewport auf die Größe des tatsächlichen Geräte-Displays festgelegt werden. II. 1. Die Eigenschaft float. 2. Ein Element befindet sich auf der rechten Seite im Layout und wird von anderen Inhalten links umflossen. Dieses Verhalten wird mit clear:right; aufgehoben. 83

84 3. Und so ähnlich sollte Ihr Quellcode aussehen: III. Die wesentliche Stelle im CSS-Code des externen Stylesheets muss lauten: #holder { width: 100%; min-width: 500px; max-width: 800px; margin: 0 auto 0 auto; background-color: #FFC; } 84

85 Und so ähnlich sollte Ihr HTML-Quellcode aussehen: 85

86 10.3 Glossar Hier finden Sie eine kurze Erklärung zu den im Studienheft eingeführten Begriffen: Android: App (Application): Bildschirmauflösung: Browser-Sniffing: CSS: Dreamweaver: Elastic Layout: Emulation/Emulator: Fixed Layout: Flash: Von Google entwickeltes Betriebssystem für Smartphones und Tablets. Anwendung auf Smartphones oder Tablets. Anzahl der Pixel, die ein Monitor in der Breite und Höhe anzeigen kann. Methode zur Implementierung von Browserweichen (serverseitig mit PHP oder clientseitig mit JavaScript möglich) Cascading Stylesheets. Format- bzw. Stilvorlagen für Webseiten. Verbreiteter Webeditor von Adobe. CSS-Layout, bei dem die Breite der Container in der Einheit em definiert sind. Diese passen sich dadurch automatisch der vom Nutzer gewählten Schriftgröße an. Software, durch die sich eine Hardware (z. B. ein PC) wie eine andere Hardware (z. B. ein Smartphone) verhält. CSS-Layout, bei dem die Breite der Container in der Einheit px definiert sind. Diese sind damit von der Bildschirmauflösung und Größe des Browserfensters unabhängig. Autorenprogramm zur Erstellung von Animationen und Rich Internet Applications (RIA). Float: Name einer CSS-Eigenschaft, mit deren Hilfe bestimmte Inhalte von anderen Inhalten umflossen werden können. Damit lassen sich Spaltenlayouts realisieren. Fluid Images: Liquid Layout: Media Queries: Definition der Breite von Bildern als max-width: 100%. Dadurch nehmen diese immer die gesamte Breite des aktuellen Viewports ein. CSS-Layout, bei dem die Breite der Container in der Einheit % definiert sind. Diese passen sich dadurch automatisch der Bildschirmauflösung und Größe des Browserfensters an. Erlauben es die tatsächlichen physikalischen Eigenschaften des Zielgeräts abzufragen. 86

87 Mobile First: One Web: Webdesign-Strategie, bei der als Erstes die Website für mobile Geräte realisiert wird. Webdesign-Strategie, bei der, soweit sinnvoll und möglich, dieselbe Information und Anwendungen den Nutzern vollkommen unabhängig von ihrem aktuell genutzten Gerät angeboten wird. Responsive Webdesign: Webdesign, das auf die aktuelle Umgebung (d. h. den Geräte-Monitor) anspricht, bzw. darauf reagiert. RGB: Semantisches Markup: Server: Smartphone: SVG: Tablet: Tag: Tappen: Viewport: W3C: Web-Applikation: XML: Additives Farbmodell für Monitore (rot, grün, blau). Sinnhaft eingesetzte Auszeichnungselemente. Rechner in einem Computernetzwerk, der für die angeschlossenen PCs Informationen bereitstellt. Intelligentes Handy mit Internetzugang. Scalable Vector Graphics. XML-basiertes Vektorgrafikformat. Kurzform für Tablet-PCs, d. h. mobile Geräte wie das ipad. Befehl einer Auszeichnungssprache wie HTML oder XML. Klicken mit den Fingern auf einem Touchscreen. Auf dem Monitor sichtbare Fläche des Browsers abzüglich der Scrollbalken. World Wide Web Consortium. Webseite, die Funktionen wie bei einem lokal auf dem PC installierten Programm bereitstellt (auch Web-Anwendung). Extensible Markup Language, vielseitig einsetzbare Auszeichnungssprache für Content aller Art. Kann in beliebige Zielformate transformiert werden. 87

88 10.4 Sachwortverzeichnis 18 A Abfrage 17 absolute Auflösung 9 Android 5, 6, 26, 77 Android-Emulation 77 Android-Emulator 56, 65 Apps 7 Audio 12 Auflösung 78 Ausdrucken 25 B Bandbreite 10 Beschleunigungsmessung 16 Block-Element 35 Boilerplate 74 Bookmark 57 Box-Modell 59 Breitbildauflösung 5 Breitbildmonitor 25, 26, 48, 63 browser sniffing 13 Browserfenster 9 Browser-Sniffing 13 Browserweiche 13 C Chrome 6 Container 34, 37 CSS 34 CSS CSS CSS-Layout 26, 30, 34 D Designvorlage 73 Desktop-Browser 19 Desktop-Website 15 Device Pixel 19 DIV 39 DIV-Container 31 Doppeltip-Zoom 9 Dreamweaver 71, 72, 76 Dreamweaver CS5 71 dreispaltig 42, 58 Druckausgabe 16 Druckvorschau 69 E elastic 40 elastic layout 26 elastisch 40 elastisches Layout 40 Emulator 77 F fest 40, 58 festes Layout 40, 58, 65 Firefox 6, 31 fixed 40 fixed layout 32 Flash-Animation 7 Flash-Film 7 Flash-Player 7 float 34 Fluid Images 18, 53, 56 flüssig 40 flüssiges Layout 40, 42, 55 flüssig-fest 43 G Generation 3G 6 Geräteklassen 17 Gerätemonitor 23, 53 Gesten 9 GPS 16 GSM 6 H Hintergrundbild 10, 26 Hintergrundfarbe 36, 68 Home-Bildschirm 57 HTC 7 HTC Desire 66 HTML 5 9, 11, 12, 32, 74 http-request 60 I Icon 7 ID-Selektor 35 Inline-Element 35 ios 77 ipad 6, 26 iphone 5, 6, 77 iphone-simulator 77 iphone-website 15 iphoney 77 88

89 J JDK 77 jquery 73, 76 jquery-vorlagen 74 K kontextabhängiges Keyboard 57 kontextual Keyboards 11 L Ladezeit 20 Landscape 10, 56 Layout Viewport 23 Linux 24 liquid 40 Liquid Layout 43 liquid layout 26 M Maß absolut 10 relativ 10 Media Queries 9, 17, 18, 19, 20, 24, 25, 72 Medienmerkmal 17 Medientyp 16, 17 mehrspaltig 40 Meta-Tag 22, 72 Mobile First 16 mobile Website 13 Mobilfunknetz 6 Mouseover 10 Multitouch-Zoom 5, 6 N natives App 7, 57 Nokia 7 O Offlineanwendung 12 One Web 15, 17, 79 Opera 6, 24 Opera Mobile Emulation 78 orientation 26 Orientierung 10, 78 Orientierungswechsel 16 P Paket 71 Panning 9 PDA 24 Performance 60 PhoneGap 74 Pixeldichte 19 plattformunabhängig 7 Portrait 10, 55, 65 ppi 19 Print 25, 66 Pseudoklasse 54 R Responsive Webdesign 16, 17, 25, 79 Retina Display 19 S Safari-Browser 6 Samsung 7 Schlüsselwort 17, 57 Screenshot 54, 65 SDK 7, 77 Seitenumbruch 68 Seitenverhältnis 16:9 25 Sidebar 42, 58, 65 skalieren 24 Skalierung 24 Small Screen Rendering 24 Smartphone 5, 6, 25, 26, 60, 75 Software Development Kit 7 soziales Netzwerk 7 Standardlayout 30 Stylesheet 6 SVG-Format 11, 20 Symbian OS 24 T Tablet 72 Tablet-PC 5, 6, 7 Teaser 43 Test 77 Textfelder 57 Thumbnail 38 Touch-Ereignisse 75 Touchscreen 6, 75 U Umfließen 35 UMTS 6 Usability 5 V Vektorgrafik 11, 20 Video 12 Viewport 9, 17, 22, 39, 56, 72 Viewport-Breite 23 Viewport-Tag 24 Virtueller Layout Viewport 10 virtueller Viewport 23 89

90 W Webkit 6 Windows Mobile 24 WLAN 6 WURFL 14 X XHTML XML 14 Z Zeilenabstand 68 Zooming 9 90

91 Websites für Smartphones Einsendeaufgabe zu MMDE10K Websites für Smartphones Bitte reichen Sie mit Ihren Lösungen die Aufgabenstellungen ein! Name: Vorname: Anhang Lernheftcode: MMDE10K-XX2-A03 Ihr Fernlehrer: Postleitzahl und Ort: Straße: Datum: Studien-Nr.: Lehrgangs-Nr.: Note: Druck-Nr.: M M D E 1 0 K X X A03 Unterschrift: Füllen Sie die nicht hinterlegten Felder bitte sorgfältig aus! A. Praxisaufgabe Gehen Sie bitte von einem sehr einfachen, zweispaltigen Layout aus (basierend auf dem Standardlayout aus dem Kapitel CSS-Layout jedoch ohne Header und Footer). Entwickeln Sie daraus ein Layout, das für Smartphones optimiert ist und folgende Eigenschaften besitzt: festes Layout mit 800px ein externes Stylesheet ein zusätzliches Bild Ihrer Wahl, das rechts vom Text umflossen wird und das Verhalten von Fluid Images besitzt. Verwenden Sie ein Bild mit ausreichender Breite (ca. 450px), damit man den Effekt auch sehen kann. Sehen Sie sich bitte als Beispiel die beiden folgenden Abbildungen einer Webseite an, wie sie von Firefox in einem breiteren und einem schmaleren Smartphoneähnlichen Fenster dargestellt wird. Entwickeln Sie bitte nach dieser Vorlage ein HTML-Dokument smartphone-aufgabe.html mit einem zugehörigen externen Stylesheet mystyles.css. Dabei müssen Sie weder dieselben Maße einhalten noch genau dieser Farbgebung folgen. Das Layout sollte aber diesem Muster entsprechen. Sie finden alle benötigten Informationen in den beiden vorgestellten Praxisbeispielen. Bitte vermeiden Sie HTML-Syntaxfehler: Wenn Sie sich den Quellcode via Firefox ansehen (Extras>Webentwickler>Seitenquelltext bzw. [Strg+U] anzeigen), werden die meisten Syntaxfehler in Rot dargestellt. Vermeiden Sie bitte ebenfalls CSS- Syntaxfehler: Diese werden zuverlässig vom Web Developer Toolbar für Firefox erkannt. MMDE10K 91

92 Anhang Websites für Smartphones Abb. 0.1: Vorlage 1 für Einsendeaufgabe Abb. 0.2: Vorlage 2 für Einsendeaufgabe 92 MMDE10K