Mit kostenlosem E-Book

Transkript

1 Mit sem kostenlo E-Book

2 Zillgens Responsive Webdesign Bleiben Sie auf dem Laufenden! Der Hanser Computerbuch-Newsletter informiert Sie regelmäßig über neue Bücher und Termine aus den verschiedenen Bereichen der IT. Profitieren Sie auch von Gewinnspielen und exklusiven Leseproben. Gleich anmelden unter

3

4 Christoph Zillgens Responsive Webdesign Reaktionsfähige Websites gestalten und umsetzen

5 Der Autor: Christoph Zillgens, Gangelt Kontakt: und Alle in diesem Buch enthaltenen Informationen, Verfahren und Darstellungen wurden nach bestem Wissen zusammengestellt und mit Sorgfalt getestet. Dennoch sind Fehler nicht ganz auszuschließen. Aus diesem Grund sind die im vorliegenden Buch enthaltenen Informationen mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Autor und Verlag übernehmen infolgedessen keine juristische Verantwortung und werden keine daraus folgende oder sonstige Haftung übernehmen, die auf irgendeine Art aus der Benutzung dieser Informationen oder Teilen davon entsteht. Ebenso übernehmen Autor und Verlag keine Gewähr dafür, dass beschriebene Verfahren usw. frei von Schutzrechten Dritter sind. Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeich nungen usw. in diesem Buch berechtigt deshalb auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetz gebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften. Bibliografische Information der Deutschen Nationalbibliothek: Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbiblio grafie; detaillierte bibliografische Daten sind im Internet über abrufbar. Dieses Werk ist urheberrechtlich geschützt. Alle Rechte, auch die der Übersetzung, des Nachdruckes und der Vervielfältigung des Buches, oder Teilen daraus, vorbehalten. Kein Teil des Werkes darf ohne schriftliche Genehmigung des Verlages in irgendeiner Form (Fotokopie, Mikrofilm oder ein anderes Verfahren) auch nicht für Zwecke der Unterrichtsgestaltung reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden Carl Hanser Verlag München, Lektorat: Brigitte Bauer-Schiewek Fachlektorat: Christian Schäfer Copy editing: Petra Kienle, Fürstenfeldbruck Herstellung: Irene Weilhart Satz: Mi43 Werbeagentur, Heinsberg Umschlagdesign: Marc Müller-Bremer, München Umschlagrealisation, Titelgestaltung und Layout: Christoph Zillgens Gesamtherstellung: Kösel, Krugzell Ausstattung patentrechtlich geschützt. Kösel FD 351, Patent-Nr Printed in Germany print-isbn: e-book-isbn:

6 V Inhalt Vorwort... XIII Kapitel 1 Zeit, dass sich was bewegt...1 Kapitel 2 Was ist Responsive Webdesign? Rückbesinnung auf Flexibilität Unglückliche Begriffe Neue Geräte und Display-Größen Zugriffszahlen mobiler Geräte Responsive Webdesign vs. Adaptive Webdesign Kapitel 3 Die grundlegenden Zutaten für Responsive Webdesign Das Raster: Aus fix mach flexibel Abstände anpassen Relative Einheiten für Schriftgrößen Flexible Bilder Veränderter Kontext Hintergrundbilder anpassen Flexible Videos CSS3-Mediaqueries Zusätzliche Anpassungen für mobile Geräte... 47

7 VI Inhalt Was passiert, wenn das Gerät in den Landscape-Modus gedreht wird? Der Umgang mit Internet Explorer 8 und kleiner Einmal kurz durchatmen Kapitel 4 Kapitel 5 Kapitel 6 Noch mehr Zutaten Was müssen wir noch berücksichtigen? Einen passenden Workflow entwickeln Flexibler Umgang mit den Inhalten Eine solide HTML-Basis Die Gestaltungsphase Reaktionsfähige Typografie und Webfonts Anpassungsfähige Bilder, Grafiken und Icons Mobile Navigation und Bedienmethoden Weitere Möglichkeiten mit Mediaqueries Layouts umsetzen Performance Die erweiterte Zutatenliste Ein verbesserter Workflow Der richtige Ausgangspunkt»Mobile First«oder»Desktop First«? Planungsphase Designphase Entwicklungsphase Zusammenfassung Abläufe in der Zusammenarbeit Ein auf das Responsive Webdesign abgestimmter Ablauf Beispiel einer wechselseitigen Zusammenarbeit Tests auf mobilen Geräten Emulatoren Wie wird der Auftraggeber in den Prozess integriert? Fazit Anpassungsfähige Inhalte Mobile First = Content First... 81

8 Inhalt VII 6.2 Ziele und Bedürfnisse definieren Wireframes: Inhalte auf Bildschirmgrößen abstimmen Der Nutzerkontext Wo und wie nutzen Leute ihr Smartphone? Verschiedene Möglichkeiten zur Inhaltsanpassung Inhalte weglassen Inhalte ausblenden Inhalte neu anordnen Zusammenfassung Kapitel 7 Kapitel 8 Einen Prototypen mit HTML5-Elementen erstellen Ein Blick in die index.html Conditional Comments Viewport-Angaben für mobile Geräte CSS einbinden Nützliche JavaScript-Helfer Gerätespezifische Besonderheiten Neue Elemente für mehr Semantik Sollen wir mit dem Einsatz noch warten? Inhalte als Basis Header Nav Section Footer Article Section und Article unter der Lupe Aside Figure und Figcaption Fazit Formulare in HTML Neue Attribute Platzhalter Pflichtfelder Autofokus Neue Eingabetypen

9 VIII Inhalt , URL, Telefon Zahlen, min- und max-werte, Zählschritte, Platzhalter Schieberegler Datum und Uhrzeit Das Suchfeld Formularvalidierung Das pattern-attribut Ausgabe einer Fehlermeldung Fehlende Funktionen: JavaScript hilft Kapitel 9 Kapitel 10 Die Gestaltungsphase Layoutmuster Überwiegend flüssiges Layout Spalten verschieben Layout umschalten Kleine Änderungen Off Canvas: außerhalb der Darstellungsfläche Zusammenfassung Bestandteile eines Designs Fazit Annäherung an die Gestaltung Das richtige Werkzeug finden Gestaltung Zeit sparen Styletiles Ein Designsystem entwickeln Nicht zu sehr ins Detail gehen Verhandeln Zusammenfassung Reaktionsfähige Webtypografie Das Zwischenergebnis testen Analyse Schriften wählen und testen Typecast Schriftsetzung in flexiblen Layouts Die richtige Zeilenlänge

10 Inhalt IX Mehrere Spalten Automatische Silbentrennung Die richtige Schriftgröße Schriftgrößen und Schriftbild Tipps zum Skalieren Den Zeilenabstand anpassen Moderne Einheiten für Schriftgrößen Kontrast und Fallback-Schriften Fazit Kapitel 11 Anpassungsfähige Bilder, Hintergrundbilder und Icons Herausforderungen im reaktionsfähigen Kontext Adaptive Images Was passiert da jetzt genau? Zusammenfassung Responsive Enhance Funktionsweise Bilder ausschließen Fazit Bildmotiv oder -ausschnitt ändern Angriff der Retina-Displays Neue HTML-Elemente braucht das Land srcset picture Quintessenz: eine gute Mischung Fazit Qual der Wahl Responsive Slider Hintergrundbilder jquery Anystretch Hochauflösende Hintergrundbilder Hochauflösende CSS-Sprites Pixelperfekte Icons Iconfonts Nachteile Fazit

11 X Inhalt SVG Zusammenfassung Kapitel 12 Kapitel 13 Mobile Navigation Was ist wichtig für mobile Navigationen? Inhalte vor Navigation Die richtige Größe macht s Zusammenfassung Navigationskonzepte Top-Nav: Es bleibt, wie es ist Icon-Navigation Footer-Navigation Select-Menü Das Toogle-Menü Toggle-Varianten Off-Canvas-Menü »Pull down for Navigation« Swipe Fazit Eine mobile Navigation erstellen Die Position der Navigation verändern Die Navigation ein- und ausblenden Fazit Mediaqueries Nützliche Eigenschaften Dimensionen Seitenverhältnis und Ausrichtung Pixeldichte und Auflösung Farbe Ausblick: Maus oder Finger? Mediaqueries kombinieren Mediaqueries planen und strukturieren Planung Struktur Mediaqueries mit em angeben Mediaqueries und JavaScript

12 Inhalt XI Kapitel 14 Layouts umsetzen Reaktionsfähige Gridsysteme Golden-Grid-System Goldilocks Approach Less Framework 4 und Frameless Modulares Grid Gridset Gridpak Selbst ist der Mann (oder die Frau) Hilfsmittel zum Testen der Layouts Fazit Design-Module Einfacher Zweispalter Verschachtelter Zweispalter Einfacher Dreispalter Dreispalter mit Zwischenschritt Mehrere Zwischenschritte Vorlagen verwenden Fazit Hierarchie wahren Bildseitenverhältnis anpassen Weitere Gestaltungsmöglichkeiten Elemente neu anordnen Display: table die Navigation neu ausrichten Display: table die Navigation neu anordnen AppendAround Flex Layout schönes neues CSS Seitenverhältnis flexibler Elemente steuern Inhalte beschneiden Problemfall: sperrige Inhalte Reaktionsfähige Tabellen Infografiken und Schaubilder Bannerwerbung Kapitel 15 Performance Gründe für langsame Websites Gestiegene Datenmenge

13 XII Inhalt Anzahl eingebundener Dateien Den Ladevorgang entschlüsseln Das HTTP-Wasserfall-Diagramm Beschränkung paralleler Aufrufe Der Datei-Overhead Latenzen Zusammenfassung Bequeme Gewohnheiten der Entwickler Dateien zusammenführen JavaScript JavaScripts von fremden Servern CSS-Dateien JavaScripts und Stylesheets minifizieren Minifizier-Software Reihenfolge im HTML-Code Bilder optimieren Das richtige Dateiformat Bilddaten eindampfen CSS-Sprites Data URIs GZIP: komprimierte Übertragung Caching: Dateien mit längeren Verfallsdaten ausstatten Lazy Loading Social-Media-Buttons Optimierung innerhalb von CSS Webfonts YSlow Fazit Ran ans Werk! Index...354

14 XIII Vorwort Diese Erzählung wuchs und wuchs, während ich sie erzählte, bis sie zu einem Buch mit dem Schwerpunkt»Responsive Webdesign«wurde. Begonnen hatte es mit der Idee, über hochwertiges Webdesign zu schreiben und fortgeschrittenen Webworkern nützliche Eigenschaften und Werkzeuge rund um HTML5, CSS3 und Webfonts näherzubringen. Während der ersten Entwürfe kristallisierte sich heraus, dass das Thema»Responsive Webdesign«zu umfangreich war, als dass es einfach nur in einem oder zwei Kapiteln abgefrühstückt werden konnte. Zudem hatte ich gerade meine ersten Projekte in diesem Bereich umgesetzt und gemerkt, dass noch viele Fragen unbeantwortet oder nicht zufriedenstellend abgedeckt waren. Das ist nun viele Monde her und in der Zwischenzeit habe ich gesammelt, recherchiert, geschrieben und das zusammengetragen, was Sie gerade in Form dieses Buchs in der Hand halten. Als gelernter Mediengestalter mit Designer-Herz und Frontend-Kopf habe ich mich dabei weitestgehend auf jene Bereiche konzentriert, die mit Gestaltung, HTML und CSS zutun haben. Ganz ohne JavaScript und PHP geht es natürlich nicht, wer aber wilde Code-Stafetten und serverseitige Wunderscripte erwartet, sucht in diesem Buch vergeblich. Auf der anderen Seite sollten Sie aber Kenntnisse in Sachen CSS und HTML mitbringen, für Anfänger empfehle ich zuvor die Lektüre einschlägiger Fachliteratur zu diesem Thema. Nichtsdestotrotz hoffe ich natürlich unabhängig davon, ob Sie eher aus der Designer- oder der Entwicklerecke kommen, dass Sie viele nützliche Informationen in diesem Buch finden und Spaß am Entdecken und Ausprobieren haben!

15 XIV Vorwort Danksagungen Ein Buch erstellt man nicht allein, auch wenn es einem als Autor während einer nächtlichen Schreibsession mal wieder so erscheinen mag. Im Hintergrund sind einige weitere Leute zu nennen, die dazu beigetragen haben, dass dieses Werk zustande kam. In erster Linie Christian Schäfer, mein technischer Lektor, der spontan zugesagt hat und neben dem Lektorat an vielen Stellen weiteren Input geliefert hat, vor allem im Kapitel Performance, das zu weiten Teilen seiner Feder entspringt. Danke, Schepp! Ebenso mein Kumpel Roman Zenner, der mich zu diesem Himmelfahrtskommando überredet hat und anschließend die Suppe auslöffeln durfte, indem er mir beim Bilder- und ebenso beim Performance-Kapitel unter die Arme gegriffen hat. Thx, Ro! Weiterhin Michael Steinmann, der mir nicht nur Kaffee und Unterkunft bot, sondern auch beim Satz dieses Buchs fleißig mitarbeitete. Danke, Tzoschi! Sandra Kallmeyer und Eric Eggert für die gute Zusammenarbeit bei zwei aktuellen Redesigns natürlich responsive sowie für wertvolle Tipps rund ums Buch. Danke euch beiden! Und natürlich meinen Lektorinnen vom Hanser-Verlag, für die netten Gespräche, das gute Feedback und den letzten Schliff. Darüber hinaus für die Möglichkeit, einen individuellen Weg bei der Buchgestaltung einzuschlagen. Vielen Dank, Margarete Metzger, Brigitte Bauer-Schiewek und Irene Weilhart! Den ultimativen Ehrenplatz auf der Danksagungstribüne erhält natürlich meine Frau Sarah, die über viele Monate einem himmelhochjauchzendzutodebetrübten Kerl die Kraft und die Zeit gegeben hat, dieses Buch zu schreiben und überhaupt und sowieso für alles. Ich liebe Dich! So, bevor jetzt die Tränen kullern und das Mikrofon ob der sekündlich berechneten Redezeit im Boden versinkt, bleibt mir noch, mich bei Ihnen für den Kauf dieses Buchs zu bedanken! Ich wünsche viel Spaß bei der Lektüre!