Most account-area designs are built on desktop and then squeezed. That order of operations is backwards for commerce: across most WooCommerce stores, the majority of post-purchase sessions — checking a status, showing a receipt, reordering — happen on phones, often standing in line or opening a doorbell camera. The portal has to be a mobile product first, with desktop as the expanded edition.

What genuinely differs

On desktop, a left rail or top bar works; the screen is wide and the destinations are few. On mobile the destinations belong in a thumb-reachable bottom bar — the four destinations that cover nearly all traffic (Home, Orders, Wallet, Support). Dropdown navigation hides the store behind an extra tap and a generic icon.

Tables become cards

An orders table with seven columns cannot be “responsive” — it can only be horizontally scrollable, which is a UX apology. Mobile needs a different presentation: stacked rows with the three facts that matter (status, total, date), tap for the rest. This is a redesign, not a media query.

Typography scales asymmetrically

Body text on mobile wants 15–16px with generous line height; headings compress. Desktop can afford denser rows and smaller chips. The mistake to avoid: shrinking everything uniformly, which produces desktop-on-a-phone (unreadable) or phone-on-desktop (childish).

Actions move, states don't

Where the “Pay now” button sits changes per screen size. What the button says, and when it appears, must not. The status logic — pending payment above all, processing before completed — is screen-agnostic. Diverge the layout, never the truth.

One test, two widths

Every portal screen should be reviewed at 360px and 1440px, nothing in between. If it works at the extremes, the middle takes care of itself. If it only works at 768px, it works nowhere.

What must stay identical

  • Data. The same orders, balances and tickets — no “mobile lite” subsets that surprise a customer who switches devices.
  • Language. Statuses and labels word-for-word the same; customers learn one vocabulary.
  • Dark mode and RTL. Both layouts or neither; half-shipped theming reads as neglect in Arabic locales where RTL is not optional.

How WooAccount handles it

The portal ships a bottom bar, card-based order lists and a single stylesheet that drives logical properties for both directions — the RTL notes cover the mechanics. Both surfaces share one data layer, so the portal feels like the same store at every width. Open the demo on your phone and your laptop; the comparison is the pitch. For the design language behind it — density, restraint, no giant rounded voids — see Designing Dense Commerce.