ononlinework

Der Inhalt

In seinem Buch Bulletproof Webdesign zeigt Autor Dan Cederholm, wie man Webseiten kugelsicher (»bulletproof») gestaltet. Gemeint ist, mit Hilfe standardkonformen Quellcodes (HTML oder XHTML) in Verbindung mit CSS eine Webseite so aufzubauen, dass Änderungen durch den User, wie das Abschalten von Grafiken oder die Vergrößerung der Schrift um mehrere Stufen, zwar das Layout der Seite verändern können, aber weiterhin alle Inhalte les- und wahrnehmbar lassen.

Cederholms Buch ist sinnvoll strukturiert. In jedem der ersten acht Kapitel greift er sich eine Beispielseite bzw. einen Seitenbestandteil, der nicht kugelsicher ist. Es folgt eine anschauliche Erklärung, warum eben dieser Bereich nicht kugelsicher ist. Anschließend wird dem Leser auf sehr anschauliche Art gezeigt, wie die Seite bei gleicher Optik besser umzusetzen ist.

Dazu wird valides semantisches XHTML verwendet, was dann mit CSS in Form gebracht wird. Cederholm hält sich strikt an die Trennung von Inhalt und Aussehen. In einigen Fällen ist für die gewünschte Umsetzung zusätzliches Markup nötig, der Gebrauch hält sich aber in sehr vernünftigen Grenzen und wird in jedem Fall anschaulich begründet.

Alle Beispiele im Buch sind sehr ausführlich mit Codebeispielen und Screenshots dokumentiert.

Im letzten Kapitel werden die Erkenntnisse aus den ersten acht Kapiteln genutzt, um eine ganze Seite kugelsicher aufzubauen. Hier wird noch einmal anschaulich verdeutlicht, dass kugelsicheres Design kein Wunschdenken sondern absolut praktikables Handwerk ist.

Die Zielgruppe

Das Buch richtet sich an Webdesigner und Webautoren bzw. an jeden, der mit der Erstellung einer Website in Berührung kommen kann.

Das Fazit

Manche der Beispiele im Buch sind konstruiert, damit sich das Layout auf jeden Fall mit den gegebenen Mitteln umsetzen lässt. Nicht jedes Design lässt sich mit den Bulletproof-Rezepten realisieren. Das kann man allerdings nicht dem Autor oder dem Buch ankreiden sondern es ist den Designern zur Last zu legen, die von der Umsetzung keine Ahnung haben. Gerade für diese Gruppe sollte das Buch als Pflichtlektüre gelten.

Das gilt aber auch für jeden Webautor, jeden Webdesigner und überhaupt jeden, der auf Quellcodeebene an einer Website arbeitet. Nicht umsonst hat es das Buch schon zum Standardwerk in Kreisen der sich an Webstandards haltenden Webautoren gebracht.

Links zum Buch

• Die Website von Dan Cederholm
• Das Buch bei www.jpc.de

Technische Angaben

• Bulletproof Webdesign
• absolut flexibel und für alles gewappnet mit CSS und XHTML
• von Dan Cederholm
• ISBN-10: 3-8273-2623-0
• ISBN-13: 9783827326232
• Addison Wesley Verlag, 07/2007
• 293 Seiten, mit zahlreichen farbigen Abbildungen, Kartoniert/Broschiert

Nachtrag

Die zweite Ausgabe liegt bereits auf meinem Tisch. In wenigen Tagen wird es auch dazu eine Rezension geben.

Im IEBlog bekannt gegeben: Die Internet-Explorer-Developer-Toolbar ist von Microsoft nun in der Version 1.0 freigegeben.

Die Toolbar bietet einen ähnlichen Funktionsumfang wie die für den Firefox erhältliche Web-Developer-Extension oder das von mir bevorzugt eingesetzte Add-on Firebug.

Zum Ausprobieren bin ich noch nicht gekommen; das wird sich aber demnächst ändern: Für ein größeres CSS-Projekt steht in Kürze das Bugfixing an. Da kann sich das neue MS-Tool dann direkt im Produktiveinsatz beweisen. Ich bin gespannt.

Laut einer Heise-Meldung läuft die Toolbar auch schon mit dem IE6.

Links zum Thema

• Download der Developer-Toolbar
• Download der Web-Developer-Toolbar für Firefox und andere Geckos
• Und hier gibt‹s den Firebug

Alan Pearce stellt auf A List Apart eine CSS-Lösung für flüssiges 3-Spalten-Layout ohne die Verwendung von Tabellen vor. Ein solches Layout wird als nicht weniger als der »Heilige Gral« des Webdesigns bezeichnet.

Nicht ganz flüssig

Meiner Meinung nach ist die Lösung nicht völlig flüssig. Die Randspalten, die z. B. die Navigation aufnehmen sollen, sind gezwungenermaßen mit einer festen Breite versehen, da momentan nur Opera variable Breiten für borders akzeptiert. Bei einer Vergrößerung der Inhalte können die äußeren Spalten also nicht mitwachsen. So wird das Layout schnell gesprengt.

Diskussion

Die erhitzte Diskussion, die um diesen Artikel mittlerweile geführt wird, erinnert tatsächlich an den Heiligen Gral. Neben den Designern, die dankbar für die Lösung eines Problems sind, das sie lange beschäftigt hatte, sind natürlich die zu finden, die eine einfache Tabellen-Lösung vorziehen, die auch – nebenbei bemerkt – durchaus selbst bei zugänglichen Seiten nicht ausgeschlossen ist, wenn die Inhalte trotzdem problemlos zu linearisieren sind.

Bildet euch selbst eine Meinung zum Thema. Lesenswert ist der Artikel in jedem Fall.

Der Stefan

von Craig Cook

Der Artikel ist im englischen Original bei A List Apart unter dem Titel »How to Grok Web Standards« erschienen und wurde von Stefan David übersetzt.

Viele Webdesigner, mich eingeschlossen, kommen zum Internet mit einem grafischen Hintergrund. Wir denken in Bildern, nicht in Quelltext. Als wir zuerst angefangen haben, für das Internet zu designen, haben wir HTML und CSS in ungehobelter Weise – als Mittel zum Zweck – genutzt, um hübsche Kästen im Raum zu arrangieren, ohne die wahre Natur des Kastens oder seines Inhalts zu erfassen. Diese rein visuelle Mentalität zu verändern, ist die höchste zu überwindende Hürde, wenn ein Grafikdesigner erstmalig in Semantik und Webstandards eintaucht. Webstandards wirklich zu verstehen, heißt für den visuellen Designer, die Art und Weise an Design zu denken, grundlegend zu verändern.

weiterlesen »

Ein Artikel bei A List Apart: »How to Grok Web Standards« zeigt Designern in sehr schön beschriebener und bildhafter Weise einen Weg auf, mit Webstandards zu besserem Webdesign zu kommen. Die Empfehlung ist die Herangehensweise an neue Designs:

Der Autor, der Techniker, der Künstler

In einzelnen Kapiteln des Beitrags wird illustriert, wie diese einzelnen Rollen beim Design einer Site ihre jeweils eigene Rolle verkörpern: Der Autor hat zu schreiben; sein Denken und Tun ist rein inhaltlich geprägt. Der entstehende Code folgt dem Willen des Autors und ist daher strikt semantisch und nicht mit Präsentations-Markup durchsetzt.

Der Ingeneur hat sich um die Funktion des Codes zu kümmern; er steht dafür gerade, dass der HTML-Code validiert, das CSS gültig ist und die nötigen Scripte funktionieren.

Der Künstler schließlich verwirklicht seine visuelle Mission und entwickelt das Layout für den gesetzten Zweck.

Sei der Autor und der Techniker und der Künstler

Wenn man sich daran gewöhnt, diese drei Rollen bei seinen Designs jeweils nacheinander darzustellen, wird man sehr schnell an den Punkt kommen, alle drei Rollen gleichzeitig spielen zu können, so der Autor Craig Cook. Das Resultat ist semantischer, unvermüllter Code mit klarer Struktur, der sich dank der vorausschauenden und mitdenkenden Arbeitsweise des Designers mit CSS problemlos darstellen lässt.

… und alle haben etwas davon

Natürlich profitiert nicht nur der Designer, der sicherlich mit dieser Herangehensweise in der Lage ist, erheblich bessere Ergebnisse zu liefern, sondern auch der Kunde, der durch den Designer besser beraten wird und durch die effektivere und somit zeitsparende Arbeitsweise Kosten spart, da nachträglicher Abstimmungsaufwand zwischen den Abteilungen und auch zwischen den Projektleitern auf Auftraggeber und -nehmerseite vermieden wird.

Ich wünsche mir in meinem Job die Zusammenarbeit mit Designern, die diesen Artikel gelesen und verstanden haben; gleichzeitig wünsche ich meinen Kunden, für sie genau dieser dreifaltige Designer zu sein. Lasst uns das Beste daraus machen.

Der Stefan