Mobile-First Design: Designing for the 80 Percent

Mobile-first design is not shrinking the desktop page; it is deciding what is truly necessary on the most constrained screen.

Core principles

• Single column, clear hierarchy, thumb-reachable actions
• At least 16 px text and 44 px touch targets
• Fewer form fields, autofill enabled
• Keep the menu simple; mega menus become accordions on mobile

Common mistakes

Reusing large desktop images on mobile, tables that scroll horizontally and full-screen pop-ups are the three most common conversion killers.

Testing

Test on real devices and slow connections. Lighthouse mobile scores are always lower than desktop; aim for 90 or higher on mobile.