Dienstag,
05. August 2008

Galileo Press erweitert aktuell sein Portfolio im Bereich CSS. Heiko Stiegerts Buch CSS-Design – Die Tutorials für Einsteiger” (erschienen im Juni 2008) erscheint dabei aufgrund seines frischen Konzeptes besonders interessant. Die folgende Rezension entstand im Verlauf mehrerer Telefonate und Diskussionen in enger Zusammenarbeit mit “Little Boxes” Autor Peter Müller.

Konzept

Das erfrischende Konzept heißt Workshops und soll Einsteigern die Essenz von CSS nahebringen, ohne sie zu zwingen, die 458 Seiten von vorn nach hinten durchackern zu müssen. In insgesamt 30 Workshops mit einem Umfang von jeweils 10-20 Seiten werden dabei zahlreiche Themen des Webdesigns behandelt. Jeder Themenkreis umfasst drei bis vier in sich geschlossene Workshops. Sie starten jeweils mit einer kurzen Beschreibung des Arbeitsziels, gefolgt von der Entwicklung des HTML-Quellcodes und der Gestaltung der Elemente per CSS.

Der Schwerpunkt des Buches liegt ganz klar auf dem Designaspekt, weshalb das durchweg farbige Layout zu gefallen weiß und einen hervorragenden optischen Eindruck hinterlässt.
Unterbrochen werden die Workshops in regelmäßigen Abständen durch insgesamt 4 Exkurse, in denen kompakt CSS-Grundlagenwissen vermittelt wird. Die Zielgruppe sind – wie es der Titel bereits verrät – Einsteiger. Sie sollen CSS nicht aufgrund grauer Theorie, sondern anhand von ausgewählten Best-Practice-Lösungen erlernen, die ein breites Spektrum an Alltagsaufgaben abdecken.

Inhalt

Die Themenwahl des Buches ist ausgewogen. In den ersten Workshops geht es um die Gestaltung von Überschriften mit CSS und Image-Replacement-Techniken, dem Zusammenspiel von Text und Bild sowie listenbasierten Navigationen. Später steigt der Anspruch. So werden Bildergalerien mit CSS gestaltet und mittels JavaScript zum Leben erweckt, dann geht ans Eingemachte bei der Gestaltung von Formularen und Tabellen.  Die letzten drei Themenkreise umfassen den kreativen Umgang mit Hintergrundgrafiken, einen Einblick in die Erstellung fixer, elastischer und flexibler Layouts sowie einem abschließenden Special zu Diagrammen und Mikroformaten. Die neun Themenkreise sind abwechslungsreich und bieten für Einsteiger augenscheinlich einen umfassenden Überblick, wobei sich innerhalb der Themenbereiche einfache und anspruchsvollere Beispiele durchaus abwechseln.

Heiko Stiegert schreibt flüssig und nicht zu kompliziert, sodass man seinen Gedanken immer folgen kann. Alle Beispiele funktionieren fehlerfrei auf aktuellen Browsern sowie im IE6 und sind vollständig auf der Buch-DVD enthalten. Diese enthält übrigens neben zahlreichen Demoversionen verschiedenster HTML-Editoren noch vier zusätzliche Workshops im PDF-Format (natürlich ebenfalls im schicken, farbigen Layout des Buches), die nicht mehr im Buch untergebracht werden konnten.

Alles in allem eine runde Sache – möchte man meinen, dennoch ist das Buch nichts für Einsteiger, was im Folgenden auch begründet werden soll.

Kritik

Das Buch startet ohne jede Einleitung direkt mit dem Exkurs “Was sind Cascading Style Sheets”, was auch gleich im ersten Satz erklärt wird: “Cascading Style Sheets, oder kurz CSS, ist eine deklarative Auszeichnungssprache zur Definition von Formateigenschaften einzelner (X)HTML-Elemente.” Alles klar?

Im Anschluss werden die Möglichkeiten zur Einbindung von CSS in HTML vorgestellt, wobei von der Einbindung per STYLE-Element und STYLE-Attribut strikt (und ohne Ausnahmen) abgeraten wird. Dass diese Optionen in der namensgebenden “Kaskade” sehr wohl ihre Berechtigung haben, wird verschwiegen. Dafür werden im Schnellverfahren die Einbindung externer Stylesheets per LINK-Element, per @import-Regel und Conditional Comments für den Internet Explorer eingeführt, was Einsteiger mit Sicherheit überfordern dürfte.

Teilweise konstruierte Beispiele

Eigentlich sollten die Workshops Best-Practice-Lösungen anbieten, doch viele der Beispiele wirken konstruiert. Gleich im ersten Workshop “Überschriften per CSS gestalten” soll eine Überschrift zweizeilig dargestellt und gestaltet werden. Dazu wird der hintere Teil der Überschrift mit einem SPAN-Element umschlossen, welches für den Umbruch in die zweite Zeile sorgt. Ohne jede Erklärung sehen sich Einsteiger in diesem Workshop mit der Kurzschreibweise der font-Eigenschaft konfrontiert, einschließlich relativer Schriftgröße und Zeilenabstand. Dann wird plötzlich auch noch der Selektor :first-line eingeführt, um der ersten Zeile der Überschrift eine andere Farbe zuzuweisen. Egal welchen Teil der Überschrift man mit dem SPAN umschließt, mit h1 { ... } und h1 span { ... } lassen sich beide Teile vollständig gestalten, :first-line ist hier absolut unnötig und bläht das CSS nutzlos auf.

Ein weiteres Beispiel folgt im Workshop “Sind Gutenbergs Grundlagen auch auf das WWW übertragbar”. Hierbei geht es um die Positionierung nebeneinander liegender Textblöcke. Für viele Einsteiger ist das der Punkt, wo sie aus purer Verzweiflung zu Tabellen greifen, daher sind Lösungsvorschläge bei Einsteigern in höchstem Maße willkommen. Heiko Stiegerts Angebot basiert auf dem Multi-Column-Modul, welches vielleicht in CSS3 enthalten sein wird. Der Ansatz ist wunderbar einfach, logisch und leicht nachzuvollziehen. Dumm nur, dass weder das Multi-Column-Modul noch CSS3 praxisrelevant sind, unter anderem weil der Internet Explorer (IE5.x – 8.0) nichts dergleichen darstellen kann. Darauf weist der Autor am Ende des Workshops in der Marginalspalte auch hin, nur leider ohne Alternativen aufzuzeigen – oder per Querverweis auf den Workshop “Infoboxen in mehrspaltigem Layout”, ca. 150 Seiten weiter hinten im Buch zu verweisen, der zumindest einen gangbaren Lösungsweg aufzeigt.

Auch in den späteren Workshops wiederholt sich der Eindruck, konstruierter Beispiele. So wird beispielsweise im Workshop “Kooperation in Text und Bild” dem IE6 mühsam mittels JS-Hack die korrekte Darstellung alphatransparente PNG-Grafiken beigebracht, obwohl in dem konkreten Fall ein transparentes GIF vollkommen ausreichend gewesen wäre, was selbst der IE5.x problemfrei darstellt. Eine Übersicht darüber, wann welches Grafikformat (GIF, PNG 8-/24-bit, JPEG) sinnvoll ist, hätte ich mir hingegen in einem designorientierten Buch gewünscht.

Fachbegriffe, interne und externe Querverweise

Die Idee von in sich stimmig gestalteten Workshops ist ausgezeichnet, allerdings übertreibt man es hier mit der Abgrenzung. Das Buch enthält so gut wie keine Querverweise. Die Handvoll existierender Verweise in der Form “siehe Kapitel 2” sind weitgehend nutzlos, da die Workshops nicht nummeriert sind.

Auch auf Fachbegriffe und externe Verweise (Links zu Webseiten) wird verzichtet. Im Workshop Image-Replacment verwendet Heiko Stiegert die Phark-Methode, ohne sie beim Namen zu nennen. Gleichzeitig wird zur Wachsamkeit ermahnt: “... denn manche der Image-Replacement-Methoden setzen display:none ein”. Ist das wirklich der Fall? Jens Meierts Übersichts-Artikel (eigentlich ein Pflichtlink) erläutert 16 anerkannte Image-Replacement-Methoden (natürlich auch Phark) – und keine der vorgestellten Methoden verwendet display:none, was in der Tat der falsche Weg wäre. Einsteiger werden hier verunsichert, obwohl es im Internet gute Informationsquellen gibt, die zeigen, dass es dafür gar keinen Grund gibt.

Im ersten Navigations-Workshop wird eine horizontale Navigation erstellt, wobei die “Sliding-Doors”-Technik zum Einsatz kommt, ohne die Bezeichnung zu nennen. Einsteiger mögen zunächst begeistert sein, doch das Thema ist nichts Neues und Google weiß zu diesem Begriff eine Menge zu berichten. Ohne den Fachbegriff bleibt die Tür zu diesen Informationen allerdings verschlossen.

Aufgrund des anwendungsorientierten Workshop-Charakters sind Einsteiger zwangsläufig auf zusätzliche Lektüre angewiesen. Da ist es ungünstig, dass in mehreren Workshops SPAN- oder A-Elemente (beides klassische Inline-Elemente) zu Block-Elementen umdefiniert werden. Ein Hinweis auf das dahinterstehende Prinzip, mindestens aber die Erwähnung der Fachbegriffe, wären mehr als nur wünschenswert.

Am meisten gestört hat mich die Wahl des Markups im Workshop “Ein barrierefreies Formular”. Heiko Stiegert verwendet darin ohne Begründung Definitionslisten zur Gliederung der Input-Elemente und Labels, was mit Sicherheit diskussionswürdig ist. Das Formular bleibt weitgehend ungestylt, die Elemente werden lediglich horizontal ausgerichtet. Im darauffolgenden Workshop “Ein attraktives Formular” (Workshop-Titel auf der DVD) wird im Markup hingegen plötzlich eine unsortierte Liste verwendet und auch die optische Gestaltung des Formulars macht deutlich mehr her. Der im Vorwort definierte Anspruch des Buches “Ein Design muss unter Berücksichtigung von Accessibility und Usability schon lange kein fades und langweiliges oder einfach nur schmückendes Beiwerk sein.” wird in den Formularbeispielen aus der Sicht des Lesers ad absurdum geführt, denn das barrierefreie Formular verwendet streitbares Markup und sieht hässlich aus. Das “attraktive” Formular hingegen verwendet ein anderes Markup, was die Vermutung aufkommen lässt, nicht mehr barrierefrei zu sein bzw. das Barrierefreiheit und schöne Optik halt doch nicht zusammen passen. Einsteiger werden sich mangels Verweisen auf weiterführendes Infomaterial (beispielsweise der Beitrag “Reine Formsache” bei Einfach-fuer-Alle.de) zwangsläufig falsch orientieren.

Das Fehlen eines einleitenden Kapitels zur Beschreibung einiger wichtiger Arbeitsgrundlagen, sowie der vollständige Verzicht auf Querverweise führt beispielsweise dazu, dass der Leser die Berechnungsvorschrift einer relativen Schriftgröße als Prozentwert (Zielgröße / Schriftgröße des Elternelements = Eingabewert in Prozent) über 100 Mal in der Marginalspalte wiederfindet, teilweise bis zu drei Mal auf einer Doppelseite. Beim Lesen des Buches stören die endlosen Wiederholungen schnell und es ist schade um den Platz, der für andere Informationen hätte genutzt werden könnten.

Auch einige grobe Fehler finden sich im Buch. So wird auf Seite 358 dem Internet Explorer 6 fälschlicher Weise nachgesagt, das Box-Modell generell fehlerhaft zu interpretieren. Diese Aussage ist schlicht weg falsch. Im Standard Mode interpretiert der IE6 das Box-Modell korrekt. Der Box-Modell-Bug (bekannt vom IE5.x) ist lediglich im Quirks Mode aktiv und sollte damit bei standardkonformen Webseiten und in den Workshops (die alle auf XHTML 1.0 Strict basieren) keine Rolle spielen.

Was uns gefiel

Die ausführliche Beschreibung der einzelnen Kritikpunkte soll nicht den Eindruck erwecken, das Buch sei generell unbrauchbar. Deswegen möchten wir nach all den kritischen Anmerkungen ein Lob für die zahlreichen gelungenen Workshops nicht unterschlagen.

So wird beispielsweise im dritten Workshop die Implementation des Flash Replacements (sIFR) sehr gut nachvollziehbar erklärt. Der Workshop zur Gestaltung von Zitaten unter Einbeziehung einiger typographischer Rafinessen gefällt ebenso wie die drei Tutorials zur Gestaltung von Tabellen mit CSS, wobei der gestalterische Anspruch schrittweise gesteigert wird. In zwei weiteren Workshops zeigt Heiko Stiegert, wie man mit HTML und CSS eine kleine Bildergalerie zaubert. Der zweite Workshop geht noch einen Schritt weiter und bringt JavaScript mit ins Spiel. Beide Workshops dürften auch Einsteigern helfen, bei komplexeren Aufgaben sicher ans Ziel zu kommen. Natürlich geht das JavaScript-Beispiel im Rahmen des Workshops nicht sonderlich in die Tiefe, aber es zeigt das grundlegende Konzept, JavaScript unaufdringlich als Präsentationslayer über HTML und CSS einzubinden.

Einen schönen Abschluss des Buches bilden die fünf Specials, in denen weniger Alltägliches aber nicht weniger interessante Lösungen für die Erstellung einfacher Balkendiagramme, Sitemaps sowie für die Gestaltung der wichtigsten Mikroformate (hCard, hCalendar, hReview) vorgestellt werden.

Fazit

CSS-Design ist ein interessantes Buch mit vielen praktischen Detaillösungen, jedoch für Einsteiger nicht zu empfehlen. An vielen Stellen werden Entscheidungen nicht begründet. Die Workshops suggerieren Best-Practice-Lösungen, wie sie erfahrene Webdesigner verwenden würden. Diesem Anspruch werden sie jedoch häufig nicht gerecht.

Hat man als Leser hingegen schon einige Erfahrungen im Umgang mit CSS gesammelt, bietet das Buch zahlreiche Anregungen für die tägliche Arbeit. Es zeigt, wie Heiko Stiegert sich den verschiedenen Aufgaben nähert und es ist für fast jeden Webdesigner etwas Interessantes, Neues und Nützliches dabei. Vermutlich waren Einsteiger auch während des Schreibens nicht die eigentliche Zielgruppe, denn im Vorwort spricht Heiko Stiegert selbst noch vom Arbeitstitel CSS-Design. Tutorials für moderne Webseiten”, was dem Inhalt bei weitem näher kommt und viele der angesprochenen Kritikpunkte weniger kritisch erscheinen lassen würde. Grundlegende Fachbegriffe (Inline-/Block-Elemente, Float-Clearing usw.) werden im Buch mehrfach umschrieben, aber nicht klar definiert. In einem Design-Buch müssen keinesfalls die Grundlagen von HTML und CSS erläutert werden, auch wenn es sich an Einsteiger richtet. Aber man sollte die Dinge zumindest beim Namen nennen, sodass der Leser sich in ergänzender Fachliteratur informieren kann. Der weitgehende Verzicht auf externe Quellen wiegt speziell bei der anvisierten Zielgruppe “Einsteiger” schwer.

Zusammenfassend geben wir diesem Buch 3 bis 3,5 von 5 Sternen (wir konnten uns nicht entscheiden). Der Großteil der Kritik bezieht sich dabei auf die verfehlte Zielgruppe, wofür Heiko Stiegert vermutlich am wenigsten kann, wie es der Arbeitstitel im Vorwort vermuten lässt. Der zweite Schwachpunkt betrifft die fehlenden internen und externen Querverweise sowie die z.T. konstruierten Beispiele, die nicht als Best-Practice-Lösungen zu empfehlen sind.

Trotz aller notwendiger Kritik hat der Workshop-Charakter unbestreitbar seinen Reiz und die Umsetzung gefällt, zudem betritt der Verlag mit dem Konzept Neuland. Schon deshalb haben Buch und Autor eine zweite Auflage verdient.

 

Informationen

  • Gebundene Ausgabe: 458 Seiten
  • Verlag: Galileo Press; Auflage: 1 (Juni 2008)
  • Aufmachung: Gebunden komplett in Farbe + DVD
  • Sprache: Deutsch
  • ISBN-10: 3836211556
  • ISBN-13: 978-3836211550
  • Webseite zum Buch

Über den Autor

Heiko Stiegert arbeitet als Webentwickler und –designer in einer Berliner Agentur und Betreiber des Webstandards Blog.


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.