A bilingual site is two directions, not two dictionaries
Most trouble with Arabic and English websites starts with an assumption: build the English site, then translate it. Translation is the smaller part of the work. Arabic reads from right to left, so the whole page turns around. The logo moves, the menu reverses, arrows point the other way, and a layout that felt balanced in English can look empty or crowded in Arabic.
Teams that plan for this at the start pay little for it. Teams that discover it after the English site is finished pay for a second design and often a second build. The sections below follow the order in which the decisions should be made.
Decide where each language lives
Every page should exist at its own address in each language. That lets a visitor share a link in the language they are reading, and lets search engines list the Arabic page for Arabic searches.
| Option | Looks like | Fits when |
|---|---|---|
| A folder per language | example.com/ar/services | Most business sites. One domain, one set of tools, simple to maintain |
| A subdomain per language | ar.example.com/services | The languages are run by different teams or on different systems |
| A domain per country | example.sa and example.com | Separate legal entities, offers or prices by country |
| One address, language held in a cookie | example.com/services for both | Avoid. Search engines and shared links see only one language |
Whichever you choose, the language switch should take the reader to the same page in the other language, not back to the home page. Decide too whether Arabic pages carry Arabic words in their addresses or keep the English ones. Both work. Mixing the two on one site makes maintenance harder.
Design the layout to mirror
Mirroring is a rule with exceptions, and the exceptions are where sites look careless. Agree the list with your designer before the first page is drawn, and ask to see every key page in both directions at each review.
| Element | In Arabic | Reason |
|---|---|---|
| Columns, sidebars, alignment | Mirrored | Reading begins at the right edge |
| Menus, breadcrumbs, step indicators | Mirrored, with the order reversed | The first item sits where reading starts |
| Arrows, back and next buttons | Mirrored | Forward now means toward the left |
| Logos and photographs | Not mirrored | A flipped logo or face is simply wrong |
| Phone numbers, prices, dates in digits | Not mirrored | Digits are read left to right in Arabic text |
| Play, pause and timeline controls | Not mirrored | They show the direction of time, not of reading |
| Charts with a time axis | Decide per chart | Conventions differ, so choose and stay consistent |
Ask for layouts built with direction-aware spacing from the beginning. When a site is built that way, one setting turns the page around. When it is not, every component needs its own Arabic corrections, and new pages keep breaking.
Treat Arabic typography as its own design task
Arabic script behaves differently from Latin, and settings copied from the English design make it harder to read.
- Size and line height. Arabic letters carry marks above and below the line. Text usually needs to be set a little larger, with more space between lines, to read as comfortably as the English.
- No letter spacing. Arabic letters join. Spacing them apart, which is common for English headings, breaks the words.
- No capitals. A design that relies on uppercase labels for hierarchy needs another device in Arabic, such as weight or colour.
- A matched pair of typefaces. Choose a family that covers both scripts, or two families with similar weight and texture, so that mixed lines do not look patched together.
- Numerals. Decide between Western digits and Eastern Arabic digits for the Arabic pages, based on your readers, and apply the choice everywhere.
Plan who writes, reviews and updates the Arabic
A page translated sentence by sentence reads like a translation. Headlines lose their rhythm, calls to action sound stiff and technical terms end up in forms nobody searches for. Give the Arabic to a writer who knows the subject, and have a second native reader review it before launch.
- 01
Who writes and who approves the Arabic?
Why it mattersWithout a named owner, the Arabic pages fall behind the English ones within a few updates.
- 02
Which register will you use?
Why it mattersModern Standard Arabic is the usual choice for formal business writing. A dialect can suit a consumer brand in one country.
- 03
Which terms stay in English?
Why it mattersProduct names, technical standards and some industry terms are often left in Latin script. List them once.
- 04
What happens when a page exists in one language only?
Why it mattersDecide whether to hide it, show it with a notice or hold publication until both are ready.
- 05
Are forms and messages covered?
Why it mattersField labels, error messages, confirmation emails and legal pages are forgotten more often than any marketing page.
Forms need a little engineering care as well. Names may be typed in either script, email addresses and links stay left to right inside a right-to-left form, and site search should find a word however its hamza or final letter was typed.
A worked example
Adding Arabic to a contractor's website
This example is invented to show how the decisions fit together. A contracting company has an English website and wants an Arabic version before it bids for public work.
- StructureArabic pages go in an ar folder with the same page names as the English, so the switch can always find the matching page. Project case studies will be published in both languages or not at all.
- DesignThe designer redraws the six main templates in both directions. The project gallery keeps its photographs unflipped, while the timeline of project phases is reversed.
- TypeThe existing English typeface has no Arabic. A companion Arabic family of similar weight is chosen, set one size step larger with more line height.
- ContentA technical writer produces the Arabic from the English brief instead of from the English sentences. An engineer in the company reviews the terminology.
- SearchEach Arabic page receives its own title and description, and the two versions of every page are marked as alternates of each other.
The Arabic site launches with the same pages as the English one. The company names one person to approve Arabic updates, which is the decision that keeps the two versions level a year later.
Give each language its own search settings
Search engines treat the Arabic and English versions as separate pages, and each needs to be complete in itself.
- 01
Write titles and descriptions in each language
An Arabic page with an English title tells both readers and search engines that the page was not finished.
- 02
Mark the versions as alternates
Google documents an annotation called hreflang that links the language versions of a page to each other. Each version should point to the other and to itself.
- 03
Set the language and direction in the page
The page should declare Arabic and right to left in its markup, so browsers, screen readers and translation tools behave correctly.
- 04
Do not redirect by location
Google's guidance for multilingual sites advises against sending visitors to a language automatically. Offer a visible suggestion instead, and remember the choice.
- 05
Research Arabic searches separately
People do not search for the literal translation of your English keywords. Find the words Arabic speakers use for your services.
Arabic and English website checklist
Bilingual website planning checklist
0 of 10 checkedWhat to do next
Start with the content question, because it has the longest lead time: who will write the Arabic, and who will keep it current. Then put both languages into your brief from the first line. Our website project brief builder has a place for languages and for who maintains each one.
Our bilingual website development page explains how we approach two-direction design and build. Tell us about your site and we will say what we would check first.
Common questions
Can we add Arabic to an existing English website later?
Yes, though the cost depends on how the site was built. If its layouts use direction-aware spacing and its content system supports several languages, adding Arabic is mostly design review and content. If neither is true, many components need rework, and it can be more economical to combine the Arabic version with a planned redesign.
Should the Arabic and English pages have identical content?
They should cover the same subjects and offers, so that neither audience is given less. They do not need to match sentence for sentence. Examples, emphasis and calls to action often differ, because the readers differ. What should be avoided is an Arabic site with half the pages of the English one and no explanation.
Do we need a separate design for Arabic?
One design system should serve both, with rules for how it mirrors. Separate designs double the maintenance and drift apart. Within the shared system, Arabic needs its own typographic settings and a short list of exceptions for elements that must not flip, such as logos, photographs, digits and media controls.
Which language should the site open in?
Open in the language of the address the visitor requested. For the bare domain, pick the language of your main audience. If the browser is set to the other language, show a small suggestion to switch and remember the answer. Automatic redirection frustrates people who chose a language on purpose and can hide pages from search engines.
Does our content system need special support for Arabic?
It needs to store each page in each language, link the two versions, show right-to-left text correctly in the editing screen and let editors see which translations are missing or out of date. Most established systems can do this with the right setup. Ask for a demonstration with real Arabic text before you commit.