Building a Bilingual Arabic-English Website for MENA: Architecture, RTL, and Content Strategy
Most bilingual websites in Jordan and the Arab world are not genuinely bilingual — they are English websites with Arabic translations added after the fact, resulting in layouts that work well in LTR and break or feel awkward in RTL, content that is inconsistent between languages, and SEO that is optimised for one language version but not the other. A genuinely bilingual website for the MENA market starts with bilingual architecture as a design constraint, not a post-launch feature.
Language routing and URL structure
The URL structure for a bilingual MENA website should separate language versions at the URL level — both for user clarity and for search engine differentiation. The options: subdirectory (`domain.com/en/about/` and `domain.com/ar/about/`), subdomain (`en.domain.com/about/` and `ar.domain.com/about/`), or ccTLD (`domain.com` for English and `domain.jo` for Jordanian Arabic). For most MENA business websites, the subdirectory approach is recommended: it consolidates domain authority under a single domain, is the most straightforward to implement with common CMS platforms, and is the structure that Google's documentation recommends for multilingual sites without strong country-specific targeting requirements.
RTL layout: built-in vs retrofitted
RTL layout built into the design system from the beginning is fundamentally different from RTL applied as a CSS override to an existing LTR design. The difference shows: when RTL is built-in, layouts mirror correctly — navigation flows right-to-left, iconography with directional meaning is mirrored, margin and padding behave correctly. When RTL is retrofitted, you get a patchwork of overrides that works for most elements but breaks for edge cases that were not anticipated. The practical recommendation: design the Arabic version simultaneously with the English version, not after it. For components that contain mixed Arabic and English content (a product card with an Arabic title and an English brand name), design the mixed directionality explicitly rather than relying on browser bidirectional text handling.
Content management for bilingual teams
The content management system and workflow for a bilingual MENA website needs to accommodate the reality of how content is produced: typically in one language first, then translated. CMS architectures that support this: translation-linked content types (WordPress with WPML, Sanity with localisation fields, Contentful with locale variants) where English and Arabic content are linked but independently manageable; and translation workflow states (draft, in-translation, translated, published) that allow the English version to be live while the Arabic translation is in progress. The content management failure that produces the most user-facing problems in bilingual MENA sites: publishing incomplete Arabic translations — 70% translated pages that show English content falling through in Arabic layouts, breaking both the RTL layout and the user's trust.
Fonts and typography in bilingual designs
Bilingual typography requires selecting Arabic and English font pairs that are visually harmonious — similar x-heights, weight distributions, and design temperament. Well-established pairs for MENA digital products: Urbanist (EN) + Tajawal (AR) — clean, modern, excellent legibility at small sizes; Inter (EN) + Cairo (AR) — highly legible, neutral, widely used in SaaS and B2B contexts; Playfair Display (EN) + Amiri (AR) — editorial, premium feel, suitable for luxury brands. Font loading should be optimised per language version — the English version should not load Arabic font files, and vice versa, to avoid unnecessary page weight. As the Web Development Agency in Amman Jordan, our bilingual projects use a font loading strategy that detects the active language and loads only the font files required for that version.