Bilingual Website Design: Planning an Arabic and English Site That Works in Both Languages

In this guide

1. Why bilingual matters in Saudi Arabia
2. Translate or localise?
3. One URL per language
4. hreflang and the language switcher
5. Designing for RTL and LTR
6. Typography for Arabic and English
7. Forms, numbers and dates
8. Keyword research in two languages
9. Keeping both versions in sync
10. Pre-launch checklist
11. How Webnaa approaches bilingual sites
12. FAQ
13. Summary

Why bilingual website design matters in Saudi Arabia

Arabic is the language most of your local customers think and search in. English is the working language of many companies, international partners and residents. A site in only one of them quietly turns part of your audience away: the Arabic speaker who feels the business is not for them, or the procurement manager who cannot forward your page to a colleague.

That does not mean every business needs two languages on day one. If nearly all your customers are Arabic speakers, a strong Arabic site may be the better first investment. But if you sell to companies, work with expats or want to look established to international clients, planning for both early is far cheaper than retrofitting English later.

Translate or localise?

Translation converts sentences. Localisation rewrites the page for a reader with different expectations. The second is what makes bilingual website design feel professional rather than mechanical:

A practical rule: brief one writer per language on the same goal, rather than asking one person to translate a finished page. Our guide to website copy that persuades applies to both versions.

Give each language its own URL

Search engines index URLs, not cookies or browser settings. Google's guidance on multilingual sites is explicit: use different URLs for each language version rather than switching language on the same address. It also notes that Google determines the language from the visible content, not from code-level signals such as the lang attribute, so each version must genuinely be in its language.

There are three common structures:

Source: Google Search Central, managing multilingual and multi-regional sites.

hreflang and the language switcher

hreflang annotations tell Google that two URLs are the same page in different languages, so it can show the right one to each searcher. Three details matter:

• Reciprocal links: the Arabic page must point to the English page and the English page back to the Arabic one. One-way annotations are ignored.
• Only true equivalents: connect pages that answer the same question. Two different articles on related topics are not translations of each other.
• x-default: optionally point it to the version you want to show when no language matches, often your main language.

The visible language switcher should follow the same logic. It should take the visitor to the equivalent page, not back to the home page, and label each language in its own script: العربية and English. Avoid flags; a flag represents a country, not a language.

Designing for right-to-left and left-to-right

Arabic reads right-to-left, so in bilingual website design the whole layout mirrors: navigation, alignment, the order of columns, the position of icons next to text. This is easiest when the design is built with logical properties (start and end) rather than fixed left and right. A few things should mirror and a few should not:

Test long words, too. English and Arabic versions of the same message rarely have the same length, and a button or heading that fits in one may wrap awkwardly in the other.

Typography for Arabic and English

• Choose a pair, not two random fonts. Look for an Arabic and a Latin typeface with similar weight and visual size, or a family designed with both scripts.
• Give Arabic more line height. Arabic letterforms have taller ascenders and deeper descenders; tight line spacing makes them hard to read.
• Don't letter-space or italicise Arabic. Spacing breaks the connections between letters, and Arabic has no true italic.
• Check font sizes on mobile. Arabic often needs a slightly larger size than Latin text to feel equally readable.
• Load fonts efficiently. Subset and preload the main font so text appears quickly, especially on mobile data.

Readable type on a small screen is half of a good mobile experience; see design for mobile first for the other half.

Forms, numbers and dates

Forms are where bilingual sites most often break. Before launch, check that:

• Fields accept Arabic input and right-to-left typing without flipping punctuation in odd places.
• Validation and error messages appear in the page's language, not in English everywhere.
• Phone fields accept local formats such as 05XXXXXXXX and +966.
• Numbers are consistent: decide whether the Arabic version uses Western digits (123) or Arabic-Indic digits (١٢٣), and stick to it.
• Dates are unambiguous. If you show Hijri dates, show the Gregorian date too where it matters, such as deadlines and appointments.
• Confirmation messages and notification emails exist in both languages.

Keyword research in two languages

People don't search the same way in Arabic and English, so a translated keyword list is not enough. An Arabic searcher may type "تصميم مواقع" with a city name, while an English searcher in the same city types "web design company Riyadh". Research each language separately, and give each page its own title, meta description and headings written for that language's searcher.

If you are still building basic visibility, start with how to get found on Google, then extend the same steps to both languages.

Keeping both versions in sync

The hardest part of a bilingual website comes after launch: keeping both versions current. Google also warns that translating only navigation and boilerplate while the main content stays in one language creates a poor experience. A few habits help:

• Publish important updates such as prices, services and contact details in both languages on the same day.
• Decide in advance which content is bilingual (core pages) and which can live in one language (some articles or news).
• Assign an owner for each language so nothing waits on a single busy person.
• Review both versions after every redesign or plugin update; layout bugs often appear in only one direction.

Bilingual website design checklist before launch

1. Every page has its own URL in each language.
2. hreflang is reciprocal and links only true equivalents.
3. The language switcher opens the matching page in the other language.
4. The lang and dir attributes are correct on every page.
5. Navigation, icons and layouts mirror correctly in Arabic.
6. Fonts load quickly and stay readable on mobile in both scripts.
7. Forms, validation messages and confirmation emails work in both languages.
8. Titles, meta descriptions and headings are written for each language, not machine-translated.
9. Both versions are included in the XML sitemap and tested in Search Console.

How Webnaa approaches bilingual websites

Webnaa designs websites in Arabic, in English, or in both. Every website comes on one subscription that includes hosting and technical support, with no setup fee, starting from SAR 39 a month. A site on a domain in your name, in one language or in both Arabic and English, is priced by type and number of pages in our price calculator; a five-page bilingual WordPress site, for example, is SAR 324 a month, paid in advance every 6 months or yearly with 10% off. Our own site is built the way this guide describes: Arabic at the root, English under /en/, and each page linked to its translation.

FAQ

Summary

Good bilingual website design starts with a decision to write for two audiences, not one audience and a translation. Give each language its own URL, connect true equivalents with hreflang, design for right-to-left and left-to-right from the beginning, pair your typefaces with care, and test forms and formats in both languages. Do that, and both versions of your site will feel like they were written for the person reading them.