Touch Interactions and Mobile Navigation
By the end of this lesson, you'll be able to:
- Design for touch input rather than assuming mouse hover
- Size tap targets appropriately for finger input
- Recognize how mobile presentation can differ even when the navigation mechanism stays the same
Prerequisites: "Responsive CSS and SLDS Responsive Design"
Touch vs. Mouse: No Hover
A tooltip or menu that only appears on :hover never fires at all on a touch device — there's no persistent hover state when tapping with a finger. Any interaction that depends purely on hover needs a tap-based alternative (a visible button, or a tap-to-toggle pattern) to remain usable on mobile at all.
Tap Target Sizing
A clickable element comfortable to hit precisely with a mouse cursor can be genuinely too small to reliably tap with a finger. Base Lightning components (lightning-button, etc.) are generally already sized appropriately — but any custom clickable element (a small icon, a tightly-packed row action) needs deliberate sizing to remain comfortably tappable.
Mobile Navigation Behavior
NavigationMixin (Module 9) works identically in the mobile app — the same PageReference types and API — but the actual presentation can differ: a modal might present full-screen rather than as an overlay, and transitions can follow different platform conventions. The navigation mechanism doesn't change; design expectations for how it looks and feels should still account for the smaller screen.
Exercise
A custom info icon uses only a CSS :hover rule to reveal its tooltip text. Explain, as a comment, why this breaks on mobile and describe a fix.
Show hint
Think about what touch input has no equivalent of.
Exercise
Challenge: explain, as a comment, why NavigationMixin's API staying identical on mobile doesn't guarantee the resulting experience looks the same as on desktop.
Show hint
Think about the difference between a mechanism and its presentation.
Touch Interactions and Mobile Navigation Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
Touch input has no hover state and needs comfortably large tap targets — and while NavigationMixin works identically on mobile, its actual presentation can look meaningfully different than on desktop.