Designing a 404 page for phones instead of shrinking the desktop joke
Mobile error pages need thumb-sized exits, resilient type, economical art, and less patience for clever obstacles.
Filed: · By:Steve Bullis
Many 404 pages are composed like posters: a wide illustration, one perfect line, and a button in the lower corner. Then the phone layout arrives and turns the poster into a keyhole.
A good mobile 404 is not the desktop version at 38 percent scale. It is the same idea with a different order of importance.
Put recovery above the fold
On a small screen, a visitor should see three things quickly:
- the page is missing;
- they are still on the expected site;
- there is a safe next step.
The hero illustration can continue below. Do not require a long scroll past an elaborate scene before the first working link appears.
Recompose the artwork
Wide scenes often have a focal point. Preserve that subject rather than squeezing every cloud, character, and caption into a thin rectangle.
Options include:
- switching to a portrait crop;
- moving the subject above the copy;
- hiding purely decorative side elements;
- supplying a separate small-screen illustration;
- replacing a detailed animation with one still frame.
This is art direction, not loss. A joke that can be recognized is better than a complete joke that can only be inspected with a magnifying glass.
Make controls comfortable
Use generous touch targets and leave space between competing actions. Avoid a tiny text link tucked against the viewport edge. If the page includes a game or draggable element, do not make that interaction the only route back to the site.
The primary action should look like the primary action. “Back” can be unreliable when the visitor arrived from another site; a real home or category link is more dependable.
Expect browser chrome and strange heights
Phone viewport height changes as address bars appear and disappear. Avoid centering the entire page with a rigid 100vh layout that clips the bottom action. Prefer natural document flow, sensible minimum heights, and padding that respects safe-area insets.
Also test landscape. It is short, wide, and excellent at revealing fixed-height assumptions.
Watch the page weight
Error pages are often reached through a broken or unstable path. Do not make recovery depend on a multi-megabyte video, a large animation library, or a chain of third-party scripts.
Load the essential text and exits first. Compress artwork. Respect reduced-data and reduced-motion preferences where practical. A fast plain fallback is better than a brilliant scene that never appears.
Capture the phone version on purpose
When reviewing 404 design, save both desktop and phone evidence. A desktop screenshot cannot prove the mobile composition works, and an automated center crop can hide the exact layout decisions worth studying.
The museum displays both views for that reason. Responsive design is not a footnote to the specimen; it is part of the specimen.