Tu miniatura en un teléfono

La suposición está al revés

Diseña para móvil, dice el consejo, porque ahí todo es pequeño. Es verdad a medias, de una forma que esconde la mitad más útil: el archivo que se entrega a un teléfono sí es modesto, pero el *trozo de la pantalla del espectador* que ocupa tu miniatura allí es el mayor que consigue en ningún sitio.

Esto es medible, porque el mock de esta herramienta reproduce el diseño de YouTube a tamaños de viewport reales. Lo cargué en tres tamaños comunes de teléfono y dos de escritorio y medí, para cada superficie, cuánto se renderiza la miniatura, qué parte de la pantalla es eso, y cuántos elementos caben en una pantalla.

Qué contiene de verdad una pantalla

El trozo de pantalla es el área de la miniatura frente al viewport completo. Los elementos por pantalla cuentan lo que cabe bajo la barra del navegador — enteros y parciales, porque una tarjeta a medio ver sigue siendo una tarjeta compitiendo por el siguiente deslizamiento.

Los números del teléfono se mantienen entre tamaños: 16,0% en un iPhone SE de 375 de ancho, 14,7% en un iPhone 14 de 390, 16,5% en un Android de 412. No es la rareza de un dispositivo: es lo que hace un feed de una sola columna.

De tres a cuatro veces más pantalla

Una tarjeta del feed en teléfono se lleva el 14,7% de la pantalla; la misma tarjeta en una cuadrícula de escritorio se lleva el 5,2% en un portátil y el 3,3% en un monitor de 1920. Tu diseño consigue entre tres y cuatro veces y media más campo visual en el dispositivo que la mayoría está usando.

Hay una segunda diferencia en la misma dirección. En el teléfono los resultados de búsqueda son la misma tarjeta que el feed — mismo ancho, mismo alto, una por fila — mientras que en escritorio la búsqueda cambia a una fila ancha y la home sigue siendo cuadrícula. Así que en móvil dos de las tres superficies son la grande.

Y un tercio de los vecinos

Una pantalla de teléfono contiene 3,6 tarjetas del feed. Un portátil contiene 8,5 y un escritorio de 1920 contiene 10,3, tres por fila. Mismo feed, mismos vídeos, una situación competitiva completamente distinta: en escritorio un espectador compara diez cosas a la vez, en el teléfono se encuentra con tres, luego otras tres, luego otras tres.

Es la diferencia entre simultáneo y secuencial. Una cuadrícula de escritorio es una comparación: una fila de diez donde el ojo elige la que se diferencia. Un feed de teléfono es una secuencia de decisiones, cada una tomada contra lo que hay en pantalla en ese momento y lo que el espectador recuerda de un segundo antes.

Lo que cambia el significado de «destacar»

Casi todo el consejo sobre miniaturas es consejo de escritorio sin etiqueta. Destaca en la fila, sé la celda clara entre las oscuras, sé distinto de tu nicho: todo eso supone que la fila se ve entera a la vez, y en el teléfono no.

La versión móvil del mismo objetivo se parece más a: sé legible y completa por tu cuenta. Una miniatura que solo funciona como contraste con sus vecinas no tiene con qué contrastar tres cuartas partes del tiempo. Una que declara su sujeto con claridad funciona en las dos situaciones, y por eso las mediciones de la guía sobre destacar son un suelo y no una estrategia: ser distinto es necesario en una cuadrícula e insuficiente en una secuencia.

Dónde el móvil sí es el caso pequeño

Una superficie del teléfono es realmente diminuta, y no es el feed. La lista de sugeridos bajo un vídeo en reproducción se renderiza a 143 × 80 — el 3,5% de la pantalla, ocho por pantalla — que en términos absolutos es más pequeña que cualquier cosa en escritorio salvo la propia columna de sugeridos de escritorio.

De ahí salen los suelos duros. El límite de 61 caracteres de título medido en la guía sobre la pareja miniatura–título está ahí, y la regla de tamaño de cabeza de la guía sobre caras pide más de la mitad de la altura del encuadre exactamente en estas dos columnas. El feed del teléfono es generoso; la lista de sugeridos del teléfono es la superficie más severa en la que un espectador te va a poner.

Y el archivo tampoco es la parte pequeña

Una tarjeta del feed en teléfono mide 293 píxeles CSS de ancho, lo que en las pantallas 2× y 3× que los teléfonos tienen de verdad significa de 586 a 879 píxeles físicos. YouTube sirve archivos hechos para el hueco, así que lo que llega allí es uno de los recortes mayores — no los 168 × 94 que recibe un sugerido de escritorio.

Así que el caso comprimido y falto de detalle medido en la guía sobre miniaturas borrosas es la columna de sugeridos, en cualquiera de los dos dispositivos. El feed del teléfono es la superficie donde la calidad de tu exportación se ve más, y donde una fuente blanda o ruidosa se nota primero. El ancho mínimo que hace que eso sea cierto está en los requisitos de miniatura de YouTube.

Una pantalla es un deslizamiento

El paso vertical de una tarjeta de teléfono a la siguiente es de 220 píxeles en una pantalla de 390 de ancho, frente a una altura de pantalla de 844. Tres tarjetas y media, y un solo gesto de desplazamiento normal las sustituye todas.

La geometría no dice cuánto tiempo mira un espectador — eso nadie puede medirlo desde un diseño — pero sí dice cuál es la unidad de la decisión. En escritorio la unidad es una cuadrícula que el ojo recorre; en el teléfono es una tarjeta que llega, es juzgada y se va. Lo que tenga que decir tu miniatura, lo dice en esa ventana, sola, a 293 píxeles de ancho.

Qué premia la geometría

Nada de esto contradice los suelos medidos en otras guías; cambia su orden de prioridad. La legibilidad en aislamiento gana al contraste con los vecinos, porque el aislamiento es la condición por defecto del teléfono. Texto lo bastante grande para leerse sin comparación, un sujeto que se identifica solo, y una paleta que no necesita el vídeo de al lado para parecer deliberada.

Y como el mismo archivo va también a una cuadrícula de escritorio y a dos columnas de sugeridos, el diseño tiene que sobrevivir a las dos situaciones a la vez. No es tanto un compromiso como un orden: hazlo funcionar a 143 × 80 en la lista de sugeridos y a 293 × 165 en el teléfono, y la cuadrícula de escritorio — que está entre ambas en tamaño y da más tiempo al espectador — se resuelve sola.

La única decisión realmente exclusiva de móvil es cuánto te apoyas en el título. En el teléfono el título va justo debajo de la miniatura con el mismo ancho; en una columna de sugeridos de escritorio es una tira de 138 píxeles al lado. En el teléfono la pareja se lee como una unidad de un modo que no pasa en ningún otro sitio.

La comprobación, en el dispositivo que importa

Todos los números de arriba salieron de la misma herramienta en la que está esta guía, que tiene un selector de dispositivo exactamente por esto: la vista móvil no es una vista de escritorio encogida, es un diseño distinto con una aritmética distinta.

Así que la comprobación son dos clics en la herramienta de vista previa: el feed del teléfono, donde tu miniatura está en su punto más grande y más sola, y luego la lista de sugeridos del teléfono, donde está en su punto más pequeño. Si aguanta en las dos, las superficies de escritorio ya están cubiertas.

Qué es y qué no es esta medición

Son medidas en píxeles CSS del diseño web de YouTube, reproducido en esta herramienta, a los tamaños de viewport de teléfonos comunes. Las apps nativas usan sus propias métricas y difieren en algunos píxeles a un lado u otro; la forma del resultado — una columna, una tarjeta que es un sexto de la pantalla, tres y media por pantalla — es la misma en ambas.

La densidad de píxeles del dispositivo afecta al archivo entregado, no al diseño: un teléfono 3× recibe un archivo mayor para la misma tarjeta de 293 píxeles. Y «elementos por pantalla» cuenta lo geométricamente visible, que es un hecho sobre el diseño y no sobre la atención. Lo que un espectador nota en ese espacio no es algo que una medición de la interfaz pueda responder.

Las preguntas que hace todo el mundo