Merchandising video for the phone, first

Everyone knows their traffic is mostly mobile. Almost everyone designs the layout on a 27-inch screen and checks the phone at the end, if at all. The result is predictable and it is everywhere.

What actually changes on a phone

• Vertical space is the scarce resource. On a desktop, a nine-item grid is one screen. On a phone at one across, it is nine screens between the shopper and whatever is below it.
• Sideways scrolling is free, downward scrolling is expensive. The exact opposite of the desktop intuition, and the reason carousels punch above their weight on mobile.
• The thumb has a reach. Controls at the top of a full-screen player are the hardest place on the device to tap.
• Text sized for a card is different from text sized for a screen. Overlay copy that is legible full-screen frequently is not at card size.

Set columns per device

Not one number that compromises between both. Three across on a desktop and one across on a phone is usually right for a grid; two across works when the cards are square and the library is large.

A grid left at three across on a phone produces cards too small to read and too small to tap reliably, which is a worse outcome than not having the section.

Prefer carousels above the fold

Near the top of a page, a carousel costs one card’s height regardless of how many videos are in it. A grid costs all of them. If the section is competing with a buy button or a headline for space, the carousel wins on mobile almost every time.

Full-screen playback is the mobile format

This is where the phone has the advantage. A full-screen vertical player on a phone is a native-feeling experience that no desktop layout can match, and it is the reason mobile video engagement is typically well ahead of desktop.

What matters there is what is above the fold inside the player: the product, its price, and the way to buy it. Photos should be capped so the details are not pushed below the visible area, and a video with one product should show that product’s details directly rather than a strip containing a single item.

Test on a real device, on a real connection

The browser’s responsive mode gets the width right and everything else wrong: it has a desktop’s network, a desktop’s processor and a mouse. The problems that cost money — a slow first frame on a middling connection, a control the thumb cannot reach, a tap target a few pixels too small — only appear on the actual thing.

One habit worth forming

Build the mobile layout first and let the desktop inherit it. It is much easier to add space than to remove it, and a layout designed under mobile constraints usually turns out to be a cleaner desktop layout too.