Designing for Internationalization

Have you ever used an app in another language and noticed that things didn’t quite line up? Buttons overflowed, text got cut off, or the layout just felt wrong?

That’s what happens when apps aren’t designed for the global stage.

In this lesson, we’ll explore the concepts of internationalization (i18n) and localization (l10n) — what they are, how they differ, and how to design interfaces that work across languages, cultures, and regions.

🌍 What Is Internationalization (i18n)?

Internationalization is the process of designing and preparing your software so that it can easily be adapted to different languages and regions — without changing the code itself.

Think of i18n as the infrastructure:

  • Separating text from code
  • Supporting Unicode for non-English characters
  • Designing flexible layouts that can grow or shrink

Example: Instead of writing

button.innerText = "Subscribe";

you use a translation key:

button.innerText = t("subscribe_button");

Then you define those keys in language files:

{
  "subscribe_button": "Subscribe"
}

🗺️ What Is Localization (l10n)?

Localization is the process of translating and adapting content for a specific language and region. It includes:

  • Translated text
  • Currencies and number formats
  • Date/time formats
  • Local images, cultural references, and idioms

Localization sits on top of internationalization — and both work together.

🧩 Design Challenges in i18n

🧠 Text Expansion

Some phrases get much longer when translated:

  • “Settings” (8 letters) → “Einstellungen” (German, 14 letters)
  • Plan for expansion: allow buttons and menus to grow

↔️ Right-to-Left Languages

Hebrew and Arabic read right-to-left. Your entire layout may need to mirror.

  • Ensure icons and flows flip logically

📆 Local Formats

  • Dates: MM/DD/YYYY vs DD/MM/YYYY
  • Currencies: $12.99 vs 12,99 €
  • Avoid hardcoding formats — use libraries like Intl.DateTimeFormat

📢 Pluralization

English: “1 item” vs “2 items” Some languages have 3–5 plural forms — make sure your tools support them

🛠️ Tools and Frameworks

  • i18next – Powerful JS framework with plugins for React, Vue, etc.
  • React Intl – From FormatJS, integrates with React components
  • gettext – Classic Unix-based system for many languages
  • ICU MessageFormat – Handles complex plural rules and formatting
  • Babel (Python) – For Django and Flask apps
  • Android/iOS – Native string resource systems (.xml, .strings)

🌐 Real-World Examples

✅ Good i18n

Duolingo: supports dozens of languages, adjusts content to region, and handles RTL beautifully

Visual Studio Code: provides full-language packs, keyboard navigation that respects direction, and community-contributed localizations

❌ Bad i18n

  • Apps where “Submit” buttons are cut off in German or French
  • News sites that still show $ prices to European users
  • UIs that break when languages use double-byte characters (like Chinese or Japanese)

🧪 Your Challenge

Pick one of your projects (e.g., subscription form or habit tracker), and:

  1. Move all user-visible text into a language file
  2. Implement a simple language switcher (English + one more language)
  3. Adjust layout to accommodate longer labels
  4. Bonus: Try mirroring the layout for RTL

🔗 Resources

Internationalization isn’t just a technical concern — it’s a sign of respect for your users around the world.

Design for the globe from the start, and your apps will feel more natural, usable, and human — no matter where in the world they’re opened.