Ich habe den Designer daraufhin angeschrieben und wortreich auf seine Fehler hingewiesen. Ein kurzer E-Mail-Dialog entwickelte sich und die von meiner Seite aus letzte Mail daraus möchte ich hier anonymisiert veröffentlichen. Ich nenne dabei weder die angesprochene Site noch den Designer, weil ich hier kein öffentliches Bashing betreiben sondern nur mal wieder auf ein falsches oder zu kurz gegriffenes Selbstverständnis von Webdesignern hinweisen möchte, das leider noch weit verbreitet ist. Trotz der im Text enthaltenen Hinweise wird sich die angesprochene Site trotz Keyworddomain auch kaum bei Google finden lassen. Warum das so ist, zeigt sich im Text, ist aber auch unschwer zu erraten.

Die E-Mail

Ich finde es erschreckend, dass du offensichtlich tatsächlich so ahnungslos bist. HTML hat nichts mit Programmierung zu tun sondern ist eine Auszeichnungssprache für Inhalte. Du zeichnest jedoch keine Inhalte aus sondern lieferst Daten, die keinerlei tabellarische Struktur haben, in einer Tabelle aus. Das ist, als würdest du private Briefe mit Excel schreiben.

Weil HTML eine Auszeichnungssprache ist, haben rein visuelle Angaben darin nichts zu suchen. Das steuert man ausschließlich über CSS. Anreichern kann man dann die Nutzererfahrung noch durch den sinnvollen Einsatz von JavaScript (womit wir dann doch bei der Programmierung wären). JavaScript findet aber nur so Verwendung, dass alle Inhalte auch ohne aktiviertes JavaScript erreichbar sind. Das muss dann nicht identisch aussehen und auch nicht genauso geschmeidig funktionieren, die grundsätzliche Funktion muss aber gegeben sein. Moderne Websites gewährleisten das problemlos.

Unter Camper-Preisvergleich findest du z. B. ein von mir gebautes Formular. Mit aktiviertem JavaScript lassen sich An- und Abreisedatum sehr komfortabel über Datumswähler eingeben und eine der Reisedauer angemessene Kilometerangabe wird dynamisch berechnet, lässt sich aber sehr intuitiv über einen Schieberegler anpassen. Ruft man die Seite ohne Javascript auf, ist alles ebenso bedienbar und man kann mit dem Formular arbeiten, es ist jedoch weniger dynamisch und interaktiv. Auch das kann man noch verbessern, es ist aber auf jeden Fall ein guter Ansatz. Nun ist mir zwar klar, dass das auf der von dir erstellten Seite kein Problem ist, da du JavaScript dort kaum einsetzt. Es soll nur zeigen, was man mit sinnvollem Quelltext für seine Kunden erreichen kann.

Du hingegen versteckst Inhalte in schlecht komprimierten Grafiken mit so sprechenden Namen wie »logo_oben.jpg« und lieferst dafür noch nicht einmal alternative Inhalte. Der optisch offensichtlich so wichtige Text »entfernt« kommt auf der Seite nur im Titel und im Copyrighthinweis vor. Der Text »Beratungsförderung«, immerhin einer der Punkte der Hauptnavigation, taucht an keiner Stelle der Seite auf. Wie soll Google oder ein blinder Anwender auf der Suche nach dieser Dienstleistung wissen, worum es geht? Und du meinst tatsächlich, dass deine Kunden bei Google gut gefunden werden? Kann ja gar nicht sein, wenn du die relevanten Keywords vor den Suchmaschinen versteckst.

Dreamweaver mag ein gutes Programm sein, liefert jedoch vernünftiges HTML nur, wenn man es dazu zwingt. Einfach bunte Bildchen und Texte in ein Tabellenkonstrukt zu ziehen, hat nichts mit der Erstellung von Webseiten zu tun. Das ist, als würde ich einen Tischler mit der Anfertigung eines Regals beauftragen und der baut mir ein IKEA-Billy zusammen. Da kann man zwar Bücher reinstellen, dafür hätte ich aber keinen Tischler gebraucht.

Die Konsequenz für dich kann nur sein, das Handwerk Webseitenerstellung zu erlernen oder es Leuten zu überlassen, die es können. Alles andere ist deinen Kunden gegenüber eine riesige Schweinerei. Verwunderlich finde ich in diesem Zusammenhang übrigens, dass ein Kunde, der sich mit Beratung beschäftigt, sich bei der Auswahl eines so wichtigen Dienstleisters offensichtlich nicht hat beraten lassen. Er hätte sich sonst nicht für dich entschieden, zumindest was die Umsetzung der Site angeht. Gegen das Design ist aus meiner Sicht gar nichts einzuwenden, das finde ich für den Zweck und das vermutlich kleine Budget sehr gelungen. Sich aber als Designer nur auf das Optische zu beschränken, ist ein zu eingeschränktes Selbstverständnis.

Ich habe vor gut drei Jahren mal einen Artikel übersetzt und veröffentlicht, der sich mit genau dieser Problematik beschäftigt. Ich würde mich freuen, wenn du ihn dir mal durchliest. Vielleicht bleibt ja etwas hängen.

Ähnliche Beiträge:

1. Rezension »Bulletproof Webdesign« von Dan Cederholm
2. Rezension »Bulletproof Webdesign« von Dan Cederholm, 2. Auflage
3. Webstandards begreifen und anwenden

Nahezu jeder, der vor der Aufgabe eines komplexen Layouts gestanden hat, konnte schon feststellen, dass es eine ziemliche Fummelarbeit ist, die Spaltenbreite, die Breite der Spaltenabstände und die zur Verfügung stehende Gesamtbreite auf einen Nenner zu bringen und so ein ansprechendes Raster zu berechnen. Insbesondere bei einem Frontend-Projekt, in dem ich unterschiedlichste Breiten für Eingabefelder brauchte, war für mich ein möglichst vielspaltiges Layout wichtig, um bei den Eingabefeldern sehr flexibel arbeiten zu können.

Hat man dann endlich ein passendes Layoutraster berechnet, steht man vor dem nächsten Problem: Beim Anlegen der Stylesheets oder Festlegen der Vorgaben für Bildgrößen berechnet man immer wieder die Breite von Elementen, die mehrere Spalten und die entsprechenden Zwischenräume umfassen.

Um die Suche nach einem passenden Raster zu erleichtern und vor allem die nervige Berechnung der mehrspaltigen Elemente zu automatisieren, habe ich eine Excel-Datei gebaut, die einem die Arbeit abnimmt.

Eine Erläuterung der Datei und die Möglichkeit, den Layoutraster-Rechner als Excel- und Open-Document-Datei herunterzuladen gibt es auf der Seite »Grid Calculator – Layoutraster berechnen«.

Insgesamt war das eine Sache weniger Stunden, was man vermutlich an der einen oder anderen Stelle noch sehen kann. Aber welcher Relaunch ist schon perfekt und an welchem Relaunch wird nicht nach dem Start noch mehr oder weniger verändert? Hier geht es schließlich auch nicht um eine Firmenwebsite sondern um nur um mein kleines Weblog mit einer doch sehr begrenzten Anzahl von Lesern.

Das Layout selbst spukte so oder ähnlich schon seit einiger Zeit in meinem Kopf herum. Ich wollte endlich von dem alten Einheitsgrau weg zu einem farbenfrohen, warmen und dennoch schlichten Layout, in dem das Lesen der Beiträge Spaß macht. Das Lesen steht hier auch ganz klar im Vordergrund, auch wenn ich vorhabe, zukünftig deutlich mehr mit Grafiken zu arbeiten, um Inhalte zu illustrieren oder einfach nur die Optik spannender zu machen.

Für die nicht ganz so regelmäßigen Besucher hier noch einmal das alte Layout als Screenshot.

Aussichten

Dem Layout liegt ein 12er-Grid zugrunde. Dazu schreibe ich in den nächsten Tagen nochmal etwas. Schließlich soll das Weblog ja nach dem Relaunch auch mit interessanten Inhalten gefüllt werden, was in der Vergangenheit viel zu kurz gekommen ist. Zumindest zwei Themen habe ich da schon in der Pipeline, mehr ergibt sich sicherlich, wenn erst mal wieder Druck auf der Leitung ist.

An einigen Stellen wird es noch Erweiterungen geben, so plane ich eh, mich mal mit dem Thema YQL zu beschäftigen und habe dann ja hier eine schöne Spielwiese. Auch für Bilder muss auf die Schnelle noch eine schöne Darstellungslösung gefunden werden. Noch dazu habe ich dem Thema Barrierefreiheit bisher kaum Aufmerksamkeit gewidmet. Das wird aber noch passieren. Die Grundlagen dafür sind ja schon gelegt.

Feedback zum Relaunch nehme ich natürlich gern an. Lasst euch in euren Kommentaren einfach aus und schont mich nicht.

Ähnliche Beiträge:

1. Relaunch bei QSC und freenet
2. Relaunch
3. Layoutraster berechnen

Der Inhalt

Das Buch folgt einem strengen, sinnvollen Aufbau. Zu Beginn werden sehr ausführlich die Grundlagen vermittelt. Der Leser erhält Basiswissen zu allem, was in der späteren Arbeit mit XHTML und CSS vorausgesetzt wird. Die Grundlagen nehmen in ihrer Ausführlichkeit auch tatsächlich einen nicht unwesentlichen Teil des Buches ein. Man kann das viel finden, mich hat es jedoch begeistert. Nicht alles ist zwingend notwendig, um den später im Buch zu lernenden Stoff zu verstehen, ich empfehle jedoch, nichts in diesem Bereich zu überspringen. Interessant ist es allemal, so wird z. B. auch auf die Entstehung des Internets eingegangen.

Mir als gelerntem Schriftsetzer hat besonders der Teil »Typografie« gefallen. Es ist das erste Mal, dass ich in einem Buch zum Thema Webdesign in dieser Ausführlichkeit etwas über korrekte Gedankenstriche, Anführungszeichen und Apostrophe gefunden habe. Allein hierfür gebührt Michael mein Dank.

Der nächste Abschnitt widmet sich den zu verwendenden Hilfsmitteln beim Webauthoring. Verschiedene Editoren, Validatoren, Programme zur Bildbearbeitung und nützliche Tools werden vorgestellt. Gerade bei den Tools gibt es unglaublich viel, was dem Webautor die Arbeit erleichtert. Ich nenne nur Firebug, das aus meiner Arbeit nicht mehr wegzudenken ist.

Und dann geht es endlich in Medias Res; XHTML ist der Titel des nächsten Abschnitts. Michael Jendryschik geht ausführlich auf den grundsätzlichen Aufbau von XHTML-Dokumenten ein und erklärt die Syntax und das Vokabular. Hier beginnt dann auch der praktische Teil. Das obligatorische Hallo-Welt-Beispiel finden wir dann auch auf Seite 186.

Wir finden in diesem Kapitel nicht nur eine reine Auflistung von Elementen und den möglichen Attributen sondern der Autor gibt auch Tipps zur Arbeitsweise beim Schreiben und zur Anwendung der Elemente. Der Leser sollte anschließend in der Lage sein, das semantisch jeweils am besten passende Element für seinen Inhalt zu finden. In der gegebenen Form halte ich das auch für eine sinnvolle Wiederholung auch für den fortgeschrittenen Webautor.

In der gleichen Qualität geht es im Kapitel CSS weiter. Hier wird gezeigt, wie das von Präsentationseigenschaften freie XHTML-Dokument mit ansprechender Optik versehen wird. Eine kurze Einführung zum Thema, in der neben der Kaskadierung und Vererbung auch auf die Kommentierung der CSS-Dateien anhand von CSSDOC und auf Bugs und Hacks eingegangen wird, wird gefolgt von einer ausführlichen Auflistung der Eigenschaften und Werte. Auch hier finden sich wieder reichlich praxisrelevante Tipps wo andere Autoren sich oft nur auf die reine Erklärung beschränken.

Die Krönung des Buchs ist das letzte Kapitel (vom Anhang abgesehen). Mit der Kochbar wird eine ansehnliche Beispielwebsite erstellt. Das auf den bisher gelesenen Seiten erworbene Wissen kann hier direkt praktisch angewandt werden. Das äußerst ansehnliche Design von Manuela Hoffmann wird nun in sehr gut beschriebenen Schritten nachvollziehbar umgesetzt. Liegt die Zielsetzung anfänglich auf der reinen Information und damit der Auswahl der korrekten Elemente und deren Anordnung, wechselt Michael anschließend folgerichtig in die Umsetzung des Designs mit CSS. Auch hier ist jeder Schritt anhand des vorher Erlernten nachvollziehbar. Der Einsteiger hat am Ende des Kapitels das Erfolgserlebnis einer mit Webstandards umgesetzten Website, die er – von den eingebundenen Grafiken abgesehen – eigenhändig erstellt hat. Gerade zu Beginn einer Webautorenkarriere ist ein solches Erfolgserlebnis eine tolle Motivation, um in dieser Richtung weiterzumachen.

Das Buch schließt dann mit einem ausführlichen Glossar im Anhang.

Der Autor

Michael Jendryschik ist ein Vollblut-Webautor. Neben seiner Arbeit als Leiter der Webentwicklung bei der itemis AG zeichnet er für zahlreiche Fachartikel auf seiner Website und in den einschlägigen Fachzeitschriften verantwortlich. Ich kenne Michael dann auch noch als Webkraut und – was mir erst beim Lesen wieder bewusst wurde – als Regular der Newsgroup de.comm.infosystems.www.authoring.misc, in der ich gerade zu meinen Anfangszeiten in diesem Bereich fleißig mitgelesen und sporadisch mitgeschrieben habe.

Die Zielgruppe

Das Buch wendet sich an Einsteiger, wie aus dem Titel unschwer zu entnehmen ist. Wie so oft, ist aber auch für den Fortgeschrittenen Webautor etwas interessantes zu finden, und wenn es nur die Auffrischung bereits erworbenen Wissens ist. Wer sich allerdings Webdesigner nennt und immer noch mit Tabellenlayouts arbeitet, sollte sich zwingend mit diesem Buch beschäftigen. Hier lernt man, wie man es richtig™ macht!

Das Fazit

Lesebefehl für den ambitionierten Einsteiger

Links zum Buch

• Die Website zum Buch
• Die Website des Autors
• Das Buch bei www.jpc.de
• Das Buch als eBook bei www.jpc.de

Technische Angaben

• Einführung in XHTML, CSS und Webdesign
• Standardkonforme, moderne und barrierefreie Websites erstellen
• von Michael Jendryschik
• ISBN 9783827327390
• Addison-Wesley-Verlag, 12/2008
• 564 Seiten, gebunden

Ähnliche Beiträge:

1. Rezension »Bulletproof Webdesign« von Dan Cederholm
2. Rezension »Bulletproof Webdesign« von Dan Cederholm, 2. Auflage
3. Rezension »Transcending CSS« von Andy Clarke

Da dieses Weblog ja eh eher schlecht schlicht gestaltet ist, war es natürlich einfach, da Abhilfe zu schaffen. Einfach die Kopfgrafik schnell mal ihrer Farbe beraubt und alles Blau aus den Stylesheets entfernt. Jetzt sind nur noch die Links blau.

Ach ja: Das Update hat reibungslos funktioniert. Nur ein Statistik-Plugin lässt sich nicht mehr aktivieren. Das Teil war mir aber eh schon länger suspekt und wird wohl auch nicht mehr so recht weiterentwickelt. Ich werde mich also wohl mal nach etwas anderem umsehen müssen.

Ähnliche Beiträge:

1. Relaunch

Es handelt sich um die Fortsetzung des Buches »Little Boxes«, das mittlerweile als Kultbuch und Standardwerk für den Einstieg in XHTML und CSS gilt. Im ersten Teil ging Autor Peter Müller auf die Grundlagen der Webseitenerstellung ein und vermittelte dem Leser die Grundbegriffe von standardkonformem Webdesign.

Diese Grundlagen vorausgesetzt, geht es nun sozusagen in den Fortgeschrittenen-Kurs. Neben der Optimierung und Organisation der CSS-Dateien widmet sich Müller verschiedenen Formen der Darstellung von Navigationslisten, teils auch über zwei Ebenen. Weiter werden verschiedene Ansätze der Gestaltung von Texten, Tabellen, Listen und Formularen gezeigt. Auch die berühmte dehnbare Box mit runden Ecken beherrscht der Leser nach dem entsprechenden Kapitel.

Einen großen Teil seines Buches widmet Peter Müller dem CSS-Framework YAML von Webkraut Dirk Jesse. YAML versetzt den Nutzer in die Lage, unter Einhaltung bestimmter Vorgaben mit wenig Aufwand flexible Layouts zu erstellen. In diesem Teil des Buchs wird die Praxistauglichkeit durch Überführung des Beispiellayouts der vorangegangenen Kapitel in das Framework bewiesen.

Das Buch ist leicht zu lesen und die Beispiele, Erklärungen und Aufgaben sind einfach nachzuvollziehen. Der Stoff wird sachlich, aber keinesfalls zu trocken präsentiert. Alle Beispiele des Buchs sind auf der mitgelieferten CD zu finden. Dazu gibt es noch etliche Tools, die die Arbeit erleichtern.

Dadurch, dass manche Beispiele entsprechend der Zielgruppe eher einfach gehalten sind, kann eine vorgeschlagene Umsetzung bei der Realisierung in komplexeren Umgebungen Probleme schaffen. So wird z. B. die Darstellung eines Initials dadurch gelöst, dass in dem Absatz mit der Klasse .dropcap ein span um den ersten Buchstaben gelegt wird. Angesprochen wird dieser Buchstabe dann im CSS über .dropcap span. Sollte nun der Autor des Textes auf die Idee kommen, ein Wort in einer anderen Sprache zu kennzeichnen, also mit <span lang="en" xml:lang="en">Word</span>, wird die Darstellung sicher spannend, da ja schließlich jedes span selektiert wird. Solche Fehler sind im Buch aber kaum zu finden und gleichzeitig erhält der Leser durchaus das Wissen, unvorhergesehene Auswirkungen eines unvollständigen oder bewusst einfachen Tipps abzustellen.

Der Autor

Peter Müller arbeitet als IT-Dozent. Bereits von ihm erschienen sind Band 1 von Little Boxes und das Little-Boxes-Videotraining.

Die Zielgruppe

Wer den ersten Teil von Little Boxes gelesen und verstanden oder sich auf andere Weise die ersten Grundlagen von XHTML und CSS angeeignet hat, findet in diesem Buch die ideale Weiterbildung.

Das Fazit

Absolut empfehlenswertes Buch für den ambitionierten Einsteiger. Je nach Vorbildung des Lesers sollte erst Band 1 gelesen werden.

Links zum Buch

• Die Website zum Buch
• Website des Autors
• Das Buch bei jpc

Technische Angaben

• Little Boxes Teil 2
• Webseiten gestalten mit CSS
• von Peter Müller
• Markt + Technik Verlag, 01/2008
• 394 Seiten, kartoniert/broschiert mit CD-ROM
• ISBN 9783827243072

Ähnliche Beiträge:

1. Rezension »Transcending CSS« von Andy Clarke
2. Rezension »Einführung in XHTML, CSS und Webdesign« von Michael Jendryschik
3. Rezension »Bulletproof Webdesign« von Dan Cederholm

Der Untertitel des Buch lautet »Neue kreative Spielräume im Webdesign«. Mit dieser Vorgabe versuchen die Autoren, dem Leser weitere Möglichkeiten zu erschließen, um durch die Nutzung von standardkonformem XHTML und CSS Design umzusetzen, das so bisher im Internet nicht möglich oder nur mit anderen Mittel darstellbar war.

Das beschriebene Vorhaben klappt ganz gut. Für den Webdesigner, der sich in seiner täglichen Arbeit bereits mit CSS beschäftigt, findet sich allerdings wenig Neues. Erst am Schluss wird auf wirklich neue Möglichkeiten eingegangen, die sich durch die Nutzung von CSS3 ergeben. Leider gibt es derzeit keine Browser, die die beschriebenen Ideen vollumfänglich unterstützen, sodass es für diesen Punkt bei Ausblicken in die Zukunft bleiben muss.

Nichtsdestotrotz ist es ein sehr lohnendes Buch. Allein die Optik und Haptik setzt sich wohltuend von vielen Büchern im Bereich Webdesign/Programmierung ab. Die beschriebenen Techniken werden nicht nur durch die üblichen Screenshots sondern auch durch zahlreiche Fotos begleitet. Zusammen mit dem hochwertigen Papier und dem leicht ungewöhnlichen fast quadratischen Format wirkt Transcending CSS sehr inspirierend.

Neben den Möglichkeiten des Einsatzes von bekannten Techniken wird auch die Anwendung von Wireframes im Designprozess beschrieben.

Die Autoren nehmen in Kauf, dass die entstandenen Designs nicht in jedem vom Nutzer verwendeten Browser identisch aussehen. Da diese Einstellung durchaus umstritten ist, werden auch gleich Argumentationsvorlagen für Auftraggeber mitgeliefert. Es ist zu hoffen, dass ausreichend Designer auf diesem Weg ihre Auftraggeber überzeugen können; nur so ist eine Weiterentwicklung auf dem Weg zu einem ohne technische Einschränkungen nutzbaren CSS möglich.

Die Autoren

Andy Clarke ist ein britischer Webdesigner mit eigener Agentur. Wie auch die Co-Autorin Molly E. Holzschlag, ist Andy Clarke Mitglied im Web Standards Project und hat 2006 die Website der Organisation neu gestaltet.

Mitautorin Molly E. Holzschlag wurde der breiten Masse der Webdesigner spätestens durch ihre Mitarbeit am Buch »Zen und die Kunst des CSS-Designs« von Dave Shea bekannt. Sie gehört zu den einflussreichsten Frauen im Web.

Beide Autoren sind Mitglied des W3C.

Die Zielgruppe

Die Zielgruppe des Buchs ist klar umrissen: Webdesigner und Webworker sollten sich das Buch kaufen. Grundlegende Vorkenntnisse in XHTML und CSS werden vorausgesetzt.

Das Fazit

Da Buch ist optisch und inhaltlich ein Genuss. Trotz des nicht ganz günstigen Preises von 44,95 Euro gibt es eine klare Kaufempfehlung von mir.

Links zum Buch

• Die Website zum Buch
• Website von Andy Clarke
• Website von Molly E. Holzschlag
• Das Buch bei jpc

Technische Angaben

• Transcending CSS
• Neue kreative Spielräume im Webdesign
• von Andy Clarke, Mitarbeit von Molly E. Holzschlag
• ISBN 9783827325457
• Addison-Wesley-Verlag, 05/2007
• 372 Seiten, kartoniert/broschiert

Ähnliche Beiträge:

1. Rezension »Little Boxes Teil 2« von Peter Müller
2. Rezension »Einführung in XHTML, CSS und Webdesign« von Michael Jendryschik
3. Rezension »Bulletproof Webdesign« von Dan Cederholm

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 oder nahezu gleicher Optik besser umzusetzen ist.

Dazu wird valides semantisches XHTML verwendet, das 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.

Das Buch liegt mittlerweile in der zweiten Auflage vor. Einiges wurde aktualisiert und erweitert, um den Entwicklungen im CSS-Design und neuen Browser-Versionen Tribut zu zollen. Wo nötig wird nun beispielsweise auf Eigenarten des Internet Explorer 7 (IE7) hingewiesen.

Nettes Detail: Die Einschüsse, die auf dem Titel zu sehen sind, sind eingeprägt und somit auch fühlbar.

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-2629-X
• ISBN-13: 9783827326294
• Addison Wesley Verlag, 12/2007, zweite Auflage
• 294 Seiten, mit zahlreichen farbigen Abbildungen, Gebunden

Ähnliche Beiträge:

1. Rezension »Bulletproof Webdesign« von Dan Cederholm
2. Rezension »Einführung in XHTML, CSS und Webdesign« von Michael Jendryschik
3. Rezension »Transcending CSS« von Andy Clarke

In »Hovereffekte mit CSS-Sprites«, veröffentlicht bei den Webkrauts, zu deren wachsender Mitgliederliste ich mich mit Stolz zähle, beschreibe ich anhand eines einfach nachzuvollziehenden Beispiels eine Technik, die die Änderung der Optik von Links beim Überfahren mit der Maus ohne Austausch der Hintergrundgrafik ermöglicht.

Viel Spaß beim Lesen.

Ähnliche Beiträge:

1. Webstandards begreifen und anwenden
2. Webstandards verinnerlichen (»How to Grok Web Standards«)
3. Rezension »Little Boxes Teil 2« von Peter Müller

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.

Ähnliche Beiträge:

1. Rezension »Bulletproof Webdesign« von Dan Cederholm, 2. Auflage
2. Rezension »Einführung in XHTML, CSS und Webdesign« von Michael Jendryschik
3. Frisch auf dem Tisch:

Selbstverständlich findet das Ganze ohne Tabellen statt.

Das Tutorial ist durchaus lesenswert und wie ich finde sehr inspirierend.

via Markup

Ähnliche Beiträge:

1. Rezension »PHP Design Patterns« von Stephan Schmidt

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

Ähnliche Beiträge:

1. CSS-Hacks für IE 6 im Internet Explorer 7
2. Firebug – ein Tool, das keine Wünsche offen lässt
3. Barrierefrei-Checkliste als Jump‹n'Run-Abenteuer

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

Ähnliche Beiträge:

1. Firebug – ein Tool, das keine Wünsche offen lässt
2. Webstandards begreifen und anwenden
3. Rezension »Bulletproof Webdesign« von Dan Cederholm

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.

Das Wort »grok« (Das Wort wird im Originaltitel und im Text des Artikels verwendet. – Anm. d. Übersetzers) kommt aus Robert A. Heinleins Zen-Hippie-Science-Fiction-Werk Fremder in einem fremden Land. Es ist ein Verb aus der Sprache der Marsianer und bedeutet so etwas wie »vollständig verstehen« oder auch »verinnerlichen«. Es geht darum, eine tiefe und intuitive Einsicht in eine Sache zu erlangen. Um Webstandards wirklich zu begreifen, musst du sie als mehr als nur Mittel zum Zweck verstehen; mehr als nur eine alternative Methode, visuelles Design zu produzieren.

Um Webstandards zu begreifen, ist es nötig, dass der visuelle Designer die Arbeitsweise seines Gehirns ändert und seine fantasievollen Nervenzellen entlang eines neuen Pfades ausrichtet. Du kannst deine kreative Energie nicht rein auf die Erscheinung deiner Webseiten kanalisieren, ohne die darunterliegende Struktur zu beachten. Präsentationsbezogenes Denken führt zu präsentationsbezogenem Webdesign, zum Nachteil des Inhalts. Stattdessen musst du zusätzlich strukturell denken, um den Inhalt dabei zu unterstützen, ihn ungefesselt leben zu lassen. Als Webdesigner der mit Standards umzugehen weiß, musst du deine Herangehensweise an Designprobleme diversifizieren und zu gleichen Teilen Autor, Techniker und Künstler werden.

Denke wie ein Autor

Autoren handeln mit Ideen, wobei sie Wörter als Werkzeuge verwenden, um diesen nicht greifbaren Gedanken gerade genug Masse zu verleihen, dass sie in den Geist des Lesers transportiert werden können. Der Stoff eines Wortes ist aus Schichten von Bedeutungen gewoben: bestimmend, mitbedeutend, kontextabhängig und subjektiv. Ein Autor hat zu verstehen, was Wörter auf vielfachen Ebenen bedeuten und muss die Wörter wählen, die die Idee am besten vermitteln.

Semantik ist die Wissenschaft der Bedeutung von Sprache. Verfechter von Webstandards haben den Ausdruck von menschlichen Sprachen geborgt und auf Computer-Auszeichnungssprachen übertragen. Jedes Element in HTML trägt eine angestammte Bedeutung und Bestimmung in sich, die es an den enthaltenen Inhalt weitergibt. Der semantische Wert deines Markups sollte zum semantischen Wert deines Inhalts passen.

Um Bedeutungen im Webdesign zu verstehen, denke wie ein Autor. Erkenne die Bedeutung und die Bestimmung des Inhalts, das Wesentliche der Idee, die du vermitteln möchtest. Benutze dann die Auzeichnungen, als würdest du Wörter benutzen, wähle die richtigen, um deine Ideen zu vermitteln.

Eine Überschrift zum Beispiel fungiert als Titel, um einen Abschnitt des Inhalts einzuleiten. HTML stellt uns Elemente zur Verfügung, die speziell für diesen Zweck entworfen wurden, also sollten Überschriften als Überschriften ausgezeichnet werden. So einfach ist das. Berücksichtige die Wichtigkeit einer Überschrift im Zusammenhang des Dokuments und weise ihr den angemessenen Rang zu: h1 für die wichtigste Überschrift, h2 für die etwas weniger wichtige Überschrift, und so weiter. Mach dir keine Gedanken, wie es aussieht oder wie groß die Buchstaben sind – das ist präsentationsbezogenes Denken. Denke wie ein Autor und konzentriere dich auf die Bedeutung.

Wenn ein Autor die falschen Wörter wählt, werden die Ideen für den Leser unverständlich. Ebenso leidet die Idee, wenn eine Bedeutung, die einem Stück Internet-Inhalt anhaftet und die Bedeutung, die der dieses Stück umgebenden Auszeichnung anhaftet, nicht zusammen passen. Tabellen sind nicht nur falsch für die Seitengestaltung, weil sie codelastig und schwer zu warten sind, sondern auch weil eine Tabelle semantisch nicht ins Konzept passt. Es ist eine mangelhafte Wortwahl. Wenn du das verstanden hast, ist es keine wirklich praktikable Option, eine Tabelle zu verwenden, um das Aussehen deiner Seite festzulegen.

Semantisches Markup zu schreiben, erfordert Verständnis für Beides: den Inhalt und die Auszeichnung, die ihn beschreibt. Du liest richtige Wörter und siehst dir nicht Bilder von wortähnlichen Objekten an. Erweise dem Inhalt den Respekt, den er verdient, indem du ihn in bedeutungsvolles Markup verpackst. Absätze sollten Absätze sein, Listen sollten Listen sein und Tabellen sollten Tabellen sein. Wenn du wie ein Autor denkst, ist das Schreiben semantischen Markups elementar einfach.

Denke wie ein Techniker

Ein Techniker entwickelt Strukturen und Geräte, die bestimmten Kriterien entsprechen, bestimmte Funktionen ausführen und bestimmten Zwecken dienen müssen. Nähte müssen halten, Wände müssen aufrecht stehen bleiben, Getriebe müssen ineinander greifen und sich drehen. Ein Techniker wird das Problem untersuchen, eine effiziente Lösung entwickeln und anschließend die Teile und Materialien auswählen, die der Belastung bei Gebrauch standhalten. Er wird die Folgen in Betracht ziehen, potenzielle Schwierigkeiten vorausahnen und Schritte unternehmen, um katastrophale Fehler zu vermeiden.

Wenn du ein Webdokument konstruierst, denke wie ein Techniker. Dein innerer Autor hat ein Element ausgewählt, weil es eine bestimmte Bedeutung hat, während dein innerer Techniker die Mechanik des Elements und die strukturelle Integrität des Dokuments, in dem es sich befindet, berücksichtigen muss. Auszeichnung gibt Inhalt zusätzliche Bedeutung, rahmt ihn aber auch ein und gibt ihm eine unterstützende Struktur, sodass er richtige Arbeit leisten kann.

Stelle dir HTML-Elemente als Bauteile vor – jedes mit seiner eigenen eingebauten Funktion –, die zusammengebaut und verbunden werden können, um eine größere Funktionseinheit zu bilden. Die Teile müssen genau zusammen passen, mit einem Platz für jede Auszeichnung und jeder Auszeichnung an ihrem Platz; sonst wird das Ganze nicht leisten, wozu es vorgesehen war –, wenn es überhaupt etwas leistet. Standardisierte Spezifikationen sind die Bauanleitung für Webdokumente. Beachte die Standards, validiere dein Markup und CSS, und behebe ernste Fehler, bevor das Ganze zusammenbricht.

Verstehe Markup als Gerüst, das den Inhalt stützt. Du weißt, was jedes Teil tut und wie die Teile zusammenwirken. Wenn dein Dokument passend zusammengebaut wurde, kannst du eine dekorative Schicht darüberlegen, ohne die innere Funktion zu beschädigen. CSS lässt dich die Anordnung und Erscheinungsweise von Elementen verändern, während die eigentliche Bedeutung und Struktur intakt bleiben. Denke wie ein Techniker und baue deine Webdokumente wie eine robuste Maschine.

Denke wie ein Künstler

Künstler bescheren uns umformende Erlebnisse durch die Interpretation der Schönheit. Sie werden durch die sie umgebende Welt inspiriert und möchten diese Inspiration an andere weitergeben. Das Design einer Website ist ein grundlegender Aspekt ihrer Nützlichkeit, der zu kommunizierenden Ideen und der zu vermittelnden Informationen auf eine attraktive und intuitive Art.

Visuelle Designer haben das Künstlerische bereits verinnerlicht. In Bildern zu denken ist ganz natürlich für uns; es ist nichts, was wir uns erst beibringen müssen. Das Internet ist allerdings kein rein visuelles Medium, es ist ein textbasiertes. Es geht darum, Sachen zu lesen und zu nutzen, nicht nur sie zu betrachten.

Wenn du für das Internet gestaltest, denke zuerst wie ein Autor und Techniker und dann fange an, wie ein Künstler zu denken. Reize die Sinne deiner sehenden Besucher mit Farbe, Typografie, räumlicher Anordnung und Bildern, aber lass die inhaltliche Struktur sauber und die Auszeichnung unbeschädigt. Die Präsentation von Inhalt und Struktur zu trennen, erlaubt deinem inneren Künstler, sein Ding zu machen, ohne dem Autor und dem Techniker auf die Füße zu treten.

Wenn du anfänglich den Eindruck hast, dass CSS deine Kreativität einschränkt, musst du möglicherweise nur mehr über CSS lernen. Mit CSS zu designen ist nicht schwerer, als mit dem präsentationsbezogenem Markup, an das du dich vielleicht gewöhnt hast; es ist eher ein anderer Satz von Werkzeugen. Es ist tatsächlich ein viel besserer Satz von Werkzeugen, speziell für diese Aufgaben entworfen. Lerne CSS, finde heraus, wie es funktioniert und was es kann, lies Bücher und stelle Fragen. Das Wichtigste: experimentiere. Schon bald wirst du dich mit dem CSS-Werkzeugsatz wohl fühlen und intuitiv wissen, welche Eigenschaft anzuwenden ist, um einen bestimmten Effekt zu erzielen.

Du musst auch lernen, was nicht einfach mit CSS bewerkstelligt werden kann und musst, wie ein Techniker, solche Hindernisse frühzeitig erkennen und dein Design dementsprechend anpassen. Jedes Medium hat seine Grenzen und jeder Künstler lernt, diese Beschränkungen zu beachten und das Medium einfach als einen anderen Absatzweg der Kreativität zu nutzen. Wie ein Künstler zu denken, wird dir helfen, kreative Lösungen für visuelle Probleme zu finden.

Die Mentalitäten zusammenführen

Diese drei Disziplinen – Schreiben, Technik und Kunst – unterscheiden sich nicht so stark. Jede erfordert kreative Problemlösungen und obwohl jede einen etwas anderen Angriffswinkel anregt, bleibt das Ziel doch das Gleiche. Kultiviere diese Aspekte deiner Persönlichkeit und widme jedem davon unabhängig deine Aufmerksamkeit. Wenn du es leicht schaffst, in diesen drei Modi nacheinander zu denken, wirst du bald merken, dass du in allen dreien gleichzeitig denkst. Der Autor, der Techniker und der Künstler überlagern sich und fließen im Voltron-Stil ineinander, um den Designer zu formen.

Den mentalen Schritt vom präsentationsbezogenen zum strukturellen Denken zu vollziehen, bringt vermutlich einige Änderungen in deinem kreativen Prozess mit sich. Um wie ein Autor zu denken, versuche, mit einem Entwurf des Inhalts zu starten, bevor du das erste Bildchen kritzelst. Zähle alles auf, was eventuell auf der Seite gezeigt werden wird, vom Logo bis zum Copyright-Hinweis, und gruppiere zusammengehörige Dinge in sinnvolle Teilbereiche. Nimm dir Zeit, deinen Inhalt zu verstehen, selbst wenn das heißt, ihn einfach nur zu lesen. Verstehe die Ideen, die du vermittelst und du wirst besser darauf vorbereitet sein, sie auszumalen.

Während du diese Informationseinheiten in einem visuell ansprechenden Design arrangierst, solltest du wie ein Techniker denken und die Reihenfolge der Elemente in deinem Markup ebenso planen wie die CSS-Eigenschaften, die du nutzen willst, um deren Präsentation zu beeinflussen. Runde Ecken und Schlagschatten sind leicht in Photoshop zu erstellen, aber wenn du dir nicht sicher bist, wie du sie mit sauberem Markup und CSS umsetzen kannst, willst du sie vielleicht nochmal überdenken. Plane deine Konstruktion so, wie du das Erlebnis planst und du wirst besser darauf vorbereitet sein, das Bild einer Internetseite in eine wirklich funktionierende Internetseite zu überführen.

Wenn du mit den Sprachen, die wir nutzen um Websites zu bauen, absolut vertraut bist, wird dein innerer Künstler frei in seinem Schaffen sein. Wenn dein Techniker weiß, wie man Kästen mit runden Ecken baut, ohne über die bedeutsamen Wörter deines Autors zu trampeln, kann dein Künstler sie ohne das kleinste ängstliche Zucken darstellen. Du wirst hübsche Sachen malen und instinktiv wissen, wie sie anzuwenden und mit sematischer Stärke zu versehen sind. Die drei Mentalitäten arbeiten innerlich zusammen, um Eloquentes, Robustes und Schönes zu schaffen.

Wenn du dein Hirn zerteilst, um Webstandards zu verinnerlichen, wirst du deren grundlegende Seele in deine Weltsicht übernehmen. Du kannst immer noch wie ein Designer denken – also in Bildern statt in Quelltext – aber deine Bilder werden praktikabler werden. Du wirst dir dein Seitendesign mehr als ästhetisches Arrangement von verzierten Kästen vergegenwärtigen und es mehr als poetische Maschine sehen, die aus aussagekräftigen Komponenten erbaut wurde.

Das Internet-Erlebnis aus makellos validem, semantisch reichem Markup und elegentem CSS zu formen, wird für dich so einfach wie Atmen. Die alten präsentationsbezogenen Methoden werden sich ungeschickt und geschmacklos anfühlen, primitiv in ihrer rohen Brutalität. Du wirst den Quelltext einer Site sehen, die ein Jahr zuvor gebaut hast und wirst verlegen erschauern, dich darüber wundernd, wie du jemals solchen schlampigen, unintuitiven Spaghetti-Code als auch nur annähernd akzeptabel ansehen konntest.

Wenn du verstehst, dass Inhalt und Quelltext mindestens genau so viel bedeuten wie Design, wirst du am Ende ein besserer Designer werden. Du wirst Webstandards verinnerlichen, und es gibt kein Zurück.

Translated with the permission of A List Apart Magazine and the author.

Ähnliche Beiträge:

1. Webstandards begreifen und anwenden
2. Webstandards und Kundenansprache
3. Rezension »Bulletproof Webdesign« von Dan Cederholm

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

Ähnliche Beiträge:

1. Webstandards verinnerlichen (»How to Grok Web Standards«)
2. Rezension »Little Boxes Teil 2« von Peter Müller
3. Rezension »Bulletproof Webdesign« von Dan Cederholm

Die große Stärke von Firebug liegt in der Möglichkeit, sehr schnell einen tiefgehenden Einblick in den HTML- oder XHTML-Quelltext einer Seite zu bekommen. Das Tool öffnet sich dazu entweder unter der Seite oder in einem separaten Fenster und zeigt je nach gewählter Ansicht verschiedene Darstellungen des Quelltextes. Das Spannende: Der gezeigte Quelltext kann direkt im Tool bearbeitet werden und zeigt alle Änderungen sofort in der Seite an.

Die Herangehensweise ist in zwei Richtungen möglich: Entweder man fährt mit der Maus über die Seite und bekommt in Firebug den Quelltext der entsprechenden Stelle angezeigt oder man bewegt sich im Quelltext und bekommt parallel dazu den entsprechenden Bereich der Seite gehighlighted (das Wort wollte ich schon immer mal schreiben).

CSS und Firebug

Das besondere Schmankerl dabei ist für mich aber der rechte Fensterbereich, in dem zu der ausgewählten Stelle noch die entsprechenden Style-Angaben angezeigt werden. Nicht nur die aktuell zutreffenden Style-Angaben werden gezeigt sondern auch alle Angaben, die aus übergeordneten Elementen vererbt wurden. Das macht die Fehlersuche wunderbar einfach.

Die einzelnen Styles können auch – wie oben schon für den XHTML- und HTML-Quelltext beschrieben – bearbeitet oder auch einfach an- und ausgestellt werden. Die Änderungen werden in der Seitenansicht sofort umgesetzt. Eine schnellere und einfachere Möglichkeit, die Auswirkungen einer Styledefinition festzustellen, kann ich mir nicht vorstellen.

Das Box-Modell in der Layout-Ansicht

Auch sehr nett ist die Layout-Ansicht, die das Box-Modell des gewählten Elements grafisch darstellt. Man erhält so sehr schnell einen Überblick über die gerenderte Box mit allen Angaben zur Content-Breite, Padding, Margins, Border und zum Offset in der Seite.

… und es gibt noch viel mehr zu entdecken

Was ich hier noch nicht beschreiben kann – einfach weil ich es noch nicht getestet habe – ist der Umgang mit Scripten und die Behandlung des DOM. Ich bin aber ungesehen davon überzeugt, dass das Tool auch in diesen Bereichen mit Bravour abschneidet – schließlich hat es sich eigentlich aus einer Konsole heraus entwickelt IIRC.

Die beschriebene Version ist übrigens noch als Beta deklariert und nur über die Entwickler-Site zu bekommen. Im Add-on-Verzeichnis von Mozilla liegt noch eine erheblich ältere Version, die nicht annähernd den beschriebenen Leistungsumfang hat. Bei mir hat die Beta auf zwei unterschiedlichen Rechnern keine Probleme verursacht.

Also: Testet das Tool, seid genau so begeistert wie ich (davon bin ich überzeugt) und unterstützt das Projekt durch eine angemessene Spende. Ich bin sicher, dass der Entwickler sich das Geld redlich verdient hat.

Der Stefan

Ähnliche Beiträge:

1. Developer-Toolbar für Internet Explorer freigegeben
2. Rezension »Bulletproof Webdesign« von Dan Cederholm
3. Rezension »Bulletproof Webdesign« von Dan Cederholm, 2. Auflage

Das mexikanische Restaurant in Bad Rothenfelde – gleichzeitig mein erklärtes Lieblingsrestaurant – hat mich beauftragt, die vorher etwas lieblos gestaltete Site grundlegend optisch zu überarbeiten und auch mit lesbaren Inhalten zu füllen. Dieser Aufgabe habe ich mich natürlich gern gestellt.

Was war zu tun?

Zuerst galt es, die Anforderungen festzustellen. Es ging darum, eine informative Site über ein Restaurant online zu stellen. Die wichtigesten Informationen (Telefonnummer für Tischreservierungen, Öffnungszeiten) sollten bereits von der Startseite aus erreichbar sein. Die Speisekarte sowie die Getränkekarte sollten auf der Site lesbar sein. Gleichzeitig sollte die Speisekarte als PDF zum Download bereitstehen, um z.B. Betriebsfeste oder Familienfeiern vorbereiten zu können. Außerdem ist die Gestaltung der Speisekarte durchaus dazu angetan, auch in ihrem originalen Layout gezeigt zu werden. An dieser Stelle geht mein Dank an Angela Wlecke, die mir das PDF zur Verfügung gestellt hat.

Weiter wurde eine Bildergalerie sowie ein Gästebuch gefordert.

Alle Seiten sollten durch den Lokalbetreiber oder eine beauftragte Person ohne HTML-Kenntnisse editierbar sein. Es ging nicht nur darum, einfach Texte zu ändern sondern auch darum, neue Seiten anzulegen und z.B. Bilder, Nachrichten und Termine einfügen zu können. Die geänderten sowie die neu erstellten Seiten sollten sich in das Layout integrieren und auch direkt über das Menü erreichbar sein.

Womit kann ich das erreichen?

Schnell stand fest: Ich brauche ein ausgewachsenes CMS. Gleichzeitig habe ich natürlich die Vorgabe, dass die Einarbeitung der Redakteure möglichst kurz sein muss und der zeitliche Aufwand insgesamt gering zu sein hat, da natürlich eine Restaurant-Website nur begrenzte Kosten verursachen darf; schließlich ist nicht unbedingt eine eindeutig messbare Umsatzsteigerung durch die Site zu erwarten.

Ein einfaches CMS, das frei anpassbar ist?

Das ist nicht unbedingt die Quadratur des Kreises. Man muss nur in der richtigen Richtung suchen. Ein Gästebuch z.B. ist nichts anderes, als ein kurzer Beitrag, der unbegrenzt oft kommentiert werden kann. Der Rest sind mehr oder weniger statische Seiten, die jedoch über eine einfache Oberfläche zu pflegen sein müssen. Die Bildergalerie braucht – wenn sie denn voll integriert sein soll – einiges an Extra-Überlegung und kann daher zum Schluss betrachtet werden.

Die Lösung: ein Blog

Die Aufgabenstellung schreit geradezu nach einem Blogsystem. Da ich gerade an anderer Stelle (u.A. auch hier) Erfahrung damit gesammelt hatte, habe ich mir einmal WordPress im Hinblick auf die Anforderungen angesehen. Nahezu alles, was benötigt wird ist hier schon vergegeben, den Rest bekomme ich über Plugins, die von unterschiedlichsten Autoren für nahezu jeden Verwendungszweck geschrieben wurden.

Die Umsetzung

Ich habe also ein frisches WordPress installiert und das Theme WordPress Classic 1.5 als Grundlage für die Layout-Anpassungen genommen. Der Vorteil hierbei war, dass zwar alle verwendeten Elemente bereits eine gewisse Formatierung haben, jedoch alles noch ziemlich nah an der Darstellung ist, die ein Browser anhand seiner Vorgaben eh wählen würde. Ideale Voraussetzungen also für individuelle Anpassungen.

Welche Plugins brauche ich?

Ich möchte eine statische Startseite haben. Da der einzige Beitrag in diesem Blog wohl das Gästebuch bleiben wird, ist es wenig sinnvoll, eine chronologische Übersicht der Beiträge als Startseite zu verwenden, wie es ja bei WordPress als Standard vorgesehen ist. Für die Anforderung passend erschien das Plugin Static Front Page, welches den Zweck hervorragend erfüllt, indem es einfach die Seite mit der Titelform »home« als Startseite zeigt.

Aufgrund der hohen Anzahl an statischen Seiten dürfen nicht alle immer über die Navigationsleist verfügbar sein, da dies sicherlich den Rahmen sprengen würde. Gleichzeitig macht es aber auch keinen Sinn, die Seiten der zweiten Ebene generell auszublenden, da in diesem Fall die interne Navigation z.B. in der Speisekarte fehlt. Wir brauchen also ein dynamisches Auf- und Zufalten der Navigation. Man könnte dies natürlich über Hover-Effekte per CSS oder JavaScript lösen, eleganter fand ich jedoch die Lösung des Plugins Fold Page List, welches nur die zweite Ebene der aktiven Seite einblendet, nicht jedoch die tieferen Ebenen der übrigen Seiten.

Als Bildergalerie hat sich nach kurzer Recherche Gallery2 angeboten, welches zusammen mit dem Plugin WPG2 alle Anforderungen erfüllte, die vom Auftraggeber gewünscht waren. Die Integration in WordPress ist beispielhaft gelöst und die Konfiguration geht – mit etwas Einarbeitung – locker von der Hand.

Nun musste nur noch die Kommentarfunktion (außer beim Gästebuch natürlich) abgeschaltet werden und das Layout passend zum Thema erstellt werden. Der Rest ist reine Handarbeit …

Der Stefan

Anmerkung: Die Kommentarfunktion wurde aufgrund fortlaufender Spam-Versuche geschlossen.

Ähnliche Beiträge:

1. Projekt: Website »Camperpreisvergleich.de«
2. Flüssiges 3-Spalten-Layout ohne Tabellen

Einer der besprochenen Bugs, nämlich die Unvorhersehbaren Prozentangaben (Quirky Percentages Bug) findet sich momentan auch noch in diesem Blog. Da ich beim Lesen des Artikels aber gleichzeitig auf die Lösung gestoßen bin, wird er hoffentlich bald keine Auswirkungen mehr zeigen.

Ach ja – das Fazit des Artikels: Durch die zu erwartende weitestgehend standardkonforme CSS-Interpretation des Internet Explorer 7 wird dessen Veröffentlichung einen großen Schub für standardkonformes Webdesign bedeuten.
Etliche der vorhandenen Hacks werden auf den IE 7 keine Auswirkung haben, bei anderen heißt es jedoch: nachbessern.

Zu hoffen ist, dass – aufgrund der automatischen Updates aus dem Hause Microsoft –, der MSIE 7 in sehr kurzer Zeit eine so große Verbreitung bei den jetzigen IE-6-Nutzern finden wird, dass die älteren Versionen kaum noch genug Relevanz haben, um die bisherige nervenaufreibende Arbeitsweise beim Schreiben von Stylesheets und der anschließenden Lesbarmachung für den Marktführer stark zu vereinfachen.

So lasset uns denn hoffen …

Update

Mittlerweile (27.2.2007) ist der IE 7 ja schon eine Weile auf dem Markt und zeigt sich auch in den Zugriffsstatistiken in zu erwartendem Maß. Einige Sites, die ich seitdem bauen durfte, haben mir aber gezeigt, dass die Probleme im IE 7 nicht weniger geworden sind. Es treten jetzt zudem noch neue Bugs auf, die durch wiederum andere Hacks gefixt werden müssen. Solche Bugs halten sich jedoch zum Glück in Grenzen. Gerade bei der Verwendung standardkonformen Markups treten die Probleme recht selten auf und sind in der Regel auch mit vertretbarem Aufwand zu beheben, wenn sie erst einmal identifiziert wurden. Es bleibt aber dabei: Bevor man den Kunden auf die Seite schauen lässt, sollte man erst einmal die gängigen Browser selbst testen. Und da ist jetzt eben noch einer zugekommen.

Informationen zu den verschiedenen Bugs findet man unter positioniseverything.net (in Englisch).

Der Stefan

Ähnliche Beiträge:

1. Developer-Toolbar für Internet Explorer freigegeben

Dort werden in 24 (logisch) Artikeln Beträge verschiedener Autoren zu Webstandards, CSS, Barrierefreiheit, JavaScript, Browserbugs und und und vorgestellt.

Eine anregende Bescherung.

Der Stefan

Ähnliche Beiträge:

1. Adventskalender der Webkrauts natürlich auch 2007
2. Wieder ein Adventskalender bei den Webkrauts
3. Alle Jahre wieder: der Webkrauts-Adventskalender