The cheapest possible test
Open the Arabic version and read it without comparing. If it feels like a translation of something, it is — and the reader who only reads Arabic will feel that on every page without ever filing a complaint about it.
Building an Arabic/English corporate website without treating Arabic as an afterthought
01
Context
A corporate site serving an audience that reads both Arabic and English, where the Arabic version is not a courtesy — a meaningful share of the people making a decision about the company will read it in Arabic first.
02
Problem
The common approach is to build in English, then add Arabic near the end. The result is a version that reads as a translation: mirrored layouts that were never designed mirrored, typography tuned for Latin, and navigation that feels slightly wrong in a way readers notice and cannot name.
03
Constraints
- Direction is structural
- RTL changes reading order, field order, icon direction and navigation position. It is not a stylesheet flip.
- Typography differs
- Arabic type has different vertical rhythm and different comfortable line-height. Latin settings applied to Arabic look cramped.
- Hierarchy has to hold twice
- Content structure that reads clearly in one direction can flatten in the other.
- Responsive in both directions
- Every breakpoint has to be checked twice, which doubles the review surface.
01
02
03
04
04
Approach
I designed both directions in parallel rather than sequentially, reviewing every layout in Arabic and English as I built it. That surfaces the direction-dependent assumptions while they are still cheap to change.
05
Architecture
Parallel design reviewBoth directions considered at design time, not after implementation.
Directional layout systemStructural RTL rather than mirrored CSS.
Language-appropriate typographyLine-height and spacing tuned per script rather than shared.
06
Solution
A bilingual site where Arabic and English are both primary: structural RTL support, typography tuned per script, navigation and hierarchy that hold in both directions, and responsive behaviour verified in each.
07
Lessons
- 01Arabic is a design constraint, not a content task. Bringing it in at the end guarantees a second-class result and an expensive correction.
- 02Line-height is the giveaway. Latin spacing applied to Arabic is the fastest way to signal that the Arabic version was an afterthought.
- 03Reviewing every screen twice is the cost. It is much lower than the cost of discovering the assumptions after implementation.
Stack
What it runs on