Mobile

One focused chapter from the Thorbis interface research. 12 rules. Read the research index for every chapter and focused study.

Mobile

A phone is not a small laptop. These are the fixes that make a workbench feel native in a van, collected by Emil Kowalski while on the Vercel design team, in Few tricks to make your app feel more native on mobile (opens in a new tab). We keep them as law, not tips.

Hover state stuck after tap. Wrap hover styles in @media (hover: hover) and (pointer: fine). Touch devices emulate hover on tap; without the query the state sticks. From Emil Kowalski .
Press to peek. Hover stays on a mouse.
No hover preview on a thumb. Peek is a press.
Gray/blue flash on tap. Kill -webkit-tap-highlight-color (or set it to the surface). The default flash is browser chrome, not our press state.
Layout has the wrong height. Use 100dvh for the app shell. Use 100svh for a hero that must not jump when the browser chrome shows or hides. Never 100vh on a phone.
Page zooms into the input. Same law as Mobile input size.
Customer phone
Phone
The field is 16px. The board stays put.
Tap feels laggy. Give feedback on pointer-down, not pointer-up, and set touch-action: manipulation so the browser does not wait to see if the tap is a double-tap zoom.
Collect
The press is the feedback. No flash of blue from the OS.
Pull-to-refresh hijacks scroll. Set overscroll-behavior: none on html, body in the workbench. Sheets and drawers still use overscroll-behavior: contain so they don’t chain to the page.
Content stops at the notch. viewport-fit=cover plus env(safe-area-inset-*). The canvas may bleed into the inset; controls and type stay inside it.
Long-press selects button text. Add user-select: none on buttons, tabs, and other controls. Selection is for copy, not for chrome.
Carousel scrolls vertically. Set touch-action: pan-y on a horizontal gesture surface so the page can still scroll, and the swipe does not fight it.
Status bar color doesn’t match. Same law as Browser UI matches your background.
darklight
The notch matches the canvas. Not a random white bar.
Right in Chrome, wrong on a phone. Test on real hardware. DevTools device mode does not reproduce tap-highlight, hover-stick, address-bar height, or the notch. Emil’s last line, and the only one that cannot be faked.
Don’t cancel a drag the thumb is covering. Tiny sliders and carets disappear under a finger. Keep the gesture alive if the touch moves away while still down. When precision matters, a caret, a time scrub, show a loupe or enlarged key above the contact, and drop it once the finger no longer covers the target. Rauno, “Touch Content Visibility.”

I built this for the dispatcher at 7 a.m., the tech in a crawlspace, and the owner closing the books. Quiet chrome. Precise work. I’m still learning. These are the notes.

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

Transfer the intent, not the desktop gesture

An interaction that works with a precise pointer or modifier key may be unusable for a tech holding a phone.

Preserve the record and task while adapting the visible action path to the device. Use the existing native owner for target sizing, safe areas, focus, and host behavior; no critical action relies only on hover or a hidden gesture.

Thorbis example. A field photo remains attached to the same job when the tech changes orientation or returns from another app. The visible capture action and retry path remain available without discovering a desktop shortcut.

Verify. Check one-handed use, software keyboard opening, text enlargement, orientation, focus visibility, and reduced motion on the relevant device. Keep permission refusal and return-from-interruption states in the review.

Do not import. No desktop hover contract on a phone, blocked zoom, silent clipboard access, or unverified claim that a web imitation is native behavior.

Open the native skill · Evidence: Web Interface Guidelines; Design Engineer Principles; Devouring Details