# Touch interactions — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/touch-interactions

> Design for touch: larger tap targets (44x44px), remove hover-only interactions, and use touch-friendly gestures.

## Touch targets and hit area

A finger is 40-50px wide. Touch targets should be at least 44x44px (Apple) to 48x48px (Android) to be easily tappable. Provide spacing between targets to prevent misclicks.

## Touch-friendly button sizing

Buttons should be large and well-spaced on mobile.

```css
button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
  font-size: 16px; /* Prevents zoom on iOS */
  border: none;
  cursor: pointer;
}

button + button {
  margin-left: 8px; /* Space between buttons */
}
```

## Avoid hover-only interactions

Touch devices have no `:hover`. Use `:focus` and `:active` instead. A tooltip that only appears on hover is invisible on mobile — use a tap to reveal, or show tooltips by default.

## Avoiding hover-only patterns

Use :focus-visible and :active instead for touch devices.

```css
button { padding: 12px 20px; }
button:hover { background: #0066cc; }
button:focus-visible { outline: 2px solid blue; }
button:active { transform: scale(0.98); }
```

**Quiz:** What's wrong with hover-only tooltips on mobile?

- [x] They're invisible on touch screens
- [ ] They slow down the page
- [ ] They're too large

*Answer:* They're invisible on touch screens. Touch devices don't have hover state.