Code

Warum spielt sauberes Markup im Webdesign eine Rolle?

Da das Web ein sich ständig wandelnder Organismus ist, ist es wichtig, Websites zu erstellen, die mit ihm wachsen können und leicht den Strom steuern, anstatt zu ertrinken, wenn sich eine neue Welle nähert.

Ein sauberes Markup und das Erstellen von Web-Standards hilft Ihnen dabei nicht nur, sondern spart Ihnen auf lange Sicht auch Zeit und Geld.

Wenn das Web expandiert, wachsen auch die Technologien, die es verwendet. Während HTML schon lange existiert, hat es ziemlich viele Sidekicks auf dem Weg bekommen.

Erstes Javascript, dann CSS, XML und später AJAX. Die breite Einführung von HTML 5 steht kurz bevor, denn Firefox, Safari, Opera und Chrome genießen bereits fast die volle HTML 5-Unterstützung (das langsame Kind auf dem Block, Internet Explorer, hinkt wie gewöhnlich hinterher).

In diesem Artikel werden die Grundlagen von Webstandards erläutert, was sie sind, was sie für Sie bedeuten und einige wichtige Tipps, die Ihnen helfen, mit diesem wichtigen und oft vernachlässigten Thema umzugehen.

Was bedeutet es, "sauberes" Markup zu haben?

Einfach ausgedrückt, bedeutet es, frei von Unordnung, standardkonform und die Tags und Strukturen jeder Sprache für ihren beabsichtigten Zweck zu verwenden.

Clutter-freies HTML macht spärliche Verwendung von Tags, eliminiert die überflüssigen und erledigt ihre Aufgabe mit so wenig Markup wie nötig . Es vermeidet unnötige Attribute wie Inline-CSS und lässt jedes Dokument strukturiert und organisiert.

Ebenso sollte sich CSS ohne störenden Kommentar vermeiden, sich selbst zu wiederholen, auszunutzen Erbe (Denken Sie daran, CSS steht für Cascading Style Sheet) und verwenden Sie Klassen wann immer möglich.

Normkonform bedeutet, dass Ihre Seiten mit den Standards der W3C für HTML, CSS und XML. Es bedeutet, dass Sie die kostenlosen W3C-Validatoren verwenden, um nach Fehlern zu suchen, sie zu korrigieren und erneut zu testen, bis Sie so nahe wie möglich bei 100% sind .

Warum sollte es mich kümmern? Es funktioniert, ist das nicht genug?

Jedes Projekt hat eine aggressive Frist und jeder Kunde möchte seine Website gestern gestartet haben. Als Webentwickler und Designer stehen wir unter dem ständigen Druck, schneller und effizienter zu arbeiten.

Es ist leicht, in die Falle zu geraten, schnell zu denken, muss schlampig sein , und dieses saubere, standardkonforme Markup braucht mehr Zeit. Es ist einfach zu sagen "es funktioniert und das ist alles, was zählt".

Sicher, es funktioniert ... für jetzt, für Sie. Was ist mit dem nächsten Jahr oder in drei Jahren? Was ist mit neuen Browsern? Was ist mit Zugänglichkeit?

Glauben Sie wirklich, dass die großen Suchmaschinen sich an spezielle, schlampige Codierungsmethoden halten werden? Sie sind knifflig, und wenn Sie nicht standardkonform sind, treten Sie Ihrem Suchranking ins Gesicht .

Was ist mit dem nächsten armen Saft, der diese von dir erstellten Seiten bearbeiten muss? Was passiert, wenn Sie von einem Bus angefahren werden, in Alaska mit dem Rucksack fahren oder sich von Außerirdischen entführen lassen? Jemand anderes muss dort weitermachen, wo du aufgehört hast, und er wird deinen Code ansehen und versuchen, einen Sinn daraus zu machen. Wird es leicht sein, oder wird es ihm Kopfschmerzen bereiten und ihn dazu bringen, deinen Namen zu verfluchen?

Mach das beim ersten Mal richtig. Dies ist nicht nur eine nervige, väterliche Lebenslektion. Es wird Ihnen sowohl Zeit als auch Geld sparen, und diejenigen, die Ihnen folgen, haben eine leichtere Zeit der Dinge.

Sie denken vielleicht, dass es schneller ist, das Inline-CSS einfach einzufügen, anstatt dem Stylesheet eine neue Klasse hinzuzufügen. Und du denkst vielleicht, dass es schneller ist, was auch immer du in HTML ausgeben kannst, ohne die gesamte Dokumentstruktur zu berücksichtigen.

Wenn es an der Zeit ist, dieses Dokument später zu aktualisieren oder die gesamte Website neu zu gestalten, werden Sie viel mehr Zeit damit verbringen, schlampigen Code nachzuahmen, als Sie jemals gespart haben, indem Sie ihn zuerst durchforsten. Wenn Sie ein neues Stylesheet erstellen, werden diese lästigen Inline-Stile, die Sie hastig hinzugefügt haben, wiederkommen, um Sie zu verfolgen, und Sie werden Stunden damit verbringen, sie zu jagen und zu entfernen.

Erweiterbarkeit, Zugänglichkeit, Übersetzung und Zukunftssicherheit

Mobiles Surfen wächst wie Godzilla auf Atomsteroiden. Anstatt vor fünf Jahren zu den Jet-Set-Blackberry-Süchtigen zu gehören, benutzt heute jeder sein Smartphone, um im Internet zu surfen.

Assistive Technologie - Bildschirmlesegeräte für blinde und alternative Schnittstellengeräte für Behinderte - ist üblich, und Sie möchten keinen Verkauf verlieren oder den Verkehr entfremden, nur weil Sie dies nicht berücksichtigt haben.

Ihre Website wird wahrscheinlich in ein halbes Dutzend Sprachen übersetzt, da Leser aus der ganzen Welt Ihre Inhalte finden. Danke an die Internetarchiv , Google-Cache und andere, Seiten, die Sie heute veröffentlichen, werden noch lange Zeit dort sein, auch wenn sie von Ihrer Live-Site entfernt wurden.

Ein sauberes Markup und die Einhaltung von Standards sorgen dafür, dass Ihre Websites in jedem dieser Szenarien funktionieren.

Verhaltensregeln:

  • Verwenden Sie die Tags wie vorgesehen. Zum Beispiel: h1 ist das erste Element der obersten Ebene auf der Seite, dann h2, h3 und so weiter. Es sollte nur einen h1 Tag pro Seite geben.
  • Benennen Sie Ihre CSS-Klassen und IDs mit aussagekräftigen Begriffen und fragen Sie sich, ob jemand anderes weiß, was eine Klasse / ID nur von ihrem Namen her tut. Welche Namenskonvention macht mehr Sinn: # box12 oder # comment-footer?
  • Tue die CSS-Vererbung gut aus. Beispiel: Wenn Sie eine Schriftart für einen Container festlegen, müssen Sie sie nicht erneut für jedes untergeordnete Element angeben, es sei denn, dieses untergeordnete Element muss eine andere Schriftart verwenden. Dadurch bleiben Ihre Stylesheets schlank und schnell geladen.
  • Überprüfen Sie Ihre HTML, CSS und XML und korrigieren Sie so viele Fehler wie möglich. Achten Sie auch auf die generierten Warnungen.
  • DO überprüfen WYSIWYG generierten Code und bereinigen Sie bei Bedarf. Sie sind berüchtigt dafür, sperriges, aufgeblähtes Markup mit viel unnötigem, ungültigem Müll auszuspucken.
  • Fügen Sie keine Inline-Stile oder überflüssige Tags und Attribute hinzu, nur weil Sie in Eile sind.
  • Begnügen Sie sich nicht mit "es funktioniert". Nur weil eine Seite es darstellt, heißt das nicht, dass das Markup unter der Haube normenkonform, problemlos oder suchmaschinenfreundlich ist.

Weitere Lektüre und Ressourcen


Geschrieben exklusiv für WDD von Jeff Couturier.

Verfolgen Sie Webstandards in Ihren Websites? Warum oder warum nicht? Bitte teilen Sie uns Ihre Kommentare mit.

Design Webstandards sauber markieren