Sua miniatura no celular

A premissa está invertida

Desenhe para o celular, diz o conselho, porque é ali que tudo é pequeno. É meia verdade, de um jeito que esconde a metade mais útil: o arquivo entregue ao celular é mesmo modesto, mas a *fatia da tela do espectador* que sua miniatura ocupa ali é a maior que ela consegue em qualquer lugar.

Isso dá para medir, porque o mock desta ferramenta reproduz o layout do YouTube em tamanhos de viewport reais. Carreguei em três tamanhos comuns de celular e dois de computador e medi, para cada superfície, o tamanho renderizado da miniatura, que fatia da tela isso é, e quantos itens cabem numa tela.

O que uma tela realmente comporta

A fatia de tela é a área da miniatura em relação ao viewport inteiro. Itens por tela contam o que cabe abaixo da barra do navegador — inteiros e parciais, porque um card meio visível ainda é um card disputando o próximo deslize.

Os números do celular se sustentam entre tamanhos: 16,0% num iPhone SE de 375 de largura, 14,7% num iPhone 14 de 390, 16,5% num Android de 412. Não é esquisitice de um aparelho: é o que um feed de coluna única faz.

Três a quatro vezes mais tela

Um card do feed no celular pega 14,7% da tela; o mesmo card numa grade de computador pega 5,2% num notebook e 3,3% num monitor de 1920. Seu desenho recebe de três a quatro vezes e meia mais campo de visão no aparelho que a maioria está usando.

Tem uma segunda diferença no mesmo sentido. No celular os resultados de busca são o mesmo card do feed — mesma largura, mesma altura, um por linha — enquanto no computador a busca vira uma linha larga e a home continua grade. Ou seja, no celular duas das três superfícies são a grande.

E um terço dos vizinhos

Uma tela de celular comporta 3,6 cards do feed. Um notebook comporta 8,5 e um desktop de 1920 comporta 10,3, três por linha. Mesmo feed, mesmos vídeos, situação de competição completamente diferente: no computador o espectador compara dez coisas de uma vez, no celular ele encontra três, depois mais três, depois mais três.

É a diferença entre simultâneo e sequencial. Grade de computador é comparação: uma linha de dez em que o olho escolhe a que destoa. Feed de celular é uma sequência de decisões, cada uma tomada contra o que está na tela naquele instante e contra o que o espectador guardou de um segundo atrás.

O que muda o sentido de “se destacar”

Quase todo conselho sobre miniatura é conselho de computador sem etiqueta. Destaque-se na fileira, seja a célula clara entre as escuras, seja diferente do seu nicho: tudo isso pressupõe que a fileira aparece de uma vez, e no celular não aparece.

A versão para celular do mesmo objetivo é mais parecida com: seja legível e completa sozinha. Uma miniatura que só funciona como contraste com as vizinhas não tem com o que contrastar três quartos do tempo. Uma que declara o assunto com clareza funciona nas duas situações, e é por isso que as medições do guia sobre se destacar são um piso e não uma estratégia: ser diferente é necessário numa grade e insuficiente numa sequência.

Onde o celular é mesmo o caso pequeno

Uma superfície do celular é realmente minúscula, e não é o feed. A lista de sugeridos embaixo de um vídeo rodando é renderizada em 143 × 80 — 3,5% da tela, oito por tela — o que em termos absolutos é menor que qualquer coisa no computador, fora a própria coluna de sugeridos do computador.

É de lá que vêm os pisos duros. O limite de 61 caracteres de título medido no guia sobre o par miniatura–título está ali, e a regra de tamanho de cabeça do guia sobre rostos pede mais da metade da altura do quadro exatamente nessas duas colunas. O feed do celular é generoso; a lista de sugeridos do celular é a superfície mais severa em que um espectador vai te colocar.

E o arquivo também não é a parte pequena

Um card do feed no celular tem 293 pixels CSS de largura, o que nas telas 2× e 3× que os celulares realmente têm dá de 586 a 879 pixels físicos. O YouTube entrega arquivos feitos sob medida para o espaço, então o que chega ali é um dos recortes maiores — não os 168 × 94 que um sugerido de computador recebe.

Ou seja, o caso comprimido e pobre de detalhe medido no guia sobre miniaturas borradas é a coluna de sugeridos, nos dois aparelhos. O feed do celular é a superfície em que a qualidade da sua exportação mais aparece, e onde uma fonte mole ou ruidosa se nota primeiro. A largura mínima que torna isso verdade está nos requisitos de thumbnail do YouTube.

Uma tela é um deslize

O passo vertical de um card de celular para o seguinte é de 220 pixels numa tela de 390 de largura, contra 844 de altura. Três cards e meio, e um único gesto normal de rolagem troca todos eles.

A geometria não diz quanto tempo o espectador olha — ninguém mede isso a partir de um layout — mas diz qual é a unidade da decisão. No computador a unidade é uma grade que o olho varre; no celular é um card que chega, é julgado e vai embora. O que a sua miniatura tiver a dizer, ela diz naquela janela, sozinha, com 293 pixels de largura.

O que a geometria premia

Nada disso contradiz os pisos medidos nos outros guias; muda a ordem de prioridade deles. Legibilidade isolada ganha do contraste com os vizinhos, porque isolamento é a condição padrão do celular. Texto grande o bastante para ser lido sem comparação, um assunto que se identifica sozinho, e uma paleta que não precisa do vídeo do lado para parecer proposital.

E como o mesmo arquivo vai também para uma grade de computador e duas colunas de sugeridos, o desenho precisa sobreviver às duas situações ao mesmo tempo. Não é bem um meio-termo, é uma ordem: faça funcionar em 143 × 80 na lista de sugeridos e em 293 × 165 no celular, e a grade de computador — que fica no meio em tamanho e dá mais tempo ao espectador — se resolve sozinha.

A única decisão realmente só de celular é o quanto você se apoia no título. No celular o título fica logo abaixo da miniatura, na mesma largura; numa coluna de sugeridos de computador ele é uma faixa de 138 pixels ao lado. No celular o par se lê como uma unidade de um jeito que não acontece em nenhum outro lugar.

A checagem, no aparelho que importa

Todos os números acima saíram da mesma ferramenta em que este guia está, que tem um seletor de aparelho exatamente por isso: a visão mobile não é uma visão desktop encolhida, é outro layout com outra aritmética.

Então a checagem são dois cliques na ferramenta de pré-visualização: o feed do celular, onde sua miniatura está no maior tamanho e mais sozinha, e depois a lista de sugeridos do celular, onde ela está no menor. Se aguenta nos dois, as superfícies de computador já estão cobertas.

O que essa medição é e não é

São medidas em pixels CSS do layout web do YouTube, reproduzido nesta ferramenta, nos tamanhos de viewport de celulares comuns. Os apps nativos usam métricas próprias e diferem alguns pixels para um lado ou outro; a forma do resultado — uma coluna, um card que é um sexto da tela, três e meio por tela — é a mesma nos dois.

A densidade de pixels do aparelho afeta o arquivo entregue, não o layout: um celular 3× recebe um arquivo maior para o mesmo card de 293 pixels. E “itens por tela” conta o que é geometricamente visível, que é um fato sobre o layout e não sobre atenção. O que um espectador nota nesse espaço não é coisa que uma medição da interface responda.

As perguntas que todo mundo faz