La tua thumbnail su un telefono

L'assunto è al contrario

Progetta per il mobile, dice il consiglio, perché è lì che tutto è piccolo. È vero a metà, in un modo che nasconde la metà più utile: il file consegnato a un telefono è effettivamente modesto, ma la *fetta di schermo dello spettatore* che la tua thumbnail occupa lì è la più grande che ottenga da qualsiasi parte.

È misurabile, perché il mock di questo strumento riproduce il layout di YouTube alle dimensioni reali dei viewport. L'ho caricato a tre dimensioni comuni di telefono e a due di desktop e ho misurato, per ogni superficie, quanto grande viene resa la thumbnail, quanta parte di schermo è, e quanti elementi entrano in una schermata.

Cosa contiene davvero una schermata

La fetta di schermo è l'area della thumbnail rispetto all'intero viewport. Gli elementi per schermata sono quelli che entrano sotto la barra del browser — interi e parziali, perché una card visibile a metà è comunque una card che compete per il flick successivo.

I numeri del telefono tengono su tutte le taglie: 16,0% su un iPhone SE largo 375, 14,7% su un iPhone 14 largo 390, 16,5% su un Android largo 412. Non è la stranezza di un dispositivo: è quello che fa un feed a colonna singola.

Da tre a quattro volte più schermo

Una card del feed su telefono prende il 14,7% dello schermo; la stessa card in una griglia desktop ne prende il 5,2% su un laptop e il 3,3% su un monitor largo 1920. Il tuo design ottiene da tre a quattro volte e mezzo più campo visivo sul dispositivo che la maggior parte degli spettatori sta usando.

C'è una seconda differenza nella stessa direzione. Su telefono i risultati di ricerca sono la stessa card del feed — stessa larghezza, stessa altezza, una per riga — mentre su desktop la ricerca passa a una riga larga e la home resta una griglia. Quindi su mobile due superfici su tre sono quella grande.

E un terzo dei vicini

Una schermata di telefono contiene 3,6 card del feed. Un laptop ne contiene 8,5 e un desktop largo 1920 ne contiene 10,3, tre per riga. Stesso feed, stessi video, situazione competitiva completamente diversa: su desktop uno spettatore confronta dieci cose insieme, su telefono ne incontra tre, poi altre tre, poi altre tre.

È la differenza fra simultaneo e sequenziale. Una griglia desktop è un confronto: una riga di dieci in cui l'occhio sceglie quella che si differenzia. Un feed su telefono è una sequenza di decisioni, ognuna presa rispetto a ciò che è sullo schermo in quel momento e a ciò che lo spettatore ricorda di un secondo prima.

Il che cambia cosa vuol dire «spiccare»

Gran parte dei consigli sulle thumbnail sono consigli da desktop senza etichetta. Spicca nella riga, sii la cella chiara fra quelle scure, sii diverso dal tuo niche: tutto questo presuppone che la riga sia visibile tutta insieme, cosa che su telefono non è.

La versione mobile dello stesso obiettivo assomiglia più a: sii leggibile e completa da sola. Una thumbnail che funziona solo come contrasto con i vicini non ha niente con cui contrastare per tre quarti del tempo. Una che dichiara con chiarezza il suo soggetto funziona in entrambe le situazioni, ed è per questo che le misure della guida su come spiccare sono un pavimento e non una strategia: essere diverso è necessario in una griglia e insufficiente in una sequenza.

Dove il mobile è davvero il caso piccolo

Una superficie sul telefono è davvero minuscola, e non è il feed. La lista dei suggeriti sotto un video in riproduzione viene resa a 143 × 80 — il 3,5% dello schermo, otto per schermata — che in termini assoluti è più piccola di qualsiasi cosa su desktop tranne la colonna dei suggeriti desktop stessa.

È da lì che vengono i pavimenti duri. Il limite di 61 caratteri per il titolo misurato nella guida sulla coppia thumbnail–titolo sta lì, e la regola sulla dimensione della testa della guida sui volti chiede oltre metà dell'altezza del frame esattamente su queste due colonne. Il feed del telefono è generoso; la lista dei suggeriti del telefono è la superficie più severa su cui uno spettatore ti metterà.

E nemmeno il file è la parte piccola

Una card del feed su telefono è larga 293 pixel CSS, che sugli schermi 2× e 3× che i telefoni hanno davvero significa da 586 a 879 pixel fisici. YouTube serve file su misura dello slot, quindi lì arriva uno dei ritagli più grandi — non i 168 × 94 che riceve un suggerito su desktop.

Quindi il caso compresso e povero di dettaglio misurato nella guida sulle thumbnail sfocate è la colonna dei suggeriti, su entrambi i dispositivi. Il feed del telefono è la superficie in cui la qualità della tua esportazione è più visibile, e quella in cui una sorgente morbida o rumorosa si nota per prima. La larghezza minima che lo rende vero è nei requisiti sulle miniature di YouTube.

Una schermata è un flick

Il passo verticale da una card di telefono alla successiva è di 220 pixel su uno schermo largo 390, contro un'altezza di schermo di 844. Tre card e mezzo, e un singolo gesto di scorrimento normale le sostituisce tutte.

La geometria non dice quanto a lungo uno spettatore guarda — nessuno può misurarlo da un layout — ma dice qual è l'unità della decisione. Su desktop l'unità è una griglia che l'occhio scandaglia; su telefono è una card che arriva, viene giudicata e se ne va. Qualunque cosa la tua thumbnail abbia da dire, la dice in quella finestra, da sola, a 293 pixel di larghezza.

Cosa premia la geometria

Niente di tutto questo contraddice i pavimenti misurati altrove: ne cambia l'ordine di priorità. La leggibilità isolata batte il contrasto con i vicini, perché l'isolamento è la condizione di default del telefono. Testo abbastanza grande da leggersi senza un confronto, un soggetto che si identifica da solo, e una palette che non ha bisogno del video accanto per sembrare deliberata.

E poiché lo stesso file finisce anche in una griglia desktop e in due colonne di suggeriti, il design deve sopravvivere a entrambe le situazioni insieme. Non è tanto un compromesso quanto un ordine: fallo funzionare a 143 × 80 nella lista dei suggeriti e a 293 × 165 su telefono, e la griglia desktop — che sta nel mezzo come dimensione e dà allo spettatore più tempo — si sistema da sola.

L'unica decisione davvero solo-mobile è quanto ti appoggi al titolo. Su telefono il titolo sta subito sotto la thumbnail alla stessa larghezza; in una colonna di suggeriti desktop è una striscia da 138 pixel di fianco. Su telefono la coppia si legge come un'unità in un modo che altrove non capita.

Il controllo, sul dispositivo che conta

Tutti i numeri qui sopra sono usciti dallo stesso strumento su cui sta questa guida, che ha un selettore di dispositivo esattamente per questo: la vista mobile non è una vista desktop rimpicciolita, è un layout diverso con un'aritmetica diversa.

Quindi il controllo è due clic nello strumento di anteprima: il feed del telefono, dove la tua thumbnail è al suo massimo e più sola, poi la lista dei suggeriti del telefono, dove è al suo minimo. Se tiene in entrambi, le superfici desktop sono già coperte.

Cosa questa misura è e cosa non è

Sono misure in pixel CSS del layout web di YouTube, riprodotto in questo strumento, alle dimensioni di viewport dei telefoni comuni. Le app native usano metriche proprie e differiscono di qualche pixel in un verso o nell'altro; la forma del risultato — una colonna, una card che è un sesto dello schermo, tre e mezzo per schermata — è la stessa in entrambe.

Il rapporto di pixel del dispositivo influenza il file consegnato, non il layout: un telefono 3× riceve un file più grande per la stessa card da 293 pixel. E gli «elementi per schermata» contano ciò che è geometricamente visibile, che è un fatto sul layout e non sull'attenzione. Cosa noti uno spettatore in quello spazio non è una cosa a cui una misura dell'interfaccia possa rispondere.

Le domande che fanno tutti