Ihr Thumbnail auf einem Telefon

Die Annahme steht auf dem Kopf

Gestalte fürs Handy, heißt es, weil dort alles klein ist. Das stimmt zur Hälfte, und zwar so, dass es die nützlichere Hälfte verdeckt: die an ein Telefon ausgelieferte Datei ist tatsächlich bescheiden, aber der *Anteil am Bildschirm des Zuschauers*, den Ihr Thumbnail dort einnimmt, ist der größte, den es irgendwo bekommt.

Das ist messbar, denn der Mock in diesem Werkzeug bildet YouTubes Layout in echten Viewport-Größen ab. Ich habe ihn in drei üblichen Telefongrößen und zwei Desktop-Größen geladen und für jede Fläche gemessen, wie groß das Thumbnail gerendert wird, welcher Anteil des Bildschirms das ist und wie viele Elemente in einen Bildschirm passen.

Was ein Bildschirm wirklich fasst

Der Bildschirmanteil ist die Fläche des Thumbnails gegen den gesamten Viewport. Elemente pro Bildschirm zählt, was unter die Browserleiste passt — ganz und teilweise, denn eine halb sichtbare Karte ist immer noch eine Karte, die um den nächsten Wisch konkurriert.

Die Telefonwerte halten über die Größen hinweg: 16,0 % auf einem 375 breiten iPhone SE, 14,7 % auf einem 390 breiten iPhone 14, 16,5 % auf einem 412 breiten Android. Das ist keine Eigenheit eines Geräts, sondern das, was ein einspaltiger Feed tut.

Drei- bis viermal mehr Bildschirm

Eine Feed-Karte am Telefon nimmt 14,7 % des Bildschirms ein; dieselbe Karte im Desktop-Raster 5,2 % auf einem Notebook und 3,3 % auf einem 1920 breiten Monitor. Ihr Entwurf bekommt drei- bis viereinhalbmal mehr Sichtfeld auf dem Gerät, das die meisten benutzen.

Es gibt einen zweiten Unterschied in dieselbe Richtung. Am Telefon sind die Suchergebnisse dieselbe Karte wie der Feed — gleiche Breite, gleiche Höhe, eine pro Zeile —, während am Desktop die Suche zu einer breiten Zeile wird und die Startseite ein Raster bleibt. Mobil sind also zwei von drei Flächen die große.

Und ein Drittel der Nachbarn

Ein Telefonbildschirm fasst 3,6 Feed-Karten. Ein Notebook fasst 8,5 und ein 1920 breiter Desktop 10,3, drei pro Zeile. Gleicher Feed, gleiche Videos, völlig andere Wettbewerbslage: am Desktop vergleicht ein Zuschauer zehn Dinge auf einmal, am Telefon begegnet er dreien, dann drei weiteren, dann drei weiteren.

Das ist der Unterschied zwischen gleichzeitig und nacheinander. Ein Desktop-Raster ist ein Vergleich: eine Zehnerreihe, aus der das Auge die abweichende zieht. Ein Telefon-Feed ist eine Folge von Entscheidungen, jede getroffen gegen das, was in diesem Moment auf dem Bildschirm ist, und gegen das, was der Zuschauer von einer Sekunde vorher behalten hat.

Womit sich ändert, was „auffallen“ heißt

Die meisten Thumbnail-Ratschläge sind Desktop-Ratschläge ohne Etikett. Fall in der Reihe auf, sei die helle Zelle unter den dunklen, sei anders als deine Nische — all das setzt voraus, dass die Reihe auf einmal sichtbar ist, und am Telefon ist sie das nicht.

Die mobile Fassung desselben Ziels lautet eher: sei allein lesbar und vollständig. Ein Thumbnail, das nur als Kontrast zu seinen Nachbarn funktioniert, hat drei Viertel der Zeit nichts, wozu es kontrastieren könnte. Eines, das sein Motiv klar benennt, funktioniert in beiden Lagen — deshalb sind die Nischenmessungen in dem Leitfaden zum Auffallen eine Untergrenze und keine Strategie: anders zu sein ist im Raster notwendig und in einer Folge unzureichend.

Wo mobil wirklich der kleine Fall ist

Eine Fläche am Telefon ist tatsächlich winzig, und es ist nicht der Feed. Die Vorschlagsliste unter einem laufenden Video wird in 143 × 80 gerendert — 3,5 % des Bildschirms, acht pro Bildschirm —, was absolut kleiner ist als alles am Desktop außer der Desktop-Vorschlagsspalte selbst.

Von dort kommen die harten Untergrenzen. Die in dem Leitfaden zum Paar Thumbnail–Titel gemessene Grenze von 61 Zeichen liegt dort, und die Kopfgrößen-Regel aus dem Leitfaden zu Gesichtern verlangt über die halbe Bildhöhe genau auf diesen zwei Spalten. Der Telefon-Feed ist großzügig; die Vorschlagsliste am Telefon ist die strengste Fläche, auf die ein Zuschauer Sie stellt.

Und die Datei ist auch nicht der kleine Teil

Eine Feed-Karte am Telefon ist 293 CSS-Pixel breit, was auf den 2×- und 3×-Bildschirmen, die Telefone tatsächlich haben, 586 bis 879 physische Pixel bedeutet. YouTube liefert platzgenaue Dateien aus, dort kommt also einer der größeren Zuschnitte an — nicht die 168 × 94, die ein Desktop-Vorschlag bekommt.

Der komprimierte, detailarme Fall aus dem Leitfaden zu unscharfen Thumbnails ist also die Vorschlagsspalte, auf beiden Geräten. Der Telefon-Feed ist die Fläche, auf der die Qualität Ihres Exports am sichtbarsten ist und auf der eine weiche oder verrauschte Quelle zuerst auffällt. Die Mindestbreite, die das möglich macht, steht in YouTubes Thumbnail-Anforderungen.

Ein Bildschirm ist ein Wisch

Der senkrechte Schritt von einer Telefonkarte zur nächsten beträgt 220 Pixel auf einem 390 breiten Bildschirm, bei 844 Pixeln Bildschirmhöhe. Dreieinhalb Karten — und eine einzige gewöhnliche Scrollgeste ersetzt sie alle.

Die Geometrie sagt nicht, wie lange ein Zuschauer hinsieht — das kann niemand aus einem Layout messen —, aber sie sagt, was die Einheit der Entscheidung ist. Am Desktop ist die Einheit ein Raster, das das Auge abtastet; am Telefon ist es eine Karte, die ankommt, beurteilt wird und wieder geht. Was Ihr Thumbnail zu sagen hat, sagt es in diesem Fenster, allein, bei 293 Pixeln Breite.

Was die Geometrie belohnt

Nichts davon widerspricht den anderswo gemessenen Untergrenzen; es ändert ihre Reihenfolge. Lesbarkeit in Isolation schlägt Kontrast zu den Nachbarn, weil Isolation der Normalzustand am Telefon ist. Text, der ohne Vergleich groß genug ist, ein Motiv, das sich selbst zu erkennen gibt, und eine Palette, die nicht das Video daneben braucht, um bewusst zu wirken.

Und weil dieselbe Datei auch in ein Desktop-Raster und zwei Vorschlagsspalten geht, muss der Entwurf beide Lagen zugleich überstehen. Das ist weniger ein Kompromiss als eine Reihenfolge: bringen Sie ihn bei 143 × 80 in der Vorschlagsliste und bei 293 × 165 am Telefon zum Funktionieren, dann erledigt sich das Desktop-Raster — dazwischen in der Größe und großzügiger in der Zeit — von selbst.

Die einzige wirklich mobil-eigene Entscheidung ist, wie sehr Sie sich auf den Titel stützen. Am Telefon steht der Titel direkt unter dem Thumbnail in derselben Breite; in einer Desktop-Vorschlagsspalte ist er ein 138 Pixel schmaler Streifen daneben. Am Telefon liest sich das Paar als Einheit wie sonst nirgends.

Die Prüfung, auf dem Gerät, auf das es ankommt

Alle Zahlen oben stammen aus demselben Werkzeug, auf dem dieser Leitfaden liegt, und das genau dafür einen Geräteschalter hat: die mobile Ansicht ist keine geschrumpfte Desktop-Ansicht, sondern ein anderes Layout mit einer anderen Rechnung.

Die Prüfung sind also zwei Klicks in dem Vorschau-Werkzeug: der Telefon-Feed, wo Ihr Thumbnail am größten und am meisten allein ist, dann die Vorschlagsliste am Telefon, wo es am kleinsten ist. Hält es in beiden, sind die Desktop-Flächen bereits abgedeckt.

Was diese Messung ist und was nicht

Es sind CSS-Pixel-Messungen von YouTubes Web-Layout, in diesem Werkzeug nachgebaut, bei den Viewport-Größen üblicher Telefone. Die nativen Apps verwenden eigene Maße und weichen um ein paar Pixel ab; die Form des Ergebnisses — eine Spalte, eine Karte, die ein Sechstel des Bildschirms ist, dreieinhalb pro Bildschirm — ist in beiden dieselbe.

Die Pixeldichte des Geräts beeinflusst die ausgelieferte Datei, nicht das Layout: ein 3×-Telefon bekommt für dieselbe 293-Pixel-Karte eine größere Datei. Und „Elemente pro Bildschirm“ zählt, was geometrisch sichtbar ist — eine Tatsache über das Layout und nicht über Aufmerksamkeit. Was ein Zuschauer in diesem Raum bemerkt, kann eine Messung der Oberfläche nicht beantworten.

Die Fragen, die alle stellen