Mobile-first design — a strategy for enterprise applications

Most of our enterprise users access the system from desktop computers. So why mobile-first? Because designing for constraints (small screen, slow network) leads to a better product on desktop as well. Content first, progressive enhancement.

Mobile-first does not mean mobile-only¶

Mobile-first is a design strategy: start with the smallest screen, define the content priority, then add for larger screens. On mobile, only the essentials fit — that forces you to think about priorities.

Progressive Enhancement¶

Basic functionality for everyone, enhancements for more capable devices. CSS media queries add rules for larger screens (min-width, not max-width). JavaScript: feature detection instead of browser detection.

Typography and touch targets¶

Minimum 16px for body text (readable without zooming). Touch targets at least 44×44px (Apple HIG). Sufficient whitespace between interactive elements. Forms: correct input types (email, tel, number) for mobile keyboards.

Performance budget¶

On 3G, every kilobyte matters. Performance budget: max 400 KB initial load, first meaningful paint under 3 seconds. Lazy loading of images, critical CSS inline, async JavaScript. Performance is a feature.

Mobile-first = User-first¶

The mobile-first approach forces us to think about what is truly important for the user. The result: better products on all devices.