dyingeyes weblog: das persönliche Weblog von Boris Stumpf aus Frankfurt am Main

Seinerzeit kündigte ich einen genaueren Blick in das CSS-Buch von Perun nebst Kollegen an:

Modernes Webdesign mit CSS

Jan Heinicke, Vladimir Simovic; Düsseldorf 2006 (Data Becker)
ISBN 10: 3-8158-2598-9

571 Seiten gebunden, zu haben für 39,95 EUR

Inzwischen sind reichlich acht Monate vergangen (Schäm…), in denen ich das Buch immer wieder einmal als Nachschlagewerk genutzt habe, ohne mich jedoch hinzusetzen und eine Gesamtschau zu machen. Dies will ich nun nachholen. Möglicherweise bringt diese verspätete Rezension dem Buch schließlich einen neuerlichen kleinen Aufmerksamkeitsschub und den einen oder anderen neuen Leser (sprich: Käufer). Diejenigen, die es als aufmerksame Webdesigner, Web-Standardistas, Webkrauts und Leser von Peruns Weblog kennen sollten, dürften es sowieso längst im Werkzeugregal stehen haben.

Dann mal das Buch auf- und flugs reingeblättert…

Kapitel 1: Der Einstieg in CSS

Nach einem kurzen Blick auf grundlegende Begriffe sowie Sinn und Zweck von HTML und CSS geht das erste Kapitel gleich in medias res und erläutert überblickartig die wesentlichen Basiskonzepte von CSS sowie die gebräuchlichen Maßeinheiten und Wertangaben. Übersichtliche Tabellen erleichtern hierbei den Überblick und dienen dem späteren schnellen Nachschlagen. Als praktisches Werkzeug empfehlen die Autoren einen guten Open-Source-Quelltexteditor.

Kapitel 2: Grundlagen für das Arbeiten mit CSS

Mit dem Rüstzeug aus dem ersten Kapitel kann es losgehen mit der Erläuterung und dem korrekten Aufbau eines HTML-Grundgerüsts, das der angehende Webdesigner schließlich nicht nur für die folgenden Layout-Aufgaben benötigt. Ein kurzer Rückblick auf altertümliche Tabellenlayouts nebst Hinweisen auf durchaus mögliche Kompatibilitätsprobleme bei zeitgemäßen CSS-Layouts führt den Leser zu ersten grundlegenden Layout-Aufgaben: Schriftgestaltung, Farbe und Hintergrund sowie grundlegende Element-Positionierung in HTML-Dokumenten.

Der letztgenannte Abschnitt führt den Leser zügig ein in die vielfältigen Tiefen und Untiefen der Arbeit mit der HTML-Dokumentstruktur und dem zahlreichen Möglichkeiten der Behandlung von sogenannten Block-Elementen (oder Blocklevel-Elementen).

Dass dieses Kapitel mit der zusammenfassenden grundlegenden Unterscheidung von positionierten versus fließenden Layouts und deren prinzipieller Umsetzung abschließt, zeigt nicht zuletzt, dass sich das Buch an den anspruchsvollen und engagierten »Webworker« wendet. Unterstützt wird er dabei mit zahlreichen unmittelbar nutzbaren Quelltextbeispielen und aussagekräftigen Bildschirmfotos.

Wer bis hierhin diesem angenehm zügigen Durchgang durch die Grundlagen folgen konnte, hat die durchaus nicht einfache Aufgabe gemeistert, seine ersten einfachen positionierten und fließenden Layouts erstellen zu können.

Die folgenden beiden Kapitel schlagen einen größeren Bogen zu einigen speziellen Aspekten der Seiteneinteilung und der optischen (gestalterischen) Ausformulierung eines Seitenlayouts.

Kapitel 3: Spezielle Herangehensweise zur Seiteneinteilung

Wie kann man Elemente, die einen festen Platz im Seitenlayout haben, trotzdem fit machen für eine nicht vorher bestimmbaren Menge an Inhalt: »CSS-Frames«? Wie kann man Block-Elemente explizit positionieren und sogar ihr Verhalten in Bezug auf ihren Inhalt festlegen?

Der Leser lernt in diesem Durchgang, unterstützt mit zahlreichen anschaulichen Bildschirmfotos, wie er Block-Elemente im Einzelnen behandeln kann, deren Inhalte – im Hinblick auf das allgemeine Seitenlayout – eine formale Sonderbehandlung erfordern: Zentrieren und Fixieren von Inhalten sowie die Kontrolle von »überlaufendem« Inhalt.

Kapitel 4: Mit Rahmen, Linien, Farben und Grafiken das Layout aufwerten

In diesem Kapitel erfährt der angehende moderne Webdesigner, wie er seine – inzwischen kenntnisreich erstellten – Seitenlayouts optisch ansprechend ausformulieren kann: mit grafisch unterlegten Mehrspaltenlayouts, runden Ecken, fixierten und positionierten Hintergrundbildern sowie mit Transparenzeffekten.

Sehr lobenswert hierbei erscheint mir, dass die Autoren sukzessive auf den bisher vermittelten Kenntnissen aufbauen und unverzagt zu durchaus anspruchsvollen Gestaltungsmöglichkeiten mit CSS fortschreiten. Dadurch erhält der fleißige Leser nicht zuletzt eine Bestätigung dessen, was er sich bisher erarbeitet hat und bekommt das Gefühl, dass er wirklich auf den Punkt zur unmittelbaren Umsetzung in eigenen Projekten geführt wird.

Inzwischen dürfte der Leser durchaus schon geübter Herr über grundlegende Layoutaufgaben sein, sich auf ziemlich sicherem Boden zeitgemäßen Webdesigns bewegen und bereit sein, seine Webprojekte mit weiteren unerlässlichen Strukturelementen zu bevölkern.

Kapitel 5 und 6: Navigationselemente

In diesen beiden Kapiteln befassen sich die Autoren mit der Gestaltung und Variation von Navigationselementen. Kurz und bündig stellen sie die nachvollziehbare Auffassung dar, dass es sich bei Navigationsmenüs im Grunde um Auflistungen handelt, für die HTML von Hause aus geeignete Werkzeuge mitbringt. Schrittweise zeigen sie, wie man mit Hilfe von Listenelementen prinzipiell vertikale und auch horizontale Listen mit entsprechenden Textlink-Elementen als deren Inhalt aufbaut, um Seitennavigationen zu erzeugen.

Solche Navigationsmenüs sind tatsächlich nicht ganz einfach zu beherrschen, will man sie ausschließlich mit Mitteln von HTML und CSS sowie mit Hintergrundfarben und -grafiken bewerkstelligen. Dementsprechend detailliert und mit anschaulichen Grafiken angereichert gehen die Autoren vor und klären über die anzuwendenden Techniken und die dabei entstehenden Problemfälle auf.

Der abschließende ›Showcase‹ eines rein mit HTML und CSS realisierten auf- und zuklappenden Untermenüs sollte den lernenden Leser genügend ermutigen, sich angesichts dieser prinzipiellen Möglichkeiten trotz der erwähnten Webbrowser-Unbill in die etwas kniffligen Tiefen der modernen Navigationsgestaltung zu begeben.

Kapitel 7: Weitergehende Gestaltung des Inhalts im Grundlayout

Es folgt ein zügiger Durchgang durch eine ganze Reihe von wichtigen Seitenelementen und deren gestalterische Behandlung: Überschriften, Grafiken, Tabellen und Listen. Textblöcke, Zitate, Textspalten und andere. Dem Leser, der das Buch als kapitelweise aufbauendes Lehrbuch verwendet, sollten die Beispiele gut ausreichen und die verwendeten Techniken größtenteils schon zumindest ansatzweise bekannt sein. So kann er dieses Kapitel bei Bedarf als übersichtlichen Ausgangspunkt für die Bewältigung der Gestaltungsaufgaben bei seinen eigenen Projekten nutzen.

Kapitel 8: Gestaltung von Formularen

Einem weiteren großen und nicht ganz einfach zu beherrschenden inhaltlichen Element von Webseiten widmen die Autoren wieder ein eigenes Kapitel: den HTML-Formularen.

Nach einer kurzen Einführung in grundlegende Aspekte der Gestaltbarkeit von HTML-Formularen – nicht zuletzt in Abhängigkeit von den Eigenheiten der verschiedenen Systemplattformen und Webbrowser – bieten sie dem Leser wiederum einen anschaulichen Schritt-für-Schritt-Durchgang zur Erstellung eines kompletten Formulars. Auch hier deuten die Beispiele gut die vielfältigen Gestaltungsmöglichkeiten von Formularen mittels CSS an.

Ich hätte mir in diesem Lehrbeispiel eine etwas eingehendere Beschäftigung mit den strukturellen Elementen eines Formulars und deren standardkonformer Verwendung gewünscht – vor allem im Hinblick auf die nicht zu unterschätzende Bedeutung der Benutzerfreundlichkeit (Usability) gerade bei diesen Seitenelementen.

Kapitel 9: Komplettes Layout in CSS

Die Autoren beschließen den engeren Blick auf die Einzelaspekte der Webseiten-Gestaltung mit drei aussagekräftigen und praxisnahen Beispielen für komplette Webseiten-Layouts mittels CSS. Die ersten beiden Beispiele beginnen beim rein grafischen Entwurf und setzen diesen schrittweise mit Hilfe der erworbenen Techniken in ansprechende Weblayouts um. Auch hierbei erläutern sie zahlreiche kleine Detaillösungen für die Probleme, auf die man dabei immer stoßen wird.

Den Abschluss des Kapitels bildet ein Spezialfall, auf den sich jeder angehende »moderne« Webdesigner vorbereiten sollte, auch wenn er solche Fälle wahrscheinlich in der Ahnung erheblicher zeitraubender Detailprobleme lieber vermeiden möchte: die Umsetzung eines tabellenbasierten vierspaltigen Layouts auf auf ein tabellenloses CSS-Layout:

Ausgehend von der Analyse der sichtbaren Seitenstruktur bauen die Autoren zuerst den HTML-Quellcode neu und standardkonform auf. Anschließend erzeugen sie die Grundstruktur des neuen Seitenaufbaus in Form von übergeordneten Haupt- und Nebenbereichen einschließlich einiger Basisformatierungen. Im letzten Schritt entsteht schließlich die dreispaltige Struktur des Inhaltsbereiches mittels CSS und geeigneter Hintergrundgrafiken.

Spätestens mit diesem Beispiel erhält der Leser einen guten Ausblick auf komplexe Aufgabenstellungen der täglichen Webdesign-Praxis und deren erfolgreiche Umsetzung.

Eine abschließende Übersicht über die Größenverhältnisse der ursprünglichen gegenüber den neuen HTML- bzw. CSS-Dateien sollte spätestens den klaren Vorteil CSS-basierter Layouts aufzeigen.

The Best of the Rest

Inzwischen sollte der engagierte Leser und Webdesigner einen gründlichen Überblick über sein neues Handwerkszeug zum modernen Webdesign mit CSS erlangt haben. Es bleiben noch verschiedene Aufgabenstellungen anzusprechen, die ihm bei seiner täglichen Arbeit immer wieder begegnen werden.

Die Autoren behandeln in Kapitel 10 in kurzer Form die Frage, wie man Webseiten mittels ausgabespezifischer Stylesheets (CSS) für verschiedene Ausgabemedien optimal »präparieren« kann: für die Druckausgabe und für mobile Anzeigegeräte (PDAs oder z.B. Mobiltelefone). Gerade aber diesen Möglichkeiten (und deren Grenzen), Webseiten mittels gezielt eingesetztem medienbezogenem CSS optimal für die Druckausgabe vorzubereiten, hätten die Autoren durchaus etwas mehr Raum und grafische Anschaulichkeit geben können. Immerhin sind bei gedruckten Dokumenten z.T. gänzlich andere gestalterische Aspekte zu berücksichtigen; und darüberhinaus ist die Anwendung der im aktuell gültigen CSS-Standard vorgesehenen Möglichkeiten zur Formatierung der Druckausgabe aufgrund teilweise mangelhafter oder komplett fehlender Browser-Unterstützung bisweilen problematisch und unbefriedigend.

In Kapitel 11 widmen sich die Autoren der Frage, wie man Webseiten mit nutzerseitig wechselbaren Stylesheets ausstatten kann. Moderne Webbrowser bieten dem Benutzer in aller Regel die Möglichkeit, zwischen mehreren Stylesheets auszuwählen, sofern solche im Quelltext einer Seite entsprechend ausgewiesen sind. Wahrscheinlich ist zwar diese Möglichkeit vielen »Web-Surfern« gar nicht geläufig, sie kann aber womöglich eine durchaus beachtenswerte Rolle für Aufgabenstellungen im Rahmen barrierefreien Webdesigns spielen.

Der anschließenden Besprechung – einschließlich Codebeispielen – zweier Möglichkeiten, wechselbare Stylesheets mittels Skriptsprachen (Javascript bzw. PHP) zu realisieren, hätte ich geringeren Raum geben wollen. Hier hätte vielleicht ein kurzer Anriss des Themas zuzüglich weiterführender Verweise auf solche Möglichkeiten genügt. Den eingesparten Seitenraum könnte ich mir gut geeignet vorstellen für eine ausführlichere Behandlung der optimierten Druckausgabe mittels CSS.

Die abschließenden Tipps, Tricks, sowie »Hacks« und CSS-Filter in Kapitel 12 und 13 bieten eine kleine Übersicht über eine Reihe von Einzelfragen – Regel- und Strukturökonomie, Browserfragen und Bugs – im Rahmen des unausweichlichen handwerklichen Feinschliffs, den man sich als erfahrener Webworker im Laufe der Zeit aneignet. Größere Ausführlichkeit erscheint mir hier gar nicht notwendig, verweisen die Autoren doch auf zahlreiche Online-Quellen zu diesen Aspekten, wo man sich bezüglich detaillierter Informationen und auch den bisweilen aufkommenden Diskussionen auf dem Laufenden halten kann. Einige dieser Punkte werden im Web durchaus laufend kontrovers diskutiert, und so ist man zuletzt als engagierter Webdesigner im täglich »fließenden« Web sicher besser aufgehoben als in einem statischen Buch.

Inhaltlich abgerundet und beschlossen wird das Buch mit einer alphabetischen CSS-Eigenschaftenreferenz, die man sicher gut als Nachschlagehilfe nutzen kann.

Mein Fazit

Insgesamt erscheint mir das Buch als ausgesprochen runde und wertvolle Sache:

Es ist ganz klar ein Arbeitsbuch, das sich an den engagierten und interessierten angehenden »Webdesigner mit CSS« wendet. Und darüber will es zum Glück schon beim ersten oberflächlichen Hineinblättern auch nicht hinwegtäuschen: Es ist kein Blender, der mit Aufmerksamkeit heischendem Titel der Art »Absolut Alles über CSS« oder »Die allergeheimsten CSS-Tricks für Profis« und viel Weißfläche sowie bunten Screenshots über wenig profunden Inhalt hinwegtäuscht.

Die Sprache der Autoren ist jederzeit angemessen professionell. Sie versuchen nicht, den behandelten Themen mittels bewusst vereinfachter Sprache (oder gar einer bloß künstlich wirkenden sprachlichen »Lockerheit«) eine inhaltliche Einfachheit zu verleihen, die thematisch schlicht nicht geboten ist.

Die Aufmachung ist professionell, sachlich und angenehm unspektakulär. Die Beschränkung auf schwarzweiße Grafik ist nicht nur im Hinblick auf einen vertretbaren Preis angemessen: Farbige Grafik ist auch aus inhaltlicher Sicht einfach nicht erforderlich.

Also: Ein gutes Buch zum fairen Preis.

PS: Und in Richtung des Webdesigners, der schon Erfahrung mit der Thematik hat, würde ich ohne weiteres sagen:
Obwohl ich mich selbst mit allen Aspekten des Themas schon seit Jahren mehr oder minder ausführlich beschäftigt habe, ist mir das Buch als Nachschlagewerk und gelegentliche Gedächtnis-Auffrischung immer wieder nützlich. Auch in dieser Hinsicht halte ich den Preis von 39,95 EUR für angemessen.

Dieser Inhalt (Textbeitrag und Fotos) ist unter einer Creative-Commons-Lizenz BY-NC-ND lizenziert.

Kategorie(n): Webdesign
Tags: Bücher, CSS, HTML, Webkrauts, Webstandards

Kommentare und Pings geschlossen.

Kommentar-Feed (RSS) zu diesem Artikel