Mobile vs desktop social-proof patterns

Why treat the two screens differently?

A phone is tall and narrow, held in one hand, scrolled fast. A desktop is wide, with room to put things side by side and an audience that scans more than it scrolls. Proof that ignores that gap either wastes the desktop space or buries the mobile column under it.

What works on mobile?

• Compact rating summaries, a star line and count, not a sprawling block.
• Swipeable carousels for customer photos and video, horizontal, thumb-driven.
• Proof placed inline in the natural scroll, near the decision, not in a side rail.
• Lightweight media, lazy-loaded, right-sized for the phone and the network.

Weight is the constraint that bites hardest on mobile, because the phone is also the slower network and the smaller battery. A heavy gallery that looks rich on desktop drags the first paint on a phone, and the lift you gained from richer proof gets eaten by the speed loss. The budget that keeps it honest is the one in Core Web Vitals for UGC widgets.

Desktop patterns

• Side-by-side layouts, a gallery alongside the product, reviews in a visible column.
• Richer grids, more customer content visible at once without a tap.
• Hover affordances, detail on hover that mobile cannot offer.

Design mobile-first

Mobile is the majority, so the mobile pattern is the baseline. Design it deliberately, then treat desktop's extra room as an enhancement on top. The reverse (design for desktop, then shrink) is exactly how social proof ends up cramped on the screen most shoppers are holding. The same placement-by-surface thinking carries over to the basket, covered in social proof on the cart and checkout page.