Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Webstandards verinnerlichen

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Webstandards verinnerlichen

Der Artikel von Craig Cook 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 ausrichten. 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.

Zum Übersetzer

Autorenphoto Stefan DavidStefan David wohnt im beschaulichen Bad Laer in der Nähe von Osnabrück und arbeitet beim Medienversandhändler jpc, wo er sich um Online-Marketing und Affiliate-Management kümmert. Nebenbei baut er für einen kleinen Kundenkreis Websites und schreibt viel zu selten in seinem eigenen Blog.

Kommentare

.Carsten
am 30.01.2007 - 10:17

Ich kann dem Artikel inhaltich nur zustimmen. Eigentlich predigt er das, was die Gründer der Bauhausidee schon lange vor uns ahnten: das sinnvolle Ineinandergreifen von Kunst, Handwerk und Technologie ergeben das optimale Objekt.
Mit großem Bedauern muß man aber leider auf dem Gebiet des Webdesign eine ganz andere Tendenz feststellen. Auch diese Arbeitswelt wird immer arbeitsteiliger und etliche Freelancer und Agenturen sehen das nicht ungern kommen. HTML / CSS Services bieten an, jedwede Skizze in Markup umzusetzen (Beispiele hier: http://www.snook.ca/archives/html_and_css/html_css_services/). Damit entfernt sich der sinnvolle Mehrklang im Kopf des Webdesigners wieder vom Gesamtkonstrukt, indem er nicht sinnvoll ineinenadergreifende Arbeitsprozesse startet sondern meint, in jedem Teilbereich mit Maximalforderungen zum Maximalergebnis für die gestellte Aufgabe zu kommen.

Es spricht nichts dagegen, die ineinenadergreifenden Anforderungen detailliert zu beschreiben und sie einfach extern abarbeitetn zu lassen - ein klassisches Prinzip. Die Verlockung ist jedoch groß, sich in einem divergenten System darauf zu verlassen, daß der Andere die Aufgabe schon so perfekt lösen wird, wie man sich das vorgestellt hat, weil man es vorher nicht strategisch durchdacht hat.

Permanenter Link

Sam
am 30.01.2007 - 10:55

Aaargh! Macht das Spaß sowas zu lesen! Unglaublich. Dangeschön.

Permanenter Link

Stefan
am 08.02.2007 - 13:40

Ich kann mich Sam nur anschließen - einfach traumhaft.
Bloß wie soll ich das nur meinem Ausbilder und meinem Chef verinnerlichen? Die sind nur Künstler und denen ist der Autor und der Techniker egal :(

Permanenter Link

mars
am 28.02.2007 - 11:34

Tja, die Frage stell ich mir auch gerade...entweder sind es die form follows function coder, die Flash Frickler oder die Designer die übelste Tabellenformen zusammenschustern...es ist schwer, heutzutage eine gute Mischung hinzubekommen, die dann auch noch in allen Browsern adäquat aussieht. Toller Blog übrigens, werde öfters vorbeischauen!

Permanenter Link

Johannes
am 23.05.2007 - 22:58

Ein sehr interessanter Artikel, den sich viele Webmaster zu Herzen nehmen sollten. Ist es aber wirklich so sehr unprofessionell, Tabellen zu verwenden bzw. wie kann man diese umgehen und gleichzeitig für ein ansprechendes und sinnvolles Layout sorgen?

Permanenter Link

Fritz
am 07.06.2007 - 16:03

Einfach erfrischend zu lesen, wie man mental an die Sache herangeht, statt immer nur zu lesen, wie man das _technisch_ umsetzt.
Das _Warum_ kann man nicht besser beschreiben.

Danke für den Artikel

Permanenter Link

Stefan
am 10.02.2008 - 12:03

und wenn man alle drei Disziplinen: Schreiben, Technik und Kunst erfolgreich zusammengeführt hat wird man den Erfolg nicht nur an sich selber merken. Ein Blick in die Statistik wird einem Recht geben den richtigen Ansatz gewählt zu haben. Sehr schöner Artikel.

Werblicher Link entfernt

Permanenter Link

Die Kommentare sind geschlossen.