Mobile-first isn't just a CSS approach — it's a product strategy. In most B2C products, more than 60% of traffic comes from mobile devices; in B2B field applications, it's nearly all of it. At Avva Mobile, we've built 60+ mobile and web platforms over more than 8 years, and every project that started with "let's build desktop first and adapt for mobile later" ended up compromising on mobile. Here are the 5 core principles we apply across all our projects.
1. Performance Budget
Our target for Largest Contentful Paint (LCP) is under 2.5 seconds, and under 200 ms for Interaction to Next Paint (INP). We keep the JavaScript bundle under 200 KB and serve images in WebP/AVIF at the right dimensions.
What really matters is enforcement: we measure with Lighthouse CI before every merge, and the build fails when the budget is exceeded. A performance regression should be a bug caught in code review, not a surprise discovered in production.
2. Touch Ergonomics
All touch targets are at least 44×44 px (Apple HIG) / 48 dp (Material). Critical actions live in the thumb-reach zone — the lower half of the screen; the top corners are the hardest spots for one-handed use. There is no hover on mobile, so every interaction needs a designed pressed state. Finally, plan for mistaken taps: destructive actions like delete require an undo or a confirmation step.
3. Offline-First Logic
Service workers and a local cache via IndexedDB. Users should be able to interact with the app on a plane, in a warehouse, or in an elevator — for field teams and couriers this isn't a nice-to-have, it's a precondition of the job. The hard part is synchronization: last-write-wins loses data in most business scenarios, so a field-level merge strategy has to be designed up front. And don't hide connectivity from the user; saying "you're offline — your changes are saved and will sync when you're back" builds trust.
4. Accessibility First
WCAG AA+ contrast ratios, semantic HTML, and respect for prefers-reduced-motion. Accessibility is not a feature added at the end — it's a design constraint from the first wireframe. Dynamic type support is especially critical: a significant share of users increase their system font size, and fixed-height components break when they do. We run screen reader tests with VoiceOver and TalkBack on real devices, not in simulators.
5. Progressive Loading
Skeleton screens, lazy-loading, route-based code splitting. The strategy is simple: make the first paint fast and let full interactivity arrive progressively. Critical CSS is inlined; the rest is deferred. The biggest enemy of this budget is usually not your own code but third-party scripts — analytics and marketing tags left undisciplined will consume the entire budget on their own. Every script entering the tag manager should pass a performance review.
A culture, not a checklist
These five principles are not a one-off checklist; they're a discipline reapplied every sprint. If you're not sure your mobile experience clears this bar, we'd suggest starting with a concrete mobile-first audit of your existing product with the Avva Mobile team.
