Mobile and Responsive SaaS UX
Few people run a whole SaaS product from a phone, but many check, approve and reply from one. Mobile UX is about doing those few tasks quickly, not squeezing the desktop app onto a small screen.
What does good mobile SaaS UX look like?
Good mobile SaaS UX supports the few tasks people actually do on phones, such as checking status, approving, replying and capturing information, with large touch targets, short forms, readable text and navigation within thumb reach. Complex setup and analysis can stay desktop-first, with a clear message when something is easier on a computer.
Which tasks should work on a phone?
Find the phone tasks from your analytics and support requests, then design for them first. The mock-up shows a fictional approval product on a phone: one card, the key facts and two large actions.
Acme Logistics · Due Oct 14
Freight, September · PO 1187 matched
2 of 3 approvals done
Splitting a form into short steps works better on phones than one long form, as long as each step shows progress and keeps what the user already entered.
How large should touch targets be?
WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at Level AA, with exceptions (W3C on what’s new in WCAG 2.2). Google’s web.dev guidance recommends at least 44 by 44 pixels for touch targets on mobile and larger text inputs (web.dev sign-in form best practices). Treat 24 as the floor and 44 as the goal for primary actions.
- Space small targets apart so a thumb doesn’t hit two.
- Use the correct input type so phones show the right keyboard.
- Keep the primary action visible when the keyboard opens.
- Avoid hover-only menus and tooltips.
How should tables and dashboards adapt?
Turn table rows into cards showing the two or three values that matter, move filters into a slide-up panel, and show dashboard numbers one per row. Let users open the full view on desktop if they need it. See tables and filters and dashboard design for the desktop versions, and navigation for the mobile menu.
Design the phone tasks on purpose.
A responsive layout isn’t a mobile strategy. Decide which tasks matter on a phone and make those excellent.
How do you test mobile UX?
Test on real phones, on mobile data, with one hand. Complete each phone task, note anything you have to zoom, scroll sideways or tap twice, and check that forms work with autofill. Signup and login on phones are covered on signup form design and login page UX. Accessibility checks overlap heavily; see SaaS accessibility.
Frequently asked questions
Do SaaS products need to work on mobile?
The tasks people do on phones, such as checking, approving and replying, should work well. Full setup can stay desktop-first.
How big should touch targets be?
At least 24 by 24 CSS pixels under WCAG 2.2, and ideally 44 by 44 for primary actions, as web.dev recommends.
How should tables work on mobile?
As cards with the most important values, with filters in a panel.
Should forms be split into steps on mobile?
Often yes, with progress shown and earlier answers kept.
How do I test mobile UX?
On real phones, on mobile data, one-handed, completing each phone task.
Should mobile hide features?
Hide complexity, not information users need to decide.
Sources & further reading
Standards and platform rules change. These sources let you verify the current requirements directly. All screens shown are mock-ups of fictional products.