Arabic and English websites: a guide for UAE businesses

An Arabic and English bilingual website in the UAE has to serve two readers equally well. The common shortcut is to finish the English site, reverse the layout and paste in a translation. The result is easy to spot. Arrows point the wrong way, headings look cramped and the copy reads like a translation.

Arabic reads from right to left, so the layout does mirror. That is where the work begins. Some things must not flip. Type chosen for English rarely suits Arabic. Copy needs rewriting, and search engines need to be told that the two versions belong together.

Direction is set by one attribute in the page code, written dir="rtl". The W3C, the body that maintains web standards, advises setting it in the page markup and not in the styling. The browser then right-aligns text, runs table columns from right to left and starts form fields on the right.

A field where a visitor may type in either language, such as a name or a search box, can be set to take its direction from the first letter typed.

What flips

• Text alignment and the order of columns.
• The position of the logo, menu and sidebar.
• Back and next arrows, and any control that moves through a sequence.
• Progress bars, sliders and carousels.
• Icons that show text or forward movement.

What stays as it is

• The logo artwork itself, and the logos of partners and payment methods.
• Photographs and illustrations.
• The digits inside a number. A phone number or a price keeps the same order in both languages.
• Universal marks such as a tick.
• Icons of real objects, such as a clock.
• Latin brand names and product codes inside Arabic text. These need marking up in the code so that punctuation and numbers beside them stay in place.

Arabic letters join, and each letter changes shape according to its position in the word. That has practical consequences for design.

• No letter spacing. Widening the gaps between letters is a common styling choice in English headings. In Arabic it pulls joined letters apart.
• No capitals. Arabic has no upper case, so a heading set in capitals has no equivalent. Arabic can also look small beside capitalised English at the same size, and often needs a slightly larger setting.
• More room between lines. Arabic letters rise and fall further than Latin ones. Lines need more height to stay readable.
• A typeface chosen on purpose. Pick an Arabic typeface that pairs with your English one, and license it. If you leave this out, each device substitutes its own.
• One set of digits. Arabic text can use Western digits (0 to 9) or Eastern Arabic digits. Choose one and use it everywhere.

A translation carries the words across. A rewrite carries the meaning. Headlines, button labels and idioms rarely survive word-for-word translation, and a reader notices within a sentence.

• Brief the Arabic writer on the purpose of each page, not only its text.
• Research Arabic search phrases separately. They are not always the translated English ones.
• Write Arabic page titles and descriptions from scratch.
• Keep product and technology names in Latin script where your buyers know them that way.
• Have a native Arabic reader approve every page before launch.

Remember the text that sits outside the pages: form messages, confirmation emails, cookie notices, downloads and the page shown when an address is not found. These are the places where English most often slips into an Arabic site.

Keep each page in one language. Google works out the language of a page from its visible text, and advises against placing translations side by side.

Give each language its own address. Google recommends a separate URL for each language version, in place of one address that changes language according to cookies or browser settings. A folder for each language, such as /en/ and /ar/, is a common pattern. Google also accepts subdomains and country domains, and advises against marking language with a parameter in the URL.

Hreflang is a short line of code that tells Google which pages are versions of each other. In plain terms it says: this page is in English, and its Arabic twin lives at this address. Three rules matter. Each version lists itself and every other version. The references run both ways. Each address is written in full, starting with https.

Do not redirect visitors by location or browser language. Google advises against it, because it can stop both people and search engines from reaching every version. Google's crawler usually visits from the United States and states no language preference. Location is also a poor guide to language: an Arabic speaker in London and an English speaker in Dubai would both be sent the wrong way.

A second language does not double the cost, because structure, code and the content system are shared. It does add real work. Ron Studios, a Dubai agency, publishes a figure of 20 to 35 per cent on the project budget for a bilingual site. Treat that as one agency's estimate, not a rule.

The cheapest moment to add Arabic is the design stage, when each layout can be drawn to work in both directions. These are the lines to look for in a quote.

• Arabic design pass for each page layout.
• Arabic copywriting, or translation and review.
• Licence for an Arabic typeface.
• Content system set up for two languages.
• Testing of both versions on real devices.
• After launch, every new page and article written twice.

Ask for the Arabic work to be itemised, so you can see what is included. Our Arabic and bilingual websites page describes how we approach it, and starting prices are on the pricing page.

• Every page exists in both languages, each at its own address.
• The language switch leads to the matching page.
• Hreflang is present on every page, runs both ways and uses full addresses.
• No redirect is triggered by location or browser language.
• Arabic pages declare both their language and their direction. One does not imply the other.
• Forms accept Arabic input, and error messages and confirmation emails are in Arabic.
• Phone numbers, prices and dates display in the correct order.
• Logos and photographs are not mirrored. Arrows are.
• Arabic page titles and descriptions are written, not machine translated.
• A native Arabic reader has read every page on a phone.

Search set-up for both languages is part of our SEO and performance work.