Mobile gets a proper seat.

Change the arrangement, not the promise

On a phone, the introduction must still explain the offer. The example must still be understandable. The next action must still be reachable. Reorder or simplify presentation where necessary, but do not quietly remove the information that makes the decision possible.

For an image-based comparison, a desktop screenshot squeezed into a narrow rectangle may become impossible to read. A matched pair of mobile screenshots can demonstrate the mobile experience at a more useful scale.

Consider fingers and keyboards

WCAG 2.2's AA target-size criterion specifies 24 by 24 CSS pixels, with exceptions including adequate spacing. DigiThat's preferred 44-pixel controls are a house target for more generous interaction, not a claim that 44 pixels is the universal AA minimum.

Also inspect focus visibility, menu dismissal, long form labels and error recovery. Touch support does not remove the need for keyboard support.

Test more than one ideal screenshot

Try a very narrow viewport, long content, increased text size, a landscape orientation and an error state. Check for sideways scrolling in ordinary content. Look at whether a fixed header or sticky action covers the thing someone is trying to read.

Emulation is useful, but it does not replace checking actual devices when they are available. Record the browsers and devices tested rather than declaring “works everywhere”. The world contains rather a lot of screens.

A practical checklist

• Preserve the main explanation and action on narrow screens.
• Check target size, focus visibility and menu dismissal.
• Test real content, enlarged text and at least one actual phone before launch.