Over 70% of web traffic globally comes from mobile devices. In Sri Lanka, that figure is even higher. Yet most websites are still designed on desktop first and adapted for mobile as an afterthought. Mobile-first is not a trend — it is the correct order of operations.

What Mobile-First Actually Means

Mobile-first means designing the smallest viewport first, then progressively enhancing for larger screens. This is the opposite of the traditional workflow — designing for desktop and squeezing content into mobile.

The critical insight: constraints produce better design. When you design for a 375px screen first, you are forced to prioritise ruthlessly. Every element must earn its place. The result is a cleaner, more focused experience on all screen sizes.

In Code: min-width Over max-width

Mobile-first in CSS means using min-width media queries (styles expand up) rather than max-width (styles constrain down):

/* Mobile-first (correct) */
.card { padding: 16px; }
@media (min-width: 768px) { .card { padding: 32px; } }

/* Desktop-first (avoid) */
.card { padding: 32px; }
@media (max-width: 767px) { .card { padding: 16px; } }

Tailwind CSS is mobile-first by default — unprefixed utilities apply to all sizes, and breakpoint prefixes (md:, lg:) add styles at larger widths.

Navigation: The Hardest Part

Desktop navigation — a horizontal row of links — does not translate to mobile. Common mobile navigation patterns and when to use each:

  • Hamburger menu — a full-screen or slide-in overlay triggered by a menu icon. Works for sites with 5+ navigation items. The most common pattern
  • Bottom tab bar — persistent tabs at the bottom of the screen. Best for apps with 3–5 primary sections that users navigate between frequently
  • Simplified inline nav — for simple sites with 3–4 links, a horizontal scrollable nav bar works without needing a hamburger

Whichever pattern you choose, thumb reachability matters. The bottom half of the screen is the most comfortable touch target zone. Place your most important actions there.

Touch Targets: The 44px Rule

Apple's Human Interface Guidelines and Google's Material Design both specify a minimum touch target size of 44×44px. Smaller targets cause mis-taps, which cause frustration, which causes abandonment.

Common violations:

  • Text links in paragraphs (too small)
  • Close buttons on modals placed in the corner (too close to the edge)
  • Icon-only buttons without sufficient padding
  • Checkbox and radio button labels that are not clickable themselves

Typography on Mobile

Desktop typography does not scale down automatically. Rules for mobile:

  • Body text minimum: 16px — smaller text on mobile causes zoom and poor readability
  • Line height: 1.5–1.7 — tighter line heights are harder to read on small screens
  • Line length: 60–75 characters — full-width text on mobile is too wide. Use max-width or padding
  • Headings scale down — a 72px desktop headline becomes 36–40px on mobile. Use clamp() for fluid scaling

Forms on Mobile

Mobile forms are where most conversions are lost. Critical details:

  • Use inputMode="numeric" for number fields — triggers the numeric keypad, not QWERTY
  • Use autocomplete attributes — lets the browser pre-fill common fields
  • Make each form field at least 48px tall — easy to tap
  • Place labels above inputs, not inside them as placeholders — placeholder text disappears when typing begins
  • Show the correct keyboard for each field type (type="email", type="tel")

Performance Is a Mobile Issue

Mobile users are often on slower connections (3G/4G) and less powerful CPUs. A site that loads in 1 second on desktop may take 5 seconds on a mid-range Android phone on a 4G connection.

Mobile performance priorities:

  • Compress and resize images to mobile dimensions — do not load a 1200px wide image on a 375px screen
  • Defer loading off-screen content (images, videos) until the user scrolls near them
  • Minimise JavaScript — every KB of JS must be parsed and executed on the device CPU

Mobile-first is not a constraint — it is a discipline that produces better products for all users. The best mobile experiences tend to be the best experiences overall, because they started from a place of clarity about what truly matters.