Votre miniature sur un téléphone

La supposition est à l'envers

Concevez pour le mobile, dit le conseil, parce que là tout est petit. C'est à moitié vrai, d'une façon qui cache la moitié la plus utile : le fichier livré à un téléphone est effectivement modeste, mais la *part de l'écran du spectateur* que votre miniature y occupe est la plus grande qu'elle obtienne où que ce soit.

C'est mesurable, car la maquette de cet outil reproduit la mise en page de YouTube à des tailles de fenêtre réelles. Je l'ai chargée à trois tailles de téléphone courantes et deux tailles d'ordinateur, et j'ai mesuré, pour chaque surface, la taille de rendu de la miniature, la part d'écran que cela représente, et combien d'éléments tiennent dans un écran.

Ce que contient vraiment un écran

La part d'écran est l'aire de la miniature rapportée à toute la fenêtre. Les éléments par écran comptent ce qui tient sous la barre du navigateur — entiers et partiels, car une carte à moitié visible reste une carte qui se dispute le prochain geste.

Les chiffres du téléphone tiennent d'une taille à l'autre : 16,0 % sur un iPhone SE de 375 de large, 14,7 % sur un iPhone 14 de 390, 16,5 % sur un Android de 412. Ce n'est pas une bizarrerie d'appareil : c'est ce que fait un fil à une seule colonne.

Trois à quatre fois plus d'écran

Une carte de fil sur téléphone prend 14,7 % de l'écran ; la même carte dans une grille d'ordinateur en prend 5,2 % sur un portable et 3,3 % sur un moniteur de 1920. Votre maquette obtient entre trois et quatre fois et demie plus de champ visuel sur l'appareil que la plupart utilisent.

Il y a une seconde différence dans le même sens. Sur téléphone, les résultats de recherche sont la même carte que le fil — même largeur, même hauteur, une par rangée — alors que sur ordinateur la recherche passe à une rangée large et l'accueil reste une grille. Sur mobile, deux surfaces sur trois sont donc la grande.

Et un tiers des voisins

Un écran de téléphone contient 3,6 cartes de fil. Un portable en contient 8,5 et un ordinateur de 1920 en contient 10,3, trois par rangée. Même fil, mêmes vidéos, situation de concurrence tout à fait différente : sur ordinateur un spectateur compare dix choses à la fois, sur téléphone il en rencontre trois, puis trois autres, puis trois autres.

C'est la différence entre simultané et séquentiel. Une grille d'ordinateur est une comparaison : une rangée de dix où l'œil choisit celle qui diffère. Un fil de téléphone est une suite de décisions, chacune prise face à ce qui est à l'écran à cet instant et à ce que le spectateur garde d'une seconde plus tôt.

Ce qui change le sens de « se démarquer »

La plupart des conseils sur les miniatures sont des conseils d'ordinateur sans étiquette. Démarquez-vous dans la rangée, soyez la case claire parmi les sombres, soyez différent de votre niche : tout cela suppose que la rangée est visible d'un coup, ce qu'elle n'est pas sur téléphone.

La version mobile du même objectif ressemble plutôt à : soyez lisible et complète toute seule. Une miniature qui ne fonctionne que par contraste avec ses voisines n'a rien à quoi se contraster les trois quarts du temps. Une qui énonce clairement son sujet fonctionne dans les deux situations — c'est pourquoi les mesures du guide sur le fait de se démarquer sont un plancher et non une stratégie : être différent est nécessaire dans une grille et insuffisant dans une séquence.

Là où le mobile est vraiment le petit cas

Une surface du téléphone est réellement minuscule, et ce n'est pas le fil. La liste des suggestions sous une vidéo en lecture est rendue en 143 × 80 — 3,5 % de l'écran, huit par écran — ce qui est en valeur absolue plus petit que tout sur ordinateur, sauf la colonne des suggestions de l'ordinateur elle-même.

C'est de là que viennent les planchers durs. La limite de 61 caractères de titre mesurée dans le guide sur le couple miniature-titre s'y trouve, et la règle de taille de tête du guide sur les visages demande plus de la moitié de la hauteur du cadre précisément sur ces deux colonnes. Le fil du téléphone est généreux ; la liste des suggestions du téléphone est la surface la plus sévère sur laquelle un spectateur vous placera.

Et le fichier n'est pas non plus la petite partie

Une carte de fil sur téléphone fait 293 pixels CSS de large, ce qui, sur les écrans 2× et 3× qu'ont réellement les téléphones, fait 586 à 879 pixels physiques. YouTube sert des fichiers taillés pour l'emplacement : ce qui arrive là est donc l'un des plus grands recadrages — pas les 168 × 94 que reçoit une suggestion sur ordinateur.

Le cas comprimé et pauvre en détail mesuré dans le guide sur les miniatures floues est donc la colonne des suggestions, sur l'un comme sur l'autre appareil. Le fil du téléphone est la surface où la qualité de votre export se voit le plus, et où une source molle ou bruitée se remarque en premier. La largeur minimale qui rend cela vrai figure dans les exigences de miniature de YouTube.

Un écran, c'est un geste

Le pas vertical d'une carte de téléphone à la suivante est de 220 pixels sur un écran de 390 de large, pour une hauteur d'écran de 844. Trois cartes et demie, et un seul geste de défilement ordinaire les remplace toutes.

La géométrie ne dit pas combien de temps un spectateur regarde — personne ne peut le mesurer depuis une mise en page — mais elle dit quelle est l'unité de la décision. Sur ordinateur, l'unité est une grille que l'œil balaie ; sur téléphone, c'est une carte qui arrive, est jugée, et repart. Ce que votre miniature a à dire, elle le dit dans cette fenêtre, seule, à 293 pixels de large.

Ce que la géométrie récompense

Rien de tout cela ne contredit les planchers mesurés ailleurs ; cela en change l'ordre de priorité. La lisibilité en isolement l'emporte sur le contraste avec les voisines, car l'isolement est l'état par défaut du téléphone. Du texte assez grand pour être lu sans comparaison, un sujet qui s'identifie tout seul, et une palette qui n'a pas besoin de la vidéo d'à côté pour paraître délibérée.

Et comme le même fichier part aussi dans une grille d'ordinateur et deux colonnes de suggestions, la maquette doit survivre aux deux situations à la fois. Ce n'est pas tant un compromis qu'un ordre : réussissez-la en 143 × 80 dans la liste des suggestions et en 293 × 165 sur téléphone, et la grille d'ordinateur — intermédiaire en taille et plus généreuse en temps — se règle d'elle-même.

La seule décision vraiment propre au mobile est le degré d'appui sur le titre. Sur téléphone, le titre est juste sous la miniature, à la même largeur ; dans une colonne de suggestions sur ordinateur, c'est une bande de 138 pixels à côté. Sur téléphone, le couple se lit comme une unité comme nulle part ailleurs.

La vérification, sur l'appareil qui compte

Tous les chiffres ci-dessus sortent de l'outil même sur lequel se trouve ce guide, qui a un sélecteur d'appareil précisément pour cela : la vue mobile n'est pas une vue d'ordinateur rétrécie, c'est une autre mise en page avec une autre arithmétique.

La vérification tient donc en deux clics dans l'outil d'aperçu : le fil du téléphone, où votre miniature est au plus grand et au plus seule, puis la liste des suggestions du téléphone, où elle est au plus petit. Si elle tient dans les deux, les surfaces d'ordinateur sont déjà couvertes.

Ce que cette mesure est et n'est pas

Ce sont des mesures en pixels CSS de la mise en page web de YouTube, reproduite dans cet outil, aux tailles de fenêtre des téléphones courants. Les applications natives ont leurs propres métriques et diffèrent de quelques pixels dans un sens ou dans l'autre ; la forme du résultat — une colonne, une carte qui fait un sixième de l'écran, trois et demie par écran — est la même dans les deux.

La densité de pixels de l'appareil influe sur le fichier livré, pas sur la mise en page : un téléphone 3× reçoit un fichier plus grand pour la même carte de 293 pixels. Et « éléments par écran » compte ce qui est géométriquement visible, un fait sur la mise en page et non sur l'attention. Ce qu'un spectateur remarque dans cet espace n'est pas quelque chose qu'une mesure de l'interface puisse dire.

Les questions que tout le monde se pose