Techniken und Praxisbeispiele zu responsive Webdesign!

In der heutigen Zeit gehört es zum guten Ton, Websites für möglichst alle Endgeräte zu entwickeln. Nicht nur das Layout und Navigationen sollten überall funktionieren. Auch Inhalte wie Bilder, Videos, Schriften und mehr, sollten sowohl auf Desktops, wie auch auf Mobilgeräten richtig eingebracht werden und nichtzuletzt soll auch noch alles barrierearm und performant umgesetzt sein. Wie man dabei vorgehen sollte, zeigt das aktuelle Standardwerk für Profi-Entwickler vom Rheinwerk-Verlag mit dem Titel Responsive Webdesign - Konzepte, Techniken, Praxisbeispiele und hier wird gezeigt, was das bereits in der dritten Auflage erschienene Buch tatsächlich zu bieten hat.

Responsive Webdesign - Standardwerk!

Das Internet ist ständig in Bewegung, vieles ändert sich und so macht gerade zum Thema Responsive Webdesign eine aktualisierte dritte Auflage absolut Sinn. Geschrieben haben das Buch die Frontend-Entwicklerin Andrea Ertel und der Webentwickler und Autor des CSS-Standardwerks vom Rheinwerk-Verlag Kai Laborenz.

Diese dritte aktualisierte und erweiterte Auflage hat einen Umfang von 524 Seiten und ist in 14 Kapiteln unterteilt. Vermittelt werden unter anderem die Grundlagen von Responsive Webdesign, Strategien zu Content, Layout und Navigation sowie dem responsiven Einsatz von Inhaltselementen. Die Leser werden mit jeder Menge an Beispielprojekten und dazugehörigen Downloads unterstützt.

Einige Inhalte:

• Media Queries
• Design und Typografie
• Semantik und Barrierefreiheit
• Layout-Patterns
• Frameworks
• Navigationskonzepte
• Werbung
• SVG und Icon Fonts
• Responsive Bilder
• Testing und Performance-Optimierung

Erhältlich ist das Werk für 39,90 Euro direkt beim Rheinwerk-Verlag auf der Seite zum Buch Responsive Webdesign - Konzepte, Techniken, Praxisbeispiele. Als E-Book kann es für 35,90 erstanden werden. Im Bundle aus E-Book und Buch kostet es 44,90 Euro.

Schlägt man das mit praktischem Lesebändchen versehene Buch auf, wird man zunächst mit ein paar Worten vom Lektor begrüßt, worauf die Seite "Auf einen Blick" folgt, welche übersichtlich die einzelnen Kapitel mit den Seitennummern auflistet.

Dem schließt sich ein Impressum und dann das ausführliche und in Kapiteln und Unterthemen gegliederte Inhaltsverzeichnis an. Also ganz so, wie man es von allen Büchern des Rheinwerk-Verlags gewohnt ist.

Ebenso gewohnt folgt dann das Vorwort der Autoren. Hier über drei Seiten und bereits mit einigen Beispiel-Abbildungen.

Denken in flexiblen Strukturen

Auffällig sind die Zitate und Weisheiten, welche bei jedem Kapitel am Anfang stehen. Wie in Kapitel 1 mit einem Twitter-Kommentar, sind diese häufig in englischer Sprache, aber nicht immer. Sinnvollerweise klären die Autoren zuerst über die Bedeutung von Responsive Webdesign auf. Natürlich wird hier nicht nur bemerkt, dass Websites für unterschiedlichste Ausgabegeräte anpassbar sein sollen. Man erfährt auch gleich die drei Hauptzutaten für eine responsive Website. Ein wenig wird auch auf die historische Entwicklung eingegangen und ein bereits auflösungsunabhängiges Layout aus dem Jahre 2004 gezeigt. Demgegenüber werden Layouts mit festen Größen und deren Umsetzung aus den 1990er Jahren besprochen. Dass Layout heute flexibel sein muss, zeigen die Ausführungen zu Gerätegrößen und Pixeldichten z.B. bei Retina-Displays. Die Autoren fahren fort mit den Unterschieden von Responsiven Designs zu reinen Mobilversionen wie sie T-Mobile verwendet und zeigen auch gleich die Schwächen von letzterer Variante auf. Desweiteren werden Web-Adressen zu guten Beispielen responsiver Umsetzung gezeigt.

Nach diesen grundsätzlichen Gedanken geht es bereits darum, wie responsive Websites erstellt werden. Es werden zunächst die verschiedenen Layouttypen wie fest, fluid und flexibel dargestellt und dann erklärt, wie man von einem festen zu einem flexiblen Layout kommt. Hier taucht dann auch der erste HTML- und CSS-Code im Buch auf und in einem Beispiel wird ein fixes Raster in ein flexibles umgerechnet. Auch Layoutumbrüche mit Media Queries werden im ersten Kapitel bereits kurz angesprochen.

Schnelleinstieg: Responsive Umsetzung eines fixen Layouts

Mit dem ersten Kapitel sind nun die Grundlagen für die Erstellung eines Rasters einer responsiven Website erarbeitet. Nach dem obligatorischen Zitat am Anfang, wird im zweiten Kapitel also eine kleine Beispiel-Website gebaut. Gezeigt wird dies anhand eines bestehenden festen Designs einer Photoshop-Vorlage, welches mit fluidem Raster, mit flexiblen Inhalten und Media Queries, responsiv wird. Zum Einsatz kommen HTML5-Elemente sowie CSS-Code und entsprechende Listings werden abgebildet. Hier stößt man unter anderem auf das nützliche box-sizing: border-box, welches später im Buch noch genauer erläutert wird. Natürlich werden jetzt feste Raster in flexible umgerechnet, was bereits im ersten Kapitel besprochen wurde. Dazu gibt es sehr hilfreiche Hinweise zu eventuellen Rundungsfehlern und zum Boxmodell.

Nachdem ein fluides Layout erstellt wurde, wird auf anpassungsfähige Inhalte wie Teaserboxen und Bilder eingegangen. Weiter hinten im Buch kommt dieses Thema noch ausführlicher vor. Natürlich werden wieder diverse Listings mit Code gezeigt und die sollte man schon verstehen. Absolute Einsteiger werden sich hier schwer tun, wenngleich es sich nicht um allzu komplizierten Code handelt und vieles erklärt wird, aber eben nicht alles. Vorkenntnisse sind also schon gefragt, aber es handelt sich ja auch nicht um ein Buch, welches den generellen Einstieg in Webdesign behandelt. Da flexible Layouts auch an Grenzen stoßen, schließt das zweite Kapitel sinnvollerweise mit notwendigen Erläuterungen zu den Media Queries ab.

Die Schlüsseltechnologie Media Queries

Detaillierter zu den Media Queries geht es jetzt in Kapitel 3 weiter. Wie die Autoren vermerken, handelt es sich um die dritte wichtige Zutat für responsive Websites. Nach ein paar einleitenden Worten wird ein kurzer Rückblick zu Cascading Stylesheets, also CSS und die verschiedenen Arten von dessen Einbindung gezeigt. Darauf aufbauend erfährt man die möglichen Wege zum Setzen des media-Attributs. In einer Tabelle werden sämtliche Medientypen wie screen, print, projection usw. gelistet und jeweils die Ausgabeart beschrieben. Es folgen die Medieneigenschaften. Auch hier wird erklärt, wie sie definiert werden und es gibt wieder eine komplette Tabelle zu Eigenschaft, Beschreibung und Werte. Auch veraltete Eigenschaften wie z.B. device-aspect-ratio werden besprochen. Ebenso fehlen Hinweise zu Browserproblemen nicht, die es ja leider schon immer und nicht nur bei Media Queries gibt. Es geht weiter mit dem Schreiben von Media Queries. Das Schema und die Struktur auch mit mehreren Typen und Eigenschaften werden gezeigt und es gibt wertvolle Hinweise z.B. was not und only auch in Verbindung mit and bzw. or bedeuten.

Sehr wichtig zum Verständnis folgen sehr ausführliche Erklärungen zu den Viewports und Pixeln. Seit es hochauflösende Retina-Displays gibt, sind physikalische Pixel und CSS-Pixel zu berücksichtigen, wie man erfährt. Dazu gibt es aussagekräftige Abbildungen im Buch. Logisch folgend, wird das Viewport-Metatag mit all seinen Eigenschaften in einer Tabelle gezeigt und es gibt ein Beispiel für das richtige Setzen des Viewports für eine mobil optimierte Website. Nach dem Metatag erfährt man, wie die @viewport-Anweisung in CSS aussieht und eingesetzt wird und auch hier gibt es wieder eine vollständige Tabelle mit Eigenschaften, Werten und Beschreibung. Für die praktische Anwendung wird auf die Eigenschaft width eingegangen und danach der Sinn von Werten im em für Media Queries erklärt. Dazu wird eine sehr hilfreiche Box mit Erklärung und Beispiel zur Umrechnung der Breakpoints von Pixeln in em angeboten. Dann erfährt man mehr zu den weiteren Medieneigenschaften wie height, orientation, aspect-ratio usw. und es gibt wieder eine übersichtliche Tabelle diesmal zu Smartphones und Tablets mit Angaben zu Hardwarepixel, Seitenverhältnis, Pixeldichte, Bildschirmauflösung und CSS-Pixel.

Die Autoren gehen dann auf die Browserunterstützung und Fallback-Lösungen ein. Natürlich muss man bei alten Internet Explorern zusätzlich mit Conditional Comments arbeiten, was erfahrene Webdesigner sicher nicht verwundert. Probleme kann es aber auch an anderen Stellen geben und entsprechende Lösungen sind dann auch in diesem Kapitel zu finden. Es werden diverse JavaScript-Plug-ins vorgestellt und wie im gesamten Buch, immer wieder auf interessante Ansätze anderer Webworker mit Internet-Adresse hingewiesen. Nicht minder interessant sind die Möglichkeiten der serverseitigen Geräte- und Feature-Erkennung. Wie in jedem Kapitel, gibt es am Ende eine Zusammenfassung. Hier schließt sich noch eine Info-Box mit dem Wichtigsten an. Das ist sicher hilfreich, um beim Nachschlagen schnell an relevante Informationen zu kommen.

Ein responiver Workflow

Das vierte Kapitel widmet sich ganz dem Arbeitsablauf für die Planung, das Design und dem Erstellen von responsiven Websites. Aktuelle Workflows werden mit früheren Vorgehensweisen verglichen. Statische Designentwürfe sind offensichtlich nicht mehr angesagt, wie einem die Autoren auch mit einigen Abbildungen verdeutlichen. Photoshop rückt nach hinten. Es geht eher um Moodboards und Erläuterungen zu Struktur und Hierarchie von Inhalten sowie um Style Tiles und Wireframes und auch Mockups. Man erfährt außerdem mehr über den Einsatz von Frameworks und Website-Editoren als Design-Werkzeuge. In diesen Zusammenhängen werden nützliche Vorlagen und Tools vorgestellt und verlinkt, welche die Arbeit erleichtern können. Auch mit guten Ratschlägen sparen die offensichtlich erfahrenen Autoren nicht, z.B. wenn es um das Einbeziehen von Kunden geht. Wieder schließt das Kapitel mit einer Zusammenfassung.

Design und Typografie

Die Autoren weisen im fünften Kapitel darauf hin, dass für das responsive Webdesign und einheitlichem Benutzererlebnis auf allen Geräten, andere Regeln gelten und stellen optimale Prinzipien und Ansätze vor und machen mit den Design- und Usability-Anforderungen sowie mit Eigenarten der Typografie vertraut.

In einem ersten Tipp wird auf die Wichtigkeit von möglichst echten Inhalten hingewiesen. Da der spätere Content nicht immer verfügbar ist, muss man sich oftmals anders helfen. Hierfür wird ein jQuery-Plugin vorgestellt, welches beim Neuladen stets prozentual von der idealen Textlänge abweicht und damit die Erstellung eines sinnvollen Designs erleichtert.

Bei der riesigen Anzahl an heutigen Geräten müssen Designer die Kontrolle abgeben, behaupten die Autoren wohl zurecht und zeigen Lösungen z.B. mit dem Atomic-Design-Ansatz und mit Pattern Lab auf. Gemeint ist ein Design von innen nach außen und Seiten aus Modulen zusammenzusetzen. Nach einer ausführlichen Erklärung zum Umgang mit Pattern Lab weisen die Autoren auf den Umgang von Menschen mit den unterschiedlichen Geräten hin und was das für das Design bedeuted. Hierzu werden viele Tipps gegeben und anhand konkreter Beispiele auch gezeigt, wie man es nicht machen sollte.

In einem weiteren wichtigen Thema wird auf die Unterschiede von Maus und Fingerbedienung ebenfalls mit guten und schlechten Beispielen eingegangen. Es folgen mögliche Lösungen um z.B. ein Hover zu ersetzen bzw. für mobile Geräte zu definieren und Touchgesten zu verwenden. Auch die Themen wie Geräte gehalten werden oder der eventuell animierte Layout-Wechsel beim Drehen des Geräts und sonstige Geräteunterschiede, bringen gute Erkenntnisse für das optimale Design.

Dann folgen wichtige Informationen zur Typografie, wie die Wahl der richtigen Schriftart und der Umgang mit eingebetteten Schriften oder dem Laden eines anderen Schriftschnittes für mobile Geräte usw. Für die Wirkung verschiedener Schriften wird ein hilfreiches Tool vorgestellt, welches mehrere Schriften nebeneinander darstellen kann und auch ein Webdienst wird erwähnt, der im Wesentlichen allerdings kostenpflichtig ist. Außerdem werden noch Bookmarklets für den Schriftenvergleich erwähnt. Welche Einheiten für Schriftgrößen bei responsiven Sites ideal sind, erfährt man in den weiteren Ausführungen. Natürlich werden relative Einheiten bzw. eine ganz besonders empfohlen und hier gut beschrieben. Zu berücksichtigen sind aber auch die Zeilenlänge und der Durchschuss, was bei fluider Gestaltung herausfordernd sein kann. Wer dieses Kapitel liest, wird aber eine Lösung finden. Ebenfalls sehr spannend ist der beschriebene automatische Mehrspaltensatz mit der CSS-Eigenschaft column-count und auch die Silbentrennung mit CSS und JavaScript. Mit der Zusammenfassung schließt auch dieses Kapitel.

Semantik und Barrierefreiheit

Viele der Anforderungen von responsiven Websites kommen auch der Barrierefreiheit zugute. Dennoch sind weitere Dinge zu beachten, wie jetzt in Kapitel 6 beschrieben wird. Es geht um die semantische Strukturierung mit HTML5 oder auch ARIA-Rollen. Navigationen sollten einfach gehalten und idealerweise nach dem Prinzip Mobile First vorgegangen werden und einiges mehr. Dabei starten die Autoren mit den vier Prinzipien der Zugänglichkeit. Unter anderem geht es um Schriftgrößen, Farben und Kontraste und um eine verständliche Bedienung. Animationen und Robustheit werden angesprochen bevor es dann mit der Semantik durch HTML5 weitergeht. Wer sie nicht bereits nutzt, lernt jetzt die neuen HTML5-Elemente und ihren Nutzen in ausführlichen Beschreibungen kennen. Dabei kommen auch die vielen Formularattribute inklusive Code-Listings nicht zu kurz. Darauf folgen ausreichend Hinweise zu den WAI-ARIA-Rollen für Tastaturnutzer. Wie an vielen anderen Stellen im Buch, werden auch hier wieder weiterführende Quellen angegeben.

Responsive Layout-Patterns

Jetzt in Kapitel 7 geht es um den Aufbau von responsiven Websites. Das bereits angesprochene Mobile First begegnet einem hier wieder. Zunächst werden einige Gedanken zum Sinn und Vorgehen an den Leser gebracht. Dann geht es los mit einer Smartphone-Ansicht, welche zum HTML5 die passenden WAI-ARIA-Rollen bekommt. Dafür wird ebenso ein Listing abgebildet, wie für die folgenden CSS-Anweisungen. Dort geht man auf die Vorteile von Normalisierung anstelle von Reset ein, wenn es um die Default-Werte von Browsern geht. An diversen Stellen im Buch tauchen immer wieder kleine aber wichtige Tricks auf. So erfährt man, wie man das CSS-Boxmodell auf alle Elemente im HTML anwendet und gleichzeitig mittels Vererbung die Beeinflussung anderer Komponenten verhindert.

Im Weiteren arbeiten sich die Autoren von einem einfachen Basislayout immer weiter vor um passende Designs für Smartphones, Tablets und Desktops zu erreichen und erklären dabei alle Schritte sehr nachvollziehbar. Man lernt, woran man erkennt, wann Breakpoints zu setzen sind und wie Media Queries besser strukturiert werden. Mit den Layout-Patterns werden Darstellungsmuster für diverse Ausgabegeräte gezeigt, wovon es so einige gibt. Sehr spannend sind die Erläuterungen zum Flexbox-Layout und zum Grid-Layout mit CSS3. Zu allen Beispielen gibt es Abbildungen und Listings. Außerdem kann auch immer der fertige Code von der zum Buch gehörenden Downloadseite heruntergeladen werden.

Frameworks für responsives Design

Alles wäre super, wenn immer alles mit allen Browsern funktionieren würde. Anscheinend haben sich Probleme die es schon früher gab, nicht aufgelöst. Sie haben sich vielleicht nur verschoben. Schon immer haben vor allem die Internet Explorer viele hilfreiche und zeitsparende Features verhindert und dem Webdesigner das Leben schwerer gemacht, als es hätte sein müssen. Was die Browser inzwischen endlich können, ist schon nicht mehr neu. Aktuelle Techniken verstehen wieder nicht alle Browser oder es muss anders gemacht werden. Hier haben dann Frameworks ihre Berechtigung, welche Bugs und Einschränkungen aller Browser automatisch umgehen können.

Zurecht verweisen die Autoren auf eine mittlerweile kaum mehr überschaubare Anzahl an Frameworks und helfen, die richtigen zu finden bzw. erklären die wichtigsten Möglichkeiten. Das geht los mit Gridpak, HTML5-Boilerplate und Initializr. Responsive Frameworks werden kurz mit ihren Eigenschaften vorgestellt. Natürlich ist da auch das bekannte Bootstrap mit dabei, wofür auch das Bootstrap-Studio für grafisches Editieren vorgestellt wird. Da Frameworks auch JavaScript-Bibliotheken nutzen, werden auch diese vorgestellt, allen voran jQuery. Desweiteren gehen die Autoren auf Präprozessoren wie SASS und Co. ein. Gezeigt werden Variablen, Notation und CSS-Output.

Navigationskonzepte

Eines der wichtigsten Themen überhaupt, ist die Navigation, worüber das Kapitel 9 handelt. Hier starten die Autoren zunächst wieder mit diversen Erklärungen und Hinweisen, um für ein gutes Grundverständnis zu sorgen. Dann folgt ein Praxisbeispiel mit Mininavigation. Im weiteren Verlauf erfährt man, wie lange Menüs kompakt angeordnet werden. Dann folgt wieder ein Praxisbeispiel diesmal für ein Priority-Menü, dann für ein Select-Menü, dann für eine Footer-Navigation mit Anker, Toggle-Menü, Multilevel-Menü usw. Zu allen Beispielen gibt es Listings für HTML und CSS. Am Ende kennt man die Grundlagen einer guten Navigation und versteht, was es mit Navigationsmuster aufsich hat.

Flexible Bildelemente

Kapitel 10 nimmt den meisten Platz im Buch ein. Es geht um Elemente wie Bilder, Videos oder Inline-Frames, welche feste Dimensionen aufweisen. Auch diese sollen ja flexibel sein bzw. eingebaut werden können. So starten die Autoren auch gleich mit anpassungsfähigen Bildern. In einem ersten Praxisbeispiel geht es um ein Headerbild inklusive Bildunterschrift. Diverse Möglichkeiten wie z.B. die ausschnittsweise Anzeige, aber auch flexible und mit Bild und Text gefüllte Teaserboxen werden besprochen. Weiter geht es mit Hintergrundbildern und dazu mit einem Praxisbeispiel für gekachelte Bitmap-Muster. Hier lässt sich vieles mit CSS3 anstellen, wie man erfährt. Ebenso fehlt nicht der Hinweis zu SVG-Hintergrundbildern und etwas weiter hinten ganz detaillierte Ausführungen dazu. Es folgen weitere Praxisbeispiele und viele hilfreiche Erläuterungen.

Dann geht es auf sehr vielen Seiten sehr ausführlich um responsive Icons, hilfreiche Tools zum Erstellen von Icon-Sets und man ahnt es schon, natürlich wieder mit Praxisbeispielen z.B. zu CSS-Sprites. Ein interessanter Ansatz der mit Vorteilen und Nachteilen vorgestellt wird, ist die Verwendung von Icon Fonts. Nach einer umfangreichen Abhandlung über SVG wird die Syntax für responsive Bilder geklärt. Dabei wird man auch auf Spezifikationsänderungen hingewiesen. Es folgen viele weitere Tipps und Tricks zu dem doch komplexen Thema und es werden auch wieder hilfreiche Tools zur Unterstützung vorgestellt.

Mehr flexible Inhalte

Mit dem bisher Erlernten ist ja schon eine ganze Menge möglich und viele Probleme lassen sich lösen. Aber das war es natürlich noch nicht. Wie soll man zum Beispiel eine Bildergalerie, Slideshow, Videos oder auch eine Image Map, flexible Tabellen oder HTML5-Formularelemente responsiv einpflegen? Mittlerweile in Kapitel 11 angekommen, bekommt man auch dazu Lösungen präsentiert und erfährt obendrein, was bei E-Mails zu beachten ist und wie sich responsives Design auf die Werbung auswirkt.

In einem Praxisbeispiel werden Bilder-Slider mit dem Slick-Plug-in eingesetzt und natürlich der Code gezeigt. Selbiges Plug-in wird dann für ein Bilderkarussell in mehreren Varianten und für einen Textblock-Slider genutzt. Weitere interessante Bildergalerie-Tools werden vorgestellt und dann responsive Lightboxen angesprochen. In einem Beispiel wird hierfür das Fancybox-3-Plug-in verwendet. Nach einem weiteren Praxisbeispiel für eine Image Map mit jQuery-Plug-in sind anpassungsfähige Videos an der Reihe. Man erfährt, welche Browser welche Formate unterstützen und es gibt wieder ein Praxisbeispiel mit HTML5. Wer Videos von YouTube usw. einbinden will, muss sich mit iframes befassen und hier gibt es wieder einige Eigenheiten zu beachten, welchen die Autoren unter anderem mit dem Intrinsic-Ratio-Trick begegnen. Zudem werden wieder einige JavaScript-Tools vorgestellt.

Auch Karten lassen sich flexibel einbinden. Hierzu gibt es jeweils ein Beispiel mit einer Google Map im iframe und mit Google API. Es folgen Beispiele zu Tabellen, welche z.B. durch Scrollen zugänglich gemacht werden. Wieder kommen hier CSS aber auch JavaScript-Plug-ins zum Einsatz. Es geht weiter mit Akkordeons, flexiblen Formularen und regulären Ausdrücken. Nun geht es darum, Inhalte nur bei Bedarf selektiv anzuzeigen und zu laden. Eine sicher altbekannte gezeigte Lösung ist die CSS-Anweisung display:none. Es wird aber auch gleich auf mögliche Performance-Probleme mit dieser Methode hingewiesen. Auch hier folgen wieder diverse Praxisbeispiele um Inhalte via CSS hinzuzufügen oder Inhaltsblöcke neu anzuordnen. Dann geht es um flexible Werbung und alte und neue Bannerkonzepte werden besprochen. Beim Thema Responsive Ads wird ZURB-Playground und Google Responsive Ads erwähnt. Schließlich wird auch noch erklärt, wie HTML-E-Mail-Templates responsiv eingesetzt werden können.

Testing und Qualitätssicherung

Wie der Titel schon sagt, wird im zwölften Kapitel die fertige Website vorausgesetzt. Es geht um diverse Tests, die durchgeführt werden sollten. Natürlich dürfen hier Hinweise zu Validatoren für HTML und CSS und die diversen Browsertools von Firefox, Chrome usw. nicht fehlen. Aber auch Browserunabhängig gibt es Tools die vorgestellt werden. Auch gibt es Testlabors für realitätsnahes Testen, welche beschrieben werden. Für manche Szenarien sind auch Cloud-Anbieter eine gute Wahl, wie die Autoren meinen und entsprechende Angebote zeigen. Es folgen hilfreiche Tipps zur Qualitätssicherung und Wartung. Das betrifft zum Beispiel das Erstellen und Pflegen einer Dokumentation, wofür es auch wieder Hilfsmittel gibt. Im weiteren Verlauf dieses Kapitels wird noch vieles angesprochen, was es zu beachten gilt und was die Arbeit erleichtert.

Performanceoptimierung

Natürlich soll eine fertige Site und vor allem eine mobile, möglichst schnell laden und keinen überflüssigen Ballast aufweisen. Das wird schließlich auch von Suchmaschinen honoriert und verspricht eventuell ein besseres Ranking. Kapitel 13 greift hierbei unter die Arme. Zunächst werden wieder grundlegende Überlegungen vermittelt und z.B. AMP von Google kurz beschrieben. Kritische Anmerkungen die es speziell zu AMP an diversen Stellen im Internet gibt, werden hier anderes als bei der Facebook-Lösung nicht gemacht. Allerdings werden teilweise zu lange Ladezeiten von Web-Apps nicht verschwiegen. Weitere Gedanken befassen sich mit dem Performancebudget, also z.B. der Gesamtmenge von Daten.

Es folgen wieder Tipps, um zu erkennen, was die Performance beeinträchtigt. Unter der Überschrift "Anatomie einer Website" werden die wesentlichen Bremsen für eine schnelle Auslieferung aufgezeigt. Besonders zu den HTTP-Requests gibt es eine ausführliche Beschreibung. Anhand von Codebeispielen wird dann gezeigt, wie man es besser machen kann und überflüssige Skripte, Stylesheets und HTML vermeidet. Weiter geht es mit Automatisierungen durch Taskrunner und Watcher sowie die externe Nutzung von Inhalten durch Content Delivery Networks (CDN).

Auch Drittanbieterskripte und Social-Media-Buttons können bremsen. Dazu verweisen die Autoren auf Meinungen, welche den Verzicht auf Twitter-Buttons und Co. durchaus propagieren und zeigen eine Abbildung, welche die Verlangsamung durch Google, Facebook, Twitter usw. sehr schön zeigt. Es folgen weitere Hinweise um Requests zu sparen. Auch Minifying und Dateikompression sowie Caching und die Optimierung für Grafiken und Bilder sowie Web-Schriften kommen zur Sprache. Auch auf die Reihenfolge in der Dateien geladen werden, wird hingewiesen. Es folgen wieder Praxisbeispiele zum Laden von Bildern oder dem Nachladen von Inhalten.

Bei Kapitel 14 handelt es sich um das Fazit der Autoren. Dort blicken sie nochmal in die Zukunft des responsiven Webdesigns und ziehen ein kurzes Resümee zum derzeitigen Stand. Es folgt der Anhang mit Hinweisen zur Website zum Buch, wo auch die Codebeispiele heruntergeladen werden können und mit Quellennachweisen der verwendeten Bilder. Und natürlich kommt noch der Index mit Seitenzahlen für ein schnelles Auffinden gewünschter Begriffe im Buch.

Fazit

Dem Buch Responsive Webdesign merkt man die dritte Auflage an. Es wirkt sehr ausgereift und dennoch so aktuell, wie ein Buch eben sein kann. Die umfangreiche und komplexe Materie wirkt gar nicht kompliziert, was auch am verständlichen Schreibstil sowie den aussagekräftigen Abbildungen und Listings liegen dürfte. Die gezeigten Beispiele sind praxisnah und damit sehr gut für eigene Zwecke umsetzbar. Sehr hilfreich ist dabei, den Code zu allen Beispielen herunterladen zu können. Ebenso wie flexible und barrierearme Websites heute und in Zukunft unverzichtbar sind, ist auch dieses Werk ein Muss für alle Webdesigner. Mit ihrem Buch Responsive Webdesign - Konzepte, Techniken, Praxisbeispiele sprechen die kompetenten Autoren alle relevanten Themen an, womit die Bezeichnung Standardwerk zutreffend ist.