By the end of this lesson you can
- Design layouts that cope with translation and long content.
- Handle right-to-left languages, dates, numbers and names.
- Test designs with realistic international content.
The idea
Internationalisation (i18n) is designing so a product can be adapted to different languages and regions. Localisation (l10n) is the actual adaptation.
Text length
Translations are often longer than English: German and Finnish can be 30% or more longer, and short labels can double. Some languages are shorter but taller, with larger characters. Design flexible components that wrap, avoid fixed widths for text and avoid putting text in images.
Direction
Arabic, Hebrew and Persian read right to left (RTL). Layouts mirror: navigation, back arrows and progress move to the other side. Some icons should not mirror, such as a play button or a clock.
Formats
Dates, times, numbers, currencies, addresses, phone numbers and names vary by region. Use locale-aware formatting and do not assume a first name and surname structure.
Long content in general
Even without translation, real content is messy: very long names, product titles and email addresses. Decide truncation rules and always make the full text available somewhere.
Why it matters in real projects
Products that break when translated are expensive to fix later and exclude large audiences. Designing for long and international content from the start is cheaper and produces sturdier components that also handle long names and user-generated content in your own language.
A realistic example
An e-commerce site launches in Germany. The "Add to basket" button becomes "In den Warenkorb legen" and overflows the fixed-width button. The address form requires a "State" field that does not apply, and dates appear in month-first order that German shoppers misread.
The team rebuilds buttons to hug content and wrap, uses locale-aware date and price formatting, and creates country-specific address forms. Before the next launch in the UAE, they test RTL layouts and Arabic text in the prototypes.
Step by step
Stress-test text
Replace labels with text 40% longer and see what breaks.
Use pseudo-localisation
Add accents and padding to text, such as [Àççôûñţ šéţţîñĝš ___], to find hard-coded strings and overflow.
Mirror for RTL
Create an RTL version of a key screen and check icons.
Check formats
List dates, numbers, money, addresses and names on the screen and how they vary.
Set truncation rules
Decide where text truncates and how full text is revealed.
Document
Add i18n notes to components.
Common mistakes
Mistake Fixed-width buttons and labels.
Instead Use hug and wrap behaviour.
Mistake Text inside images.
Instead Keep text as live text.
Mistake Assuming name and address formats.
Instead Use flexible, locale-aware fields.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
International stress test
Stress-test one screen for international use.
Steps
- Expand all text by 40% and fix overflow.
- Create an RTL version.
- Swap in international names, addresses and prices.
- Write five i18n notes for developers.
Deliverable
Before and after frames, an RTL frame and i18n notes.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Design for longer text and different scripts.
- Mirror layouts for RTL, but not every icon.
- Use locale-aware formats and flexible fields.
- Test with realistic international content early.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.