Skip to content
UX Atlas
UX writingCraft conventionAdvanced

Internationalization

Designing so the product can be adapted to other languages and regions without being rebuilt.

Definition

Internationalization is the preparation work that makes localisation possible: flexible layout, externalised strings, locale-aware formatting and correct bidirectional support. Localisation is the adaptation itself.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. What breaks first
  3. Design and build practices
  4. Sources
  5. Continue from here

What breaks first

AssumptionReality
Text length is stableGerman and Finnish commonly run 30 percent longer than English. Short UI labels can double.
Text runs left to rightArabic, Hebrew, Persian and Urdu are right to left, and the whole layout mirrors.
Names have two partsName structure varies enormously. A single free text field is safer.
Dates are numericOrder varies by locale. 03/04 is ambiguous worldwide.
Addresses have a fixed shapeField order, presence and naming differ by country.
One space-separated word orderConcatenating translated fragments produces broken grammar. Use full sentences with placeholders.
Colour meanings are sharedRed and green carry different meanings in different markets.

Design and build practices

  • Design with the longest plausible translation, not the English string.
  • Use logical CSS properties, such as margin-inline-start, so layouts mirror automatically under RTL.
  • Never concatenate sentence fragments. Provide the full sentence with named placeholders.
  • Use the platform's formatting APIs, such as Intl in JavaScript, for dates, numbers, currency and plurals.
  • Support locale plural rules rather than a simple singular and plural pair.
  • Give translators context: where the string appears and what it means.
  • Test with pseudo-localisation, which expands strings and adds accents, before any real translation exists.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA Data TableA FormA Mobile AppAn Ecommerce ExperienceNavigation

Principles behind this

The reasoning this solution is an application of.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.