Back to Design & UX

What does mobile-first mean, and what are touch target sizes in UI?

Mobile-first usually means you design the default layout and constraints for a narrow viewport first, then add breakpoints for wider screens, instead of squishing a wide desktop comp. The goal is a usable baseline on real phones: readable type, tappable rows, and content that does not need horizontal scroll for core tasks. For touch, common guidelines (e.g. ~44x44pt or 48x48dp style minimum) reduce mis-taps; you also need spacing between tappable items so a finger does not hit the wrong control. The desktop version can show more in one row, but the mental model and task order should stay consistent.

@media (min-width: 768px) { /* add columns after base mobile */ }
/* min 44-48px touch target, padding between links */

Start simple: try this concept in a tiny project before moving to advanced tools.

responsivemobileaccessibility

Want to check this topic right now?

Check this question