Das Buch

  • Lernen Sie die Grundlagen, Websites reaktionsfähig zu gestalten und umzusetzen
  • Tauchen Sie tiefer ein in viele weitere Details, um Websites für mobile Geräte fit zu machen
  • Erfahren Sie mehr über Webtypografie und weitere Gestaltungstipps für mobile Geräte
  • Werfen Sie einen Blick auf HTML5-Bereiche sowie einige CSS3-Tipps für reaktionsfähige Websites
  • Lesen Sie, wie Sie die Performance Ihrer Website steigern
  • EXTRA: Mit kostenlosem E-Book

Die Kapitel im Überblick

Kapitel 1: Zeit, dass sich was bewegt

In diesem Kapitel geht es darum, welches Umdenken in den letzten Jahren bzw. Monaten im Webdesign eingesetzt hat und welche Auswirkungen es auf unsere Arbeit als Webdesigner hat.

Kapitel 2: Was ist Responsive Webdesign?

In diesem Kapitel wird beschrieben, wo der Begriff herkommt und erläutert, dass wir diese Technik in Zeiten zahlreicher internetfähiger Geräte brauchen.

Kapitel 3: Die grundlegenden Zutaten für Responsive Webdesign

Hier geht es um die Grundlagen, die Ethan Marcotte seinerzeit in seinem A-List-Apart-Artikel sowie in seinem Buch definiert hat. Anhand einer kleinen Beispielseite werden flexibles Grid, flexible Bilder und Mediaqueries erläutert.

Kapitel 4: Noch mehr Zutaten

Jenseites der Grundlagen gibt es viele weiter Dinge zu berücksichtigen, die in diesem Kapitel zusammen gefasst werden (Dieses Kapitel herunterladen)

Kapitel 5: Ein verbesserter Workflow

»Mobile First oder Desktop First?« ist die große Frage. Wie wirkt sich ein flexibles Webdesign auf die einzelnen Phasen eines Projekts aus und wie können die Abläufe in der Teamarbeit und in Kombination mit dem Auftraggeber bewerkstelligt werden?

Kapitel 6: Anpassungsfähige Inhalte

Im Responsive Webdesign müssen wir uns gut überlegen, wie die Inhalte auf verschiedene Bildschirmgrößen reagieren. »Content Parity« heißt das Zauberwort, die Inhalte sollen auf allen Geräten die selben sein. Mit welchen Mitteln das gelingen kann und wie wir unsere Inhaltstruktur bestmöglich vorbereiten, wird in diesem Kapitel unter die Lupe genommen.

Kapitel 7: Einen Prototypen mit HTML5-Elementen erstellen

»Eine solide Basis ist die beste Voraussetzung für eine gute Grundlage«. Nach diesem Motto darf auch ein Blick auf das Grundgerüst HTML nicht fehlen. Hier werden einige neue HTML5-Elemente beschrieben und erläutert, wie deren Bedeutung auch in Zusammenhang mit flexiblen Webseiten nützlich sein kann.

Kapitel 8: Formulare in HTML5

Gerade in Bezug auf Touchgeräte sind die mit HTML5 neu eingeführten Formulartypen nützlich, z.B. um die Tastatur den Eingabebedürfnissen anzupassen. Auch in Sachen Formular-Validierung hat sich einiges getan, was ebenfalls hier erläutert wird.

Kapitel 9: Die Gestaltungsphase

Nicht nur die Technik, auch die Gestaltung muss Antworten auf einige Fragen in Verbindung mit flexiblen Websites liefern: Wie kann der Charakter einer Website über verschiede Bildschirmgrößen hinweg herausgestellt werden? Besser erst für kleine oder erst für große Bildschirme gestalten? Welche Werkzeuge helfen? Wie lässt sich im Gestaltungsprozess Zeit einsparen?

Kapitel 10: Reaktionsfähige Webtypgrafie

Typografie ist ein zentrales Thema im Webdesign. In diesem Kapitel geht es um Auswahl und Testen von Schriften im Browser, die Schriftsetzung in flexiblen Layouts, Schriftbild, die richtige Schriftgröße (samt neuer Einheiten), Zeilenabstände, Kontrast, Skalierung usw.

Kapitel 11: Anpassugsfähige Bilder, Hintergrundbilder und Icons

Dieses Kapitel fühlt den ladezeitintesiven Bildelementen auf den Zahn. Wie können wir nicht nur die Bildgröße, sondern auch die Dateigröße in Abhängkeit der verwendeten Geräte verändern? Wie passen wir Bilder/Hintergrundbilder für Retina-Displays an? Welche Möglichkeiten bieten Iconfonts und SVG?

Kapitel 12: Mobile Navigation

Weil auf kleinen Bildschirmen der Inhalt wichtiger ist, brauchen wir Techniken und Darstellungsmöglichkeiten, die Navigation in den Hintergrund zu stellen und erst bei Bedarf in den Fokus zu rücken. Verschiedene Lösungen werden mit Vor- und Nachteilen beschrieben. Ebenso wird die bei dieser Website verwendete Variante in einem Tutorial erklärt.

Kapitel 13: Mediaqueries

Was sind nützliche Eigenschaften, die man mit Mediaqueries abfragen kann? Wie plant und strukturiert man Mediaqueries? Welche Vorteile bietet die Einheit em? Wie kombiniert man Mediaqueries mit JavaScript?

Kapitel 14: Layouts umsetzen

Die schönste Idee nutzt nichts, wenn sie nicht umgesetzt werden kann. Gridsysteme, Designmodule, Hierarchie, Neuanordnung von Elementen, Hilfsmittel, CSS-Tricks und Problemfälle wie Tabellen, Infografiken und Bannerwerbung werden in diesem Kapitel besprochen, um tolle Layouts verwirklichen zu können.

Kapitel 15: Performance

Ein oft vernachlässigtes Thema wird vor allem in Bezug auf langsame Datenraten mobiler Netze wieder interessant: Wie können wir unsere Websites schneller machen? Welche Stolperfallen sollten wir umgehen?