Good bilingual Arabic English website design means building two complete versions of one site: each language has its own URLs linked with hreflang, the Arabic layout mirrors properly from right to left, the typography is chosen for Arabic rather than borrowed from English, and the content is written for how each audience actually searches. A language toggle on top of a translated page is not enough. Below is what to get right, and a checklist to test it before launch.
Separate URLs and hreflang: the foundation of a bilingual site
Search engines index URLs, not toggles. If both languages live on the same URL and the switch only changes text with JavaScript or a cookie, one language will rarely be indexed properly. Each language needs its own address.
| Structure | Example | Verdict |
|---|---|---|
| Subfolders | example.com/ (Arabic) and example.com/en/ | Usually the best choice: one domain, shared authority, simple hosting |
| Subdomains | ar.example.com and en.example.com | Workable, but more setup and monitoring |
| Separate domains | example.sa and example.com | Only for genuinely separate businesses or markets |
| Same URL with a toggle | example.com?lang=en or a cookie | Avoid: search engines may see only one language |
This site, pixelsaa.com, uses the subfolder model: Arabic pages sit at the root and English pages under /en. Whichever you choose, apply the same rules everywhere:
- Each page declares its language and direction in the HTML (
lang="ar" dir="rtl"orlang="en" dir="ltr"). - Each page lists its alternate with hreflang, including itself, and the alternate points back. Add an
x-defaultfor the version you want shown when no language matches. - The language switcher links to the equivalent page, not to the other language's homepage.
- Each version has its own title tag, meta description and canonical pointing to itself.
RTL website development: mirroring the layout correctly
Right-to-left is more than right-aligned text. The whole reading order flips: navigation starts on the right, the logo usually moves to the right, breadcrumbs run right to left, and "next" arrows point left.
What to mirror and what to leave alone
Mirror: navigation order, sidebars, form label positions, breadcrumbs, pagination, sliders and progress indicators, and directional icons such as arrows and "back" chevrons.
Do not mirror: logos, photos, media play buttons, phone numbers, product codes, and embedded English text or code. A clock icon or a checkmark has no direction, so it stays as it is.
Build it with logical CSS
Developers should use logical properties (margin-inline-start instead of margin-left, text-align: start instead of left) so one stylesheet serves both directions. Hard-coded left and right values are the main reason Arabic versions break after every redesign.
Mixed text
Arabic sentences regularly contain English brand names, model numbers and prices. Test strings such as "iPhone 16 Pro متوفر الآن بسعر 4,999 ريال" to make sure punctuation and numbers do not jump to the wrong end of the line.
Arabic typography and fonts
Arabic website design fails most visibly in typography. Pick a typeface designed for Arabic, ideally from a family with a matching Latin design so both versions feel like one brand.
- Arabic usually needs a slightly larger size and more line height than Latin to stay readable, especially on phones.
- Never add letter-spacing to Arabic text; it breaks the joins between letters.
- Avoid styles borrowed from English such as all-caps-like effects or very thin weights that fall apart at small sizes.
- Load only the weights and character subsets you use. Heavy font files slow the first render, and late-loading fonts can shift the layout, which affects Core Web Vitals (LCP and CLS).
Numbers, dates, currency and forms
Digits and dates
Decide whether the Arabic version shows Western digits (123) or Arabic-Indic digits (١٢٣), then apply the decision consistently. Forms should accept both and normalise them, because users type whichever their keyboard gives them. For dates, consider whether your audience needs Hijri dates alongside Gregorian ones, for example on contracts or appointment confirmations for Saudi customers.
Currency
Write currency the way each audience expects: "SAR 1,250" in English and "1,250 ريال" in Arabic. If you sell across the GCC, remember that the Kuwaiti dinar, Bahraini dinar and Omani rial use three decimal places, so price fields and rounding must support them.
Forms and validation
- Phone fields should handle +966, +971, +965 and other GCC codes, with or without the leading zero.
- Error messages must exist in both languages and appear on the correct side of the field.
- Name fields should accept Arabic characters and long multi-part names.
- Email and URL fields stay left-to-right even inside an Arabic form.
Translation vs transcreation: keywords differ per language
A literal translation of your English page rarely ranks or converts in Arabic. Arabic searchers use different phrases, and buyers in Riyadh, Jeddah and Kuwait expect a different tone from an expat procurement manager in Dubai. Transcreation means writing each version for its reader: same facts and offer, different headings, examples and calls to action.
Do keyword research separately for each language. An Arabic buyer may search "تصميم موقع شركة", while an English-speaking buyer in the UAE types "web design company Dubai". Each phrase deserves its own title tag and headings. Our guides to SEO services in Saudi Arabia and to preparing a company website for AI search and SEO cover the research side.
For the UAE specifically, many B2B buyers in Dubai read in English first, while government-facing and Saudi audiences often expect Arabic first. Decide which language is the default for each market, and make sure the other is just as complete. If Dubai is your main market, our article on choosing a web design company in Dubai adds local considerations.
CMS workflow for two languages
A bilingual site stays bilingual only if publishing is designed for it.
- Every content item has fields for both languages: title, body, excerpt, meta title, meta description and image alt text.
- Each language has its own publish status, so an English page never goes live with a half-written Arabic twin.
- Images with text inside them need two versions.
- One named person approves Arabic copy and one approves English copy before publishing.
Our web development service builds this structure into the admin panel from the start, so your team is not copying text between two separate sites.
An Arabic-first example: Waraqa
Waraqa, the PDF editor we built, was designed Arabic-first, with Arabic and English interfaces running on the web, Windows and Android from one codebase. Designing the Arabic, right-to-left experience first and then adapting it to English is far easier than retrofitting Arabic into an interface that assumed left-to-right everywhere.
Bilingual website testing checklist
| Check | How to test | Common failure |
|---|---|---|
| hreflang and canonical | View source on 5 sample pages in each language | Missing return links, canonical pointing to the other language |
| Language switcher | Switch on deep pages, not just the home page | Switch always lands on the homepage |
| RTL layout | Review every template in Arabic on a phone | Arrows, sliders or icons pointing the wrong way |
| Mixed text | Pages with brand names, prices and model numbers | Punctuation and numbers jump to the wrong side |
| Fonts | Throttled mobile connection | Text invisible or layout shifting while fonts load |
| Forms | Submit with Arabic-Indic digits and GCC phone codes | Valid input rejected, errors in one language only |
| Metadata | Search result preview for each language | English titles on Arabic pages |
| Emails and PDFs | Trigger every automated message in both languages | Arabic text reversed or broken in emails and PDFs |
Frequently asked questions
Should a bilingual website use subfolders or separate domains?
For most businesses, subfolders work best, for example Arabic at the root and English under /en. They keep authority on one domain and make hosting and monitoring simpler. Separate domains suit genuinely separate businesses or markets. In every case, link the two versions with hreflang and give each page its own URL, title and canonical.
Is machine translation enough for the Arabic version of my website?
Machine translation is useful as a first draft, but not enough for a company website. It does not choose the phrases your audience searches for, and awkward phrasing undermines trust. Have a writer fluent in business Arabic write or edit the Arabic version, and do Arabic keyword research separately from your English research.
Does the content have to be identical in both languages?
Facts, services, prices and policies should match, but headings, phrasing and examples can, and often should, differ to suit each reader. What matters is that each page is complete in its own language, linked to its counterpart with hreflang, and never published in one language while the other is half finished.
Does a bilingual website cost much more to build?
It depends on scope. The main cost drivers are writing content in two languages, designing templates for both directions, testing right-to-left layouts, and building an admin panel with fields for each language. The extra cost is much lower when both languages are planned from the start rather than added later to a site that was not designed for them.
Your next step
Planning an Arabic and English website for a business in Saudi Arabia, the UAE or elsewhere in the Gulf? Send us your page list and target markets, and we will propose the URL and language structure and the delivery phases clearly before you commit to anything.
