2.2.4 India First Localization

This skill defines the technical and UX standards for building applications optimized for the Indian market — the world's largest smartphone user base with unique connectivity, language, payment, and cultural considerations.

1. Multi-Language Architecture

Goal: Full Hindi and regional language support without code duplication.

i18n File Structure: Create locale JSON files per language: locales/en.json, locales/hi.json, locales/mr.json, etc. Keys are semantic identifiers ("game.start", "nav.home"), values are translated strings.
Runtime Switching: Implement language toggling via UI buttons (not a buried settings menu). Store the preference in localStorage as lang. Apply immediately without page reload by re-rendering string-dependent components.
Font Support: Load Noto Sans Devanagari (or equivalent) for Hindi/Marathi/Sanskrit scripts. Use unicode-range in @font-face to avoid loading Devanagari glyphs for English-only users.
Text Expansion: Hindi text is typically 20–40% longer than English equivalents. Design UI with flexible containers. Never use fixed-width text elements. Test all layouts in Hindi before shipping.
Pluralization & Gender: Hindi has different plural forms and gendered nouns. Use ICU MessageFormat or a library like intl-messageformat for proper pluralization and gender agreement.

2. Low-Bandwidth & Offline Optimization

Goal: Full functionality on 2G/3G connections and in spotty coverage areas.

Bundle Size Budget: Target < 200KB initial JS bundle (gzipped). Use code-splitting with dynamic import() for non-critical features. Lazy-load images and heavy components.
Image Strategy: Use WebP format with aggressive compression (quality 60–70). Serve responsive images via srcset with appropriate sizes for mobile screens (rarely > 400px width). Implement blur-up placeholders.
API Responses: Minimize JSON payload sizes. Use field masks / selection (Firestore's select()) to fetch only required fields. Paginate all list endpoints.
Offline Core: The app's primary utility must work fully offline (Skill 05). Cache critical data in IndexedDB on first load. Show meaningful content even with no network.
Network Detection: Use navigator.connection.effectiveType to detect 2g/3g and adapt: disable auto-play media, reduce image quality, defer non-essential network requests.