Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website - aktuell zu CSS3 (Galileo Design) [Gebundene Ausgabe]

Als Webentwickler ist man ja gewöhnt, sich Infos im Internet zusammenzusuchen. Dennoch suche und schätze ich immer auch Bücher, die den Informationswust sinnvoll aufbereiten und zusammenfassen. Und diesbezüglich ist dieses Buch tatsächlich eine Rarität: ein deutschsprachiges Webdesign-Buch mit Workshop-Charakter, vollgestopft mit hochwertigen Beispielen und wichtigen Tipps.

Zu Beginn findet sich eine obligatorische, aber knackig gehaltene CSS-Einführung (Funktionsweise von CSS, Box-Modell, Positionierung, Progressive Enhancement, etc). Gleich darauf geht Heiko Stiegert aber ins Eingemachte: anhand klarer, vielschichtiger und sehr praxisbezogener Beispiele (die allesamt auch auf DVD beiliegen) lernt man alle wichtigen Neuerungen in CSS3 kennen und bekommt Anregungen, wie und warum man diese einsetzen kann oder soll.

Dabei legt der Autor nicht nur Wert auf funktionale und optisch ansprechende Beispiele sondern erklärt sehr pragmatisch die Vor- und Nachteile bestimmter Techniken. Er stellt wichtige Zusammenhänge her zwischen eingesetzten Techniken und deren Auswirkung auf SEO, Conversion, Performance, Barrierefreiheit usw. Damit ist das Buch nicht nur für Webentwickler interessant sondern gibt auch dem technisch interessierten Projektleiter wichtige Argumente an die Hand, mit denen er/sie Kunden den Hintergrund eingesetzter Techniken erklären kann.

Alle Beispiele im Buch folgen dem Responsive Design-Ansatz, womit der Autor seinen Lesern zusätzlich zu CSS3 auch eine zukunftsorientierte Herangehensweise an Websitestruktur und -programmierung nahebringt. Zudem finden sich bei allen Beispielen wichtige Hinweise, spezifische Tücken oder Links zu weiterführenden Websites übersichtlich in Textkästen neben den eigentlichen Workshops gepackt.

Das Buch bietet üblichen Internet-Resourcen gegenüber einen wesentlichen Mehrwert durch die intelligente und sinnvolle Aufbereitung der Informationen. Die unzähligen Verweise auf gute Websites zur Weiterbildung runden das Buch ab und tragen dazu bei, dass ich es für eine der besten deutschsprachigen Resourcen zum Thema halte.

Diese Rezension wurde ursprünglich auf kulturbanause.de veröffentlicht.

Teil 1 - Die Grundlagen
Im erste Teil des Buches widmet sich Heiko Stiegert zunächst der Frage, welche Anforderungen modernes Webdesign erfüllen sollte und beschreibt anschließend die Grundlagen zum Verständnis von CSS. Es wird erklärt, welche verschiedenen Inhaltstypen (z.B Block- und Inline-Elemente) es gibt, wo die Unterschiede im Verhalten der Elemente liegen und wie Objekte innerhalb einer Website positioniert werden können. Auch die verschiedenen Layouttypen einer Website wie 'Fixed-, 'Fluid-' und 'Elastic-Layouts' werden in diesem Zusammenhang ausführlich beschrieben und anhand zahlreicher Beispiele verdeutlicht.
Bereits in diesem Teil des Buches finden sich erfreulich viele Insider- und Praxis-Tipps und werten die für fortgeschrittene Anwender häufig überflüssigen "Basis-Kapitel" enorm auf. So geht Heiko Stiegert beispielsweise auf die Namenskonventionen innerhalb von CSS-Dokumenten ein oder gibt Tipps und Hilfestellungen zum Umgang mit browserspezifischen CSS3-Präfixen. Selbst auf Internet Explorer typische Bugs (hasLayout & Co.) und die aus HTML5 Boilerplate bekannte Technik CSS-Klassen für die IEs per Conditional Comment zuzuweisen wird bereits in den Basics eingegangen. Um nur einige Beispiele zu nennen.
Den Abschluss des Grundlagen-Teils bilden Kapitel zur Performance-Verbesserung von Websites (CSS-Sprites, Code-Kompression, Smush.it etc.) und diverse Tipps und Tools zum Testen und Debuggen der Seite während der Entwicklungsphase.

Teil 2 - Seitenelemente
Im zweiten Teil des Buches geht es direkt mit purer Praxis los. Nachdem in den Grundlagen bereits alle relevante Techniken und Kniffe behandelt wurden, werden nun unterschiedlichste CSS3-Techniken an konkreten Praxisbeispielen gezeigt. Hierbei legt der Autor großen Wert darauf, die technischen Unterschiede hinsichtlich der verschiedenen Browser zu berücksichtigen. Das Beispiel einer Tab-Navigation wird daher sowohl mit CSS3 beschrieben; die Fallback-Lösung mittels 'Sliding-Doors' Technologie für ältere Browser wird aber gleich mitgeliefert.
Die Workshops in diesem Kapitel gefallen mir allesamt sehr gut, denn sie zeigen keine schon 1000 mal gesehenen Beispiele sondern interessante und anspruchsvolle CSS3-Techniken. Ob Tooltips, Font-Embedding mittels @font-face, Media Queries, CSS-Keyframe-Animationen, Formular-Design oder eine Lightbox ohne JavaScript - alle Beispiele sind absolut brauchbar und lassen sich mit Sicherheit auf ein zukünftiges Projekt adaptieren.

Teil 3 - Trends, Tipps, Tricks
Auch der dritte Teil des Buches besteht in erster Linie aus Praxis-Beispielen. Der Hauptunterschied zum zweiten Teil ist, dass diese Workshops aktuelle und beliebte Technik-Trends abbilden und komplexer, also auch umfangreicher sind.
Heiko Stiegert behandelt hier unter anderem den Parallax-Effekt, das Design von Blog-Kommentaren, Breadcrumb-Navigationen und die Erstellung eines mit CSS animierten Portfolios.

Teil 4 - Web 3.0
Web 3.0. Dieser Titel klingt durchaus vielversprechend. Im letzten Teil des Buches werden, wie zu erwarten, die fortgeschrittensten und technisch aufwändigsten Workshops behandelt.
Die ersten Beispiele zeigen High-Level CSS3-Styling mit Verläufen, Drehungen und Interaktion. Diese Beispiele sind durchaus sehenswert - gehören für mich thematisch jedoch eher noch in den dritten Teil des Buches.
Ganz anders sieht es dann mit den letzten Kapiteln aus: Responsive Webdesign mit Media Queries & Co, mobiles Webdesign und Mikroformate. Diese Themen dürfen in einem Buch über modernes Webdesign natürlich keinesfalls fehlen und werden auf 50 Seiten auch angemessen behandelt.
Das bereits bekannte Tab-Navigation-Beispiel wird mit Media Queries für mobile Endgeräte aufbereitet und die Darstellung des Inhalts sowie die Usability der Hauptnavigation den Touch-Screens entsprechend angepasst. Auch die Nachteile dieser Technik werden angesprochen.
Der Unterschied zwischen einer "normalen Website" und einer mobilen Seite bzw. einer Web-App wird zudem anhand eines in sich abgeschlossenen Workshops erklärt, an dessen Ende eine für iPhone & Co. optimierte Mini-Website steht.

Den Abschluss des Buches bilden einige Kapitel zum Thema "Semantisches Web". Hier werden Mikroformate wie hCard, hCalendar oder hReview beschrieben, mit denen bestimmte Inhalte einer Website für Suchmaschinen und andere Web-Dienste noch besser verständlich und nutzbarer gestaltet werden können.

Ein paar persönliche Worte
Ich muss zugeben, dass ich mich seit einigen Monaten auf das Erscheinen dieses Buches gefreut habe und mit entsprechend hohen Erwartungen an die Lektüre heran gegangen bin. Nicht, dass ich an Heikos Kompetenz zweifeln würde - vielmehr hatte ich Angst, dass ein Buch zu diesem Thema zu oberflächlich ausfallen könnte. Das ist immer sehr abhängig von der vom Verlag angestrebten Zielgruppe.
Ich will gar nicht lange schwafeln. Das Buch gefällt mir richtig gut und ich werde mir auf jeden Fall einige Kapitel noch einmal sehr ausführlich anschauen, denn viele Aspekte habe ich selbst so auch noch nicht gekannt oder eingesetzt.

Aufmachung und Verarbeitung des Buches sind erwartungsgemäß sehr wertig und hübsch anzusehen. Auch die Gestaltung der Beispiele gefällt mir sehr gut. Dem Buch liegt übrigens auch noch eine CD mit allen Beispiel-Dateien und einigen Probelektionen aus dem Video-Programm von Galileo Press bei. Diese habe ich mir allerdings bisher nicht angeschaut und kann daher keine Bewertung abgeben. Den positiven Gesamteindruck wird die CD aber wohl kaum negativ beeinflussen können.

Fazit
Heiko Stiegert hat mit "Modernes Webdesign mit CSS" einen rundum gelungenes Buch geschrieben. Vom engagierten Anfänger bis zum durchaus fortgeschrittenen Anwender wird hier sicher jeder fündig und kann die sehr praxisnahen Tipps direkt im nächsten Projekt einsetzen. Selbst die Grundlagen-Kapitel bieten viele hilfreiche Insider-Tipps und erhöhen so Mehrwert und Langzeit-Nutzen deutlich.

Selbst als Profi hält dieses Buch noch einiges an Überraschungen und Inspirationen bereit.
Die Texte sind, wie gewohnt gut gegliedert, der Quelltext seperat formatiert und schön bebildert, dass man die Auswirkungen der CSS-Anweisungen gut mitverfolgen kann.

In meinen Augen eine tolle Grundlage für Leute die schon Ahnung haben von der Semantik von html und css und vielleicht die ein oder andere Inspiration suchen.

Vom Basiswissen über bestimmte CSS Attribute, über Layouttypen im Web bis hin zu neuen Trends des Web 2.0 findet man hier alles was das Webdesignerherz begehrt.
Gestaltung von Kontaktformularen, trockenen Zahlen und Daten sind nur ein Bobbon dieses Buchs.

Absolut empfehlenswert!!