Using a mockup in a landing page hero

The hero is where most visitors decide whether to keep reading. A device mockup there does one job: prove the product exists and show what kind of thing it is, in the first second, before any text is read. Everything about how you export and place it follows from that deadline.

Crop into the device rather than shrinking it

A whole phone floating in a hero looks small on a wide screen, and the interface inside becomes illegible. Crop so the device bleeds off the bottom or the side of the section — the recognisable curve of the top edge is enough to say "phone" — and let the screen occupy real estate. Cropped mockups also scale far better across breakpoints, because you can shift the crop instead of scaling the whole image down.

Static first, video if it earns the weight

An autoplaying mockup video in a hero is effective and expensive: it delays first paint, costs bandwidth on mobile, and burns battery. If you use one, keep it short and silent, loop it, provide a poster image so something appears instantly, and disable it on small screens. Frequently a still hero plus a short video further down the page converts as well and loads in a fraction of the time.

Match the mockup's light to the page

A device rendered on a dark background dropped into a white page will always look pasted on, even when the background is transparent, because the lighting on the body implies a dark surround. Render the mockup against the value your page actually uses. This is the practical argument for keeping the mockup project around rather than only the exported image — when the site is restyled, re-render rather than retouch.