Drei sichere Indikatoren, um gute Webseiten zu erkennen

Markup = ausnahmslos Maschinen-optimiert

Gutes Markup schreiben wir für die Maschinen (Suchmaschinen und Browser), die unsere Seiten besuchen. Ein guter Frontend-Baumeister versteht die Maschinen als seine Kunden. Er wird sicherstellen, dass die Inhalte der Webseite von Maschinen optimal verstanden (semantisches Markup) und gelesen (Zugänglichkeit: Texte als Text, nicht als Bild) werden können. Er wird versuchen, unnötige Elemente (<divs> die nur wegen des Designs eingebaut werden) wie die Pest und mit aller Kraft zu vermeiden, weil er den Teil der Webseite, den er nur für die Maschinen gebaut hat, nicht durch Elemente verschmutzen will, die für Menschen gedacht sind. Diese saubere Trennung von Inhalt und Design (CSS sei Dank!) ist ein sicherer Indikator für eine hervorragende Qualität des technischen Fundaments.

Wie kann man prüfen, ob Inhalt und Design sauber getrennt wurden?

Man stellt das Design ab, indem man im Browser Javascript und alle Styelsheets deaktiviert (z.B. im Firefox über "Ansicht > Webseiten-Stil > Kein Stil"). Ein sauberes und semantisches Markup sollte alle oder einige dieser Kritieren erfüllen:

• Die Haupt-Headline (H1) ist das erste Element auf der Seite (es steht nichts darüber).
• Elemente wie Werbung und Share Buttons verschwinden (weil mit JS eingebunden).
• Text wird durch nichts anderes als Überschriften und Bilder unterbrochen.
• Bilder sind zu sehen (weil sie nicht einfach nur Hintergrund-Bilder sind).
• In Teaser ist nur die Headline verlinkt, nicht der ganze Teaser-Text.
• Wichtige Navigation ist zu sehen und bedienbar.
• Formulare und Formular-Buttons sind als solche zu erkennen (<input> verwendet).
• Die Struktur von Formularen ist zu erkennen (<fieldset> statt <span>).
• Die Spalten-/Zeilen-Benennung von Tabellen ist zu erkennen (<th> statt <strong>).
• Extra cool: Sinn gebende Abschnitte sind optisch getrennt (<hr> verwendet).

Design = brilliante Lesbarkeit

Im Kern jeder guten Designausbildung steht die Typografie. Die jahrhundertealte Lehre über die Form und Lesbarkeit von Schriften. Gute Typografie unterstützt den User beim Lesen der Texte (durch eine ruhige und klare Wirkung der Schrift und einen großzügigen Umgang mit Räumen). Wer auf seiner Seite Text präsentiert, in den man sich sofort hinein liest, der hat die wichtigste Design-Aufgabe gemeistert. Eine kristallklare Lesbarkeit ist ein sicherer Indikator für ein ernsthaftes Design-Verständins und eine gute Qualität des Designs.

Woran kann man eine ernsthaft optimierte Lesbarkeit erkennen?

• Es werden relative Größen verwendet (geänderte Schriftgröße, ändert auch Abstände).
• Text ist für große und kleine Auflösungen optimiert (Browserfenster verkleinern).
• Text hat Browser default text size (16 px) oder größer.
• Zeilen sind nicht länger als 9 bis 11 Wörter.
• Der Zeilenabstand ist mindestens 120% der Schrifthöhe (empfohlen 140%).
• Randabstände (rechts / links) sind angenehm groß (mindestens 4 x Zeilenabstand).
• Die Abstände um ein Element sind an keiner Stelle kleiner als 2 x der Zeilenabstand.
• Überschriften werden von H6 bis H1 um mindestens 20% größer.

Funktion = mutige Vereinfachung

Antoine de Saint-Exupéry soll gesagt haben: "Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann." Früher war die totale Vereinfachung eine Option. Etwas, das man tun konnte. Heute, in unserer lauten, überfüllten Welt (und in einem knallbunten double-screen, mulit-device Internet), ist sie wichtigster Anspruch und erste Verpflichtung. Der immer wieder neue Versuch, die Funktion einer Seite für den User verständlicher, einfacher und angenehmer zu machen, ist ein zuverlässiger (und zugegeben auch total offensichtlicher) Indikator für großartige Online-Produkte.

Hinweise darauf, ob eine Seite ernsthaft vereinfacht wurde:

• Die Navigation zeigt nicht alle Inhalte, sondern (je Ebene) nur die relevanten.
• Es gibt nur eine Kern-Funktion und Features drängen sich nicht auf.
• Optionale Elemente wurden weggeklappt oder ausgeblendet.
• Aktions- und Informations-Elemente unterscheiden sich (farblich?).
• Informationen aus früheren Besuchen wurden gemerkt.
• Eingaben werden schon während der Eingabe geprüft.
• Lade-Animationen zeigen, ob die Seite arbeitet / lädt.
• Verwandte Elemente werden gruppiert angeboten (z.B. Sharing Buttons = "Teilen")
• Werbung unterbricht uns nicht auf dem Weg zur Zielseite.
• Elemente, die zum Text gehören (Bildergalerien usw.), stehen auch im Text.

Mehr als Qualitätsindikatoren?

Ich denke, Lesbarkeit, semantisches Markup und konsequente Vereinfachung können unsere Bachflohkrebschen sein. Vielleicht sind sie sogar mehr als nur Qualitätsindikatoren. Wer eine valide html5-Seite abliefert, die total unsemantisch ist (weil die H1-Headline als Grafik dargestellt wird und (für das Design) jedes <p> erst mal in fünf <divs> verschachtelt ist), kann sich auch gleich die Validierung sparen. Wer eine unlesbare Seite abliefert, kann auch mit Branding, netten Details, Texturen, „human touch“ und einer tollen Wiedererkennbarkeit nicht mehr viel retten. Und wer ständig neue Features (und bizarre Marketing-Produkte) online stellt, statt seine Kernfunktionen zu vereinfachen, der baut keine guten Online-Produkte. Semantik, Lesbarkeit und Vereinfachung sollten unsere Priorität sein, unser Anspruch. Sie sind das kristallklare Wasser, durch das dann all die putzigen Krebschen flitzen können.