What SaaS Websites Actually Do on Mobile (12 Real Comparisons)

Read any "best SaaS websites" roundup and you will notice something odd: not one of them mentions mobile. The big listicles that rank for this topic — eight or nine thousand words, thirty or forty examples each — review desktop screenshots exclusively, and then stop.

That is a strange blind spot for an industry that obsesses over conversion. So this piece does the comparison the others skip. Every site in this catalog is captured twice, once on desktop and once at a 390px-wide mobile viewport — 353 of 355 sites have both — which makes it possible to put the same page side by side with itself and see what survived.

What follows is twelve of those comparisons, and the patterns that fall out of them.

First, how the captures work and what they can't tell you

Each site gets a full-page desktop capture and a full-page capture at 390px wide, the width of a standard iPhone viewport. Both come from the same pipeline. The mobile shots below are the top ~1,250px of that capture, which is roughly one and a half phone screens.

Two honest limits.

A screenshot cannot show interaction. Anything behind a tap — an expanded menu, a video that autoplays, a sticky bar that appears on scroll — is invisible here. When a desktop element seems to have "disappeared" on mobile, it may be one tap away.

Captures are not guaranteed simultaneous. Desktop and mobile shots of the same site are taken close together, but a site can change between runs. This matters exactly once below, on Tailscale, and rather than guess I flag it.

The best move: swap the visual, don't shrink it

The single clearest divide between sites that handle mobile well and sites that merely survive it is whether the hero visual was reconsidered or just resized.

Ramp replaces a dense interface with one object

On desktop, Ramp fills the space under its headline with a layered composition: an invoice view for "Zain's Boba Shop INV# IN4434" showing vendor details and bill fields, a physical black Ramp card, and a phone displaying approvals. It is detailed, and at desktop width you can read all of it.

At 390px, that entire interface is gone. What remains is the black Ramp card, alone, centred on a dotted background. Not scaled down — removed and replaced.

The rest of the fold adapts rather than reflows. The email field and yellow "Get started for free" button, side by side on desktop, stack into two full-width rows. The headline breaks cleanly across two lines because "Time is money. Save both." was short enough to survive any width. The live percentage above it is retained, and — a lovely detail — it reads 0.7367754% on mobile against 0.7367747% on desktop, which is simply the counter having ticked between captures. Proof it is genuinely live rather than a static image.

One flaw does show. The activity ticker below the card ("RECEIPTS PROCESSED: 1,430,449 / ACCOUNTING FIELDS…") runs off the right edge mid-word. On desktop it is a full-width band of six metrics; on mobile it becomes a truncated fragment.

Pitch drops its best idea on mobile

Pitch's desktop hero has the most interesting CTA in our thirty best: instead of a button, a prompt input pre-filled with "Generate a sales presentation for a digital marketplace," with a "Generate ↑" control. The first action available is using the product.

At 390px the prompt box is not there. In its place sits a static screenshot of the Pitch editor, and the conversion path reverts to two conventional buttons: white "Sign up for free →" and lime "Get a demo." The subhead ("From prompt to presentation, 4M+ teams…") moves from below the input to above the buttons.

This is a defensible trade — a prompt field on a phone invites typing a sentence with your thumbs, and the on-screen keyboard would cover the result. But it is worth naming plainly: the thing that makes Pitch's desktop hero memorable is the thing mobile visitors never see.

Two costs stack up above it, too. The announcement bar wraps to three lines at this width, and the headline takes three more. Between them they consume roughly a third of the first screen before the product appears. Below the fold, the logo row (synthesia, Pentagram, KOLO…) runs off the right edge rather than wrapping.

The most common failure: product UI scaled to illegibility

Linear

Linear's desktop hero is a full workspace — sidebar, issue list, detail panel, and a floating agent window reading "Worked for 7s." Every label is legible, and the legibility is the point: the screenshot is the argument.

On mobile, that same wide screenshot is scaled to fit 390px. The composition still reads as "a serious tool," but not one word inside it is readable. The sidebar items, the issue title, the agent transcript — all of it is now texture.

The alternative would be cropping to one region, the way Ramp swaps to a single object. Whether Linear considers the impression sufficient is a real design question rather than an obvious error. But it is the clearest example of the dominant mobile pattern in this catalog: the desktop asset survives, its content does not.

There is a compensation, and it is one of the more interesting findings here. Because the hero compresses vertically on mobile, what follows arrives much sooner. Within the same 1,250px, a four-logo strip appears — Vercel, CURSOR, oscar, OpenAI — followed by "A new species of product tool." A desktop visitor scrolls past a tall hero to reach that proof. A mobile visitor gets it almost immediately.

That is a general effect rather than a Linear quirk. On Deel and fal, logo strips also land inside the first screen and a half. If you have ever wondered whether the logo cloud is worth building, the mobile experience makes a stronger case for it than desktop does — something we looked at across 93 of them.

When the two captures disagree

Tailscale

This one deserves care, because it would be easy to over-claim.

Our desktop capture of Tailscale shows the headline "A better network model for AI infrastructure," the subhead "Identity-based connectivity for AI agents, GPUs, MCP servers, and internal systems," and a primary CTA reading "Secure AI with Tailscale."

The mobile capture shows a different headline — "The best secure connectivity platform for the AI era" — a longer, more technical subhead naming Zero Trust, legacy VPN, SASE, PAM, CI/CD pipelines and Edge & IoT devices, and a different primary CTA: "Start connecting devices."

There are two plausible explanations. Either Tailscale serves different hero copy by breakpoint, or the site was rewritten between our two captures. From the screenshots alone we cannot tell which, and it would be irresponsible to present either as fact. What it does illustrate is that hero copy is the most frequently rewritten element on a SaaS marketing site, and that any inspiration list older than a few months is partly describing pages that no longer exist.

What is unambiguous is the layout adaptation. The five-way product selector — Business VPN, Privileged Access, Securing AI, Infra access, Zero Trust networking — sits as a single row of five cards on desktop. On mobile it reflows into wrapped chips, two-two-one, each keeping its icon and losing its description line. The selected "Business VPN" panel then continues below. It is a genuinely good responsive treatment of a component that could easily have become a five-item vertical list.

Stacking, and the small decisions inside it

fal stacks everything, and the decoration keeps working

fal's desktop hero is loud: a saturated cyan field with black type, crossing yellow and purple bars, and dithered pixel blobs bleeding in from both edges.

At 390px the headline still runs three lines and still dominates. The two CTAs — "Get started" and "Contact Sales" — stack full-width. The interesting part is the decoration: rather than scaling down, the bars and pixel blobs crop at the viewport edge. A purple bar now cuts across the top right corner and a lime dither shape fills the upper left, and the composition is arguably tighter than the desktop one.

Below, a logo grid appears in a 3-2-1 arrangement — Adobe, shopify, Canva, Quora, perplexity, Genspark — under "Trusted by over 1,500,000 developers and leading companies."

Gumroad lets the type run the page

Gumroad makes almost no concessions, and gets away with it. The wordmark stays enormous, spanning nearly the full width with the GitHub star badge ("9.2K ★") beside it and a hamburger at the right. "Go from 0 to $1" breaks across two lines at a size that would be reckless for a longer headline.

The two desktop hero controls — the black "Start selling" button and the "Search marketplace …" field — stack into two full-width rows, and the search field keeps its magnifier. The pink "G" coins crop hard at both edges, which reads as deliberate rather than broken.

Mercury keeps its capture inline, and reframes the photograph

Mercury is the exception to stacking. Its email field and blue "Open account" button stay on one line at 390px, which keeps the fold compact at the cost of a fairly narrow input.

The photograph is genuinely recomposed rather than cropped from the desktop framing: the desk and chair sit more centrally, more foreground meadow is visible, and the valley recedes vertically instead of horizontally. Someone re-shot or re-cropped the art direction for portrait.

The regulatory details survive intact — the superscript ¹ after "banking," and the FDIC disclaimer bar, which wraps from one line to three and still sits inside the first screen. For a finance product, keeping that visible rather than pushing it into a footer is the right call at any width.

Deel stacks a split hero into two cards

Deel's desktop hero is a two-panel split: indigo copy on the left, a customer testimonial carousel on the right. On mobile the two panels simply stack, indigo card first, testimonial card beneath, and both keep their full contents — the pause control, the ElevenLabs label, the quote, the attribution to Mati Staniszewski, and all four carousel dots.

The nav does something worth copying: it collapses to the wordmark, a hamburger, and a persistent "Book a demo" pill. Most sites in this set surrender their nav CTA to the hamburger. Deel keeps the one that matters visible.

Below, a logo grid appears two-per-row under "TRUSTED BY 40,000+ COMPANIES FROM STARTUPS TO ENTERPRISE" — proof arriving early again, for the same structural reason as Linear.

What the twelve comparisons add up to

Swapping beats scaling. The two sites that reconsidered their hero asset — Ramp dropping the invoice UI, Pitch replacing the prompt box — produce cleaner mobile folds than any site that shrank its desktop screenshot. The trade is that Pitch loses its most distinctive idea in the process.

Vertical space is the scarce resource, and announcement bars are the biggest tax. A bar that costs one line on desktop costs two on Ramp and three on Pitch. Given that fourteen of our thirty best sites run one, this is a widespread and largely unexamined cost.

Proof moves up. Because heroes compress and logo strips do not, social proof consistently lands earlier in the mobile scroll — inside the first screen and a half on Linear, Deel and fal.

Horizontal overflow is the most common actual bug. Ramp's metrics ticker and Pitch's logo row both run off the right edge rather than wrapping. Neither is fatal, and both would be caught by anyone who opened the page on a phone.

Nav CTAs mostly vanish, and mostly shouldn't. Deel and Gumroad keep something actionable in the collapsed nav. Most of the rest hand the entire top bar to a hamburger.

If you want to browse this yourself, every site in the catalog has its mobile capture on its own page, and the mobile designs hub collects them. It pairs well with the hero section hub, where the desktop versions of most of these folds are broken down in detail.

At a glance