Your thumbnail on a phone

The assumption is backwards

Design for mobile, the advice goes, because that is where everything is small. It is half true in a way that hides the more useful half: the file delivered to a phone is indeed modest, but the *share of the viewer's screen* your thumbnail occupies there is the largest it gets anywhere.

This is measurable, because the mock in this tool reproduces YouTube's layout at real viewport sizes. I loaded it at three common phone sizes and two desktop ones and measured, for each surface, how big the thumbnail renders, how much of the screen that is, and how many items fit in one screenful.

What one screen actually holds

Share of screen is the thumbnail's area against the whole viewport. Items per screen counts what fits below the browser's own bar — full and partial, because a half-visible card is still a card competing for the next flick.

Phone numbers hold across sizes: 16.0% on a 375-wide iPhone SE, 14.7% on a 390-wide iPhone 14, 16.5% on a 412-wide Android. It is not a quirk of one device — it is what a single-column feed does.

Three to four times more of the screen

A phone feed card takes 14.7% of the screen; the same card in a desktop grid takes 5.2% on a laptop and 3.3% on a 1920-wide monitor. Your design gets between three and four and a half times more of the viewer's field of view on the device most of them are using.

There is a second difference in the same direction. On a phone the search results are the same card as the feed — same width, same height, one per row — while on a desktop search switches to a wide row and home stays a grid. So on mobile, two of the three surfaces are the big one.

And a third of the neighbours

A phone screen holds 3.6 feed cards. A laptop holds 8.5 and a 1920-wide desktop 10.3, three per row. Same feed, same videos, a completely different competitive situation: on a desktop a viewer compares ten things at once, on a phone they meet three, then three more, then three more.

That is the difference between simultaneous and sequential. A desktop grid is a comparison — a row of ten where the eye picks the one that differs. A phone feed is a sequence of decisions, each made against what is on screen at that moment and what the viewer remembers from a second ago.

Which changes what “stand out” means

Most thumbnail advice is desktop advice wearing no label. Stand out from the row, be the one bright cell among dark ones, be different from your niche — all of that assumes the row is visible at once, which on a phone it is not.

The mobile version of the same goal is closer to: be legible and complete on your own. A thumbnail that only works as a contrast to its neighbours has nothing to contrast with three-quarters of the time. One that states its subject clearly works in both situations, which is why the niche measurements in the guide on standing out are a floor and not a strategy: being different is necessary in a grid and insufficient in a sequence.

Where mobile really is the small case

One surface on a phone is genuinely tiny, and it is not the feed. The suggested list under a playing video renders at 143 × 80 — 3.5% of the screen, eight of them per screenful — which is smaller in absolute terms than anything on a desktop except the desktop suggested column itself.

That is where the hard floors come from. The 61-character title limit in the guide on the thumbnail–title pair is measured there, and the head-size rule in the guide on faces asks for over half the frame height on exactly these two columns. The phone feed is generous; the phone suggested list is the strictest surface a viewer will put you on.

The file is not the small part either

A phone feed card is 293 CSS pixels wide, which on the 2× and 3× screens phones actually have means 586 to 879 device pixels. YouTube serves per-slot files, so what arrives there is one of the larger crops — not the 168 × 94 that a desktop suggested item gets.

So the compressed, detail-starved case measured in the guide on blurry thumbnails is the suggested column, on either device. The phone feed is the surface where your export quality is most visible, and the one where a soft or noisy source shows up first. The minimum width that makes that true is in YouTube's thumbnail requirements.

A screenful is one flick

The vertical step from one phone card to the next is 220 pixels on a 390-wide screen, against a screen height of 844. Three and a half cards, and a single ordinary scroll gesture replaces all of them.

The geometry does not tell you how long a viewer looks — nobody can measure that from a layout — but it does tell you the unit of the decision. On a desktop the unit is a grid the eye scans; on a phone it is one card arriving, being judged, and leaving. Whatever your thumbnail has to say, it says it in that window, alone, at 293 pixels wide.

What the geometry rewards

Nothing here contradicts the floors measured elsewhere; it changes their priority order. Legibility in isolation beats contrast with neighbours, because isolation is the phone's default condition. Text large enough to be read without a comparison, a subject that identifies itself, and a palette that does not need the video next to it to look deliberate.

And because the same file is also going into a desktop grid and two suggested columns, the design has to survive both situations at once. That is not a compromise so much as an ordering: get it right at 143 × 80 in the suggested list and 293 × 165 on a phone, and the desktop grid — which sits between them in size and gives the viewer more time — takes care of itself.

The one genuinely mobile-only decision is how much you rely on the title. On a phone the title sits directly under the thumbnail at the same width; in a desktop suggested column it is a 138-pixel strip beside it. The pair reads as a unit on a phone in a way it does not anywhere else.

The check, on the device it matters on

Every number above came out of the same tool this guide sits on, which has a device toggle for exactly this reason: the mobile view is not a shrunken desktop view, it is a different layout with different arithmetic.

So the check is two clicks in the preview tool: the phone feed, where your thumbnail is at its biggest and most alone, then the phone suggested list, where it is at its smallest. If it holds in both, the desktop surfaces are already covered.

What this measurement is and is not

These are CSS pixel measurements of YouTube's web layout, reproduced in this tool, at the viewport sizes of common phones. The native apps use their own metrics and differ by a few pixels either way; the shape of the result — one column, a card that is a sixth of the screen, three and a half per screenful — is the same in both.

Device pixel ratio affects the file that gets delivered, not the layout: a 3× phone gets a bigger file for the same 293-pixel card. And “items per screen” counts what is geometrically visible, which is a fact about the layout rather than about attention. What a viewer notices in that space is not something a measurement of the interface can answer.

The questions everyone asks