Zwei Familien zu je fünf

Fünf Seiten unserer Site hatten keine Illustration: die Dokumentationsübersicht, die Anleitungsübersicht, die Partnerseite, die Blogübersicht und die Kontaktseite. Alles andere hatte eine. Die Aufgabe war, fünf Bilder zu zeichnen, die aussehen, als gehörten sie dazu.

Wozu genau sie gehören sollen, ist die Frage, und sie lässt sich nicht durch Hinsehen beantworten. Zehn vorhandene Bilder, über mehrere Monate einzeln auf zehn verschiedenen Seiten betrachtet, erzeugen einen selbstsicheren Eindruck von einem Hausstil. Dieser Eindruck ist nichts wert, und wir haben die Zählung, die das beweist.

Den Stil gab es nicht

Ein kurzes Skript lief alle zehn Bilder auf einer Leinwand ab und zählte die dunklen Pixel: Leuchtdichte bei 110 oder darunter, Alpha bei 200 oder darüber, auf sechzehn Stufen gerastert, damit die Kantenglättung nicht tausend fast gleiche Farben erzeugt.

Das Ergebnis waren zwei Gruppen zu fünf, ganz ohne Überschneidung.

Fünf zu fünf. Es gibt keine Mehrheit. Hätte jemand nach Augenmaß entschieden, hätte er die Gruppe genommen, die er zuletzt angesehen hatte, und ein sechstes Bild erzeugt, das zur Hälfte der Site passt.

Die neuen fünf folgen der ersten Gruppe, und der Grund ist nicht die Zählung. Die Vergleichsbilder sind eine Unterfamilie mit eigener Komponente, eigenem Seitenverhältnis und eigenem Platz im Produkt; sie sind eine andere Art Seite mit einer anderen Aufgabe. Die neuen Illustrationen stehen neben der ersten Gruppe, also zeichnen sie wie die erste Gruppe. Die Messung hat die Entscheidung nicht getroffen. Sie hat die Entscheidung möglich gemacht, indem sie ein Gefühl über einen Hausstil durch zwei Tatsachen über zwei Mengen ersetzt hat.

Eine Farbe, die nicht im Stylesheet steht, ist eine erfundene Farbe

Das Marineblau, das die erste Gruppe beherrscht, kommt in unserem Stylesheet nirgends vor. Es ist eine Farbe, die mit diesen Bildern kam und im Designsystem keinen Namen hat.

Es in fünf neue Dateien zu kopieren wäre genau das gewesen, was diese Runde vermeiden sollte: ein Wert, den es nur gibt, weil jemand ein Pixel abgegriffen hat. Die neuen Bilder benutzen daher das Token, dessen Wert ihm am nächsten liegt und das in derselben Familie wie die Markenfarbe sitzt. Es ist nicht identisch. Es ist vertretbar, und es bewegt sich mit, wenn sich das System bewegt.

Der erste Entwurf hatte außerdem ein oranges Lesebändchen auf dem Dokumentationsbild, in der Akzentfarbe, weil ein Bändchen orange ist. Eine zweite Zählung entschied auch das: von den zehn vorhandenen Illustrationen, über 1,79 Millionen deckende Pixel hinweg, ist die Zahl derer mit auch nur einem warmen Pixel null. Nicht wenige, null. Ein oranges Element hätte die neue Zeichnung zum einzigen warmen Ding auf der Site gemacht, und das ist eine Entscheidung, die jemand eines Tages vielleicht bewusst treffen will, und keine, die ein Bändchen von sich aus treffen sollte.

Weiß ist, wo das Auge landet

Die letzte gemeinsame Eigenschaft ist eine, die niemand aufgeschrieben hatte und der alle zehn folgen: jedes Bild hat genau eine weiße Fläche, und dorthin geht das Auge. Die Vorderseite eines Tresors, das Innere eines Schilds, die Kacheln um einen Knotenpunkt.

Vier der fünf neuen Zeichnungen haben das von selbst aufgegriffen, denn ein Blatt Papier, ein Artikel, ein Brief und eine Abspielschaltfläche sind weiße Dinge. Das Partnerbild nicht: zwei Blautöne, nirgends Weiß.

Auf der Partnerseite sah es gut aus. Auf einem Kontaktbogen war es offensichtlich falsch, also auf einer einzelnen erzeugten Seite, die alle fünfzehn Bilder nebeneinander auf der echten Hintergrundfarbe zeigt. Eine Zeichnung in einer Reihe von fünfzehn, die keine Brennfläche hat, liest sich sofort flacher als der Rest und liest sich als gar nichts, wenn man sie allein ansieht. Das linke Sechseck sitzt jetzt auf der Flächenfarbe.

Wer einen Satz macht, sieht sich den Satz an. Einzelne Seiten sind die falsche Prüffläche für eine Eigenschaft, die nur im Vergleich besteht.

Eine vor den Formen gezeichnete Linie ist eine Linie, die man nicht sieht

Die erste Fassung des Partnerbilds hatte eine Verbindungslinie zwischen den beiden Sechsecken: ein einzelner waagerechter Strich, 433 Pixel breit, vor den beiden Formen deklariert.

Die Malerreihenfolge tat den Rest. Die Sechsecke deckten die Mitte ab und ließen an den Seiten zwei Stummel herausstehen, und weil das rechte Sechseck eine Fülldeckkraft knapp unter eins hatte, schien der verdeckte Teil als Geisterstreifen quer hindurch. Zwei Defekte aus einem Reihenfolgefehler, und beide sehen nach einem Zeichenproblem aus statt nach einem Quellproblem.

Die Verbindung ist jetzt die Überlappung selbst, auf den Schnitt der beiden Formen beschnitten, und es gibt in der ganzen Datei keine teilweise Durchsichtigkeit mehr. Das ist nicht nur eine funktionierende, sondern auch eine bessere Zeichnung: die gemeinsame Fläche zweier Partner ist der Gedanke, und eine Linie zwischen ihnen war eine schwächere Art, ihn zu sagen.

Zwei Bindestriche beenden einen XML-Kommentar

Jede dieser Dateien trägt Kommentare, die die Geometrie erklären, und Kommentare in einem SVG reisen bis in den Browser. An der ersten Fassung gemessen: von 10.160 Bytes über die fünf Dateien waren 5789 Kommentar. Siebenundfünfzig Prozent dessen, was wir ausgeliefert hätten, war eine Erklärung dessen, was wir auslieferten.

Die Erklärung lebt jetzt in der Komponente, die die Bilder referenziert, wo sie mindestens ebenso nützlich ist und in niemandes Browser gelangt. Das ist ein allgemeiner Punkt über den Unterschied zwischen Kommentaren in der Quelle und Kommentaren in einer ausgelieferten Datei: die einen sind umsonst, die anderen sind Fracht.

Der zweite Punkt ist eine Regel und keine Messung, und es ist die Sorte Regel, die man nur einmal braucht. Ein doppelter Bindestrich beendet einen XML-Kommentar. Eine benutzerdefinierte CSS-Eigenschaft in einem SVG-Kommentar bei ihrem Namen zu nennen beendet den Kommentar deshalb zu früh, mitten im Satz, und der Rest dieses Satzes wird zu Auszeichnung. Die Datei lässt sich dann nicht mehr zerlegen, und ein SVG, das sich nicht zerlegen lässt, erzeugt keine Fehlermeldung. Es erzeugt eine Antwort mit 200 und ein leeres Bild.

Die aktuellen fünf enthalten in keinem Kommentar doppelte Bindestriche, und alle fünf lassen sich als gültiges XML zerlegen. Die Fehlerart ist echt; für den konkreten Vorfall kann ich Ihnen keine Messung reichen, denn dieser Zustand wurde nie eingecheckt.

Alternativtext ist keine Gestaltungsentscheidung

Eine Illustration, die nichts sagt, was die danebenstehende Überschrift nicht schon sagt, ist Schmuck, und die Antwort der Barrierefreiheit auf Schmuck ist ein leeres alt-Attribut, damit ein Bildschirmleser nicht „Tresor mit Schlüssel“ neben einer Überschrift über Zugangsdaten vorliest, die auf dem eigenen Host bleiben. Diese Begründung stimmt, und wir sind ihr lange gefolgt.

Es ist auch nicht das ganze Bild, denn ein Crawler kann Schmuck nicht von Inhalt unterscheiden. Eine SEO-Prüfung zählt ein leeres alt als fehlendes alt, und ein Bericht voller fehlender alt-Attribute ist ein Bericht, den niemand liest.

Jede Illustration trägt jetzt also eine kurze Beschreibung aus dem Übersetzungskatalog, eine Beschreibung je Bild statt je Platzierung, denn dieselbe Zeichnung bedeutet auf zwei verschiedenen Seiten dasselbe. Die Wache verlangt auf jeder Illustration ein nicht leeres alt, was heißt, dass eine vor dem Barrierefreiheitsbaum zu verbergen keine Möglichkeit ist, die jemand still ergreifen kann. Eine neue Illustration braucht eine Beschreibung in allen neun Sprachen, bevor sie ausgeliefert werden kann.

Null Verschiebung, und der Gegenbeweis

Breite und Höhe auf jedem Bild sind die Maße des eigenen Ansichtsfelds der Datei, und sie stehen aus genau einem Grund dort: damit der Browser den Platz reserviert, bevor die Bytes ankommen. Die sichtbare Breite kommt aus Klassen und hat mit diesen Zahlen nichts zu tun.

Die kumulative Layoutverschiebung über fünfundvierzig Seitenzustände wurde mit 0,00000 gemessen, und das ist eine Zahl, die für sich nichts bedeutet. Jede Messung, die eine perfekte Null meldet, muss die Frage beantworten, ob sie hingesehen hat.

Derselbe Lauf wurde also wiederholt, mit entfernten Maßen und einer Verzögerung von 1500 Millisekunden vor den Bildern. Dreizehn von fünfzehn Zuständen verschoben sich. Die zwei, die es nicht taten, sitzen in der kürzesten Zelle eines Rasters, wo das Bild die Zeilenhöhe nicht ändern kann, was es auch tut, ihre Null ist also strukturell und nicht zufällig. Das wurde einzeln geprüft statt weggewinkt, denn zwei unerklärte Nullen in einem Gegenbeweis sind genau die Stelle, an der sich eine echte Lücke verstecken würde.

Eine mechanische Einzelheit ist noch nennenswert, weil sie sich leicht in die andere Richtung falsch machen lässt: diese Bilder umgehen den Bildoptimierer des Frameworks vollständig. Das ist keine Faulheit. Der Optimierer verweigert SVG, solange nicht eine ausdrücklich gefährliche Option gesetzt ist, sie hindurchzuleiten ergäbe also ein kaputtes Bild und kein kleineres.

Ein Befund, der nicht zur Runde gehörte

Beim Messen der Breiten stellte sich heraus, dass eine Hilfsklasse auf einer nicht verwandten Seite überhaupt nichts tut. Sie setzt eine Höchstbreite, die von einer später im Stylesheet deklarierten Klasse überschrieben wird, der Wert ist also untätig, seit er geschrieben wurde.

Niemandem war es aufgefallen, denn das Element sieht bei seiner tatsächlichen Breite vernünftig aus. So überlebt tote Gestaltung gewöhnlich: sie ist auf dem Bildschirm nicht falsch, sie ist bloß nicht das, was die Arbeit tut, und der einzige Weg, sie zu finden, ist, eine Eigenschaft zu messen, die man aus einem anderen Grund ohnehin schon maß.

Was wir aufschreiben würden

1. 01Einen Hausstil, den Sie nie gezählt haben, gibt es vielleicht nicht. Zehn Bilder, zwei Familien, je fünf, und jeder Eindruck einer Mehrheit war falsch.
2. 02Eine Messung macht eine Entscheidung möglich; sie trifft sie nicht. Keine der beiden Gruppen war größer; die neuen Bilder folgen den Funktionsillustrationen wegen der Art Seite, auf der sie stehen.
3. 03Eine von einem Pixel abgegriffene Farbe ist eine erfundene Farbe. Nehmen Sie das nächstgelegene Token und nehmen Sie hin, dass es nicht identisch ist.
4. 04Null ist eine starke Antwort. Kein warmes Pixel in 1,79 Millionen entscheidet einen Streit über ein oranges Bändchen schneller, als Geschmack es tut.
5. 05Prüfen Sie einen Satz als Satz. Eigenschaften, die nur im Vergleich bestehen, sind auf einer einzelnen Seite unsichtbar.
6. 06Deklarieren Sie einen Verbinder nach den Dingen, die er verbindet, sonst wird er verdeckt, und teilweise Durchsichtigkeit lässt den Fehler wie ein Zeichenproblem aussehen.
7. 07Kommentare in einer ausgelieferten Datei sind Fracht. Mehr als die Hälfte dessen, was wir beinahe ausgeliefert hätten, war Erklärung.
8. 08Ungültiges XML in einem SVG ist ein leeres Bild und kein Fehler. Es gibt keine Meldung, nach der man suchen könnte.
9. 09Ein leeres alt ist für einen Menschen richtig und für einen Crawler fehlend. Treffen Sie die Abwägung bewusst und setzen Sie sie in einem Test durch.
10. 10Eine perfekte Null braucht einen Gegenbeweis. Machen Sie die Sache mit Absicht kaputt und prüfen Sie, dass sich die Zahl bewegt.

Zur Klarheit: die fünf Bilder sind in neun Sprachen mit Beschreibungen live, die Zählungen stammen aus einem Lauf auf einer Leinwand über die echten Dateien, und alles wurde gegen einen Entwicklungsserver gemessen und nicht gegen einen Produktionsbuild. Es gibt kein dunkles Design, gegen das zu prüfen wäre, und das wurde nachgeprüft statt angenommen: mit emuliertem Dunkel ist die Aufnahme Byte für Byte gleich der hellen.

Aus der Plattformarbeit an Provibr. Ein Layoutfehler, der null Pixel Überlauf erzeugte, steht in eine Leiste schmaler als ihr Fenster, und was neun Sprachen mit einem Satz fester Bedienelemente anstellen, steht in sechzehntausend Schlüssel, neun Sprachen.