Arabic website design with a true right-to-left layout, not a flipped English template

What is Arabic website design, and when does a UAE business need it?

Arabic website design is the work of building web pages that read naturally right to left for Arabic speakers: layout, typography, navigation and forms all follow Arabic reading order, and the words themselves are written by someone fluent in the language. It is not the same as pasting translated text into an English template.

In the UAE most business websites start in English, because English is the working language of much of the private sector. An Arabic version becomes necessary when a meaningful share of your buyers, tenants, patients or partners prefer to read in Arabic, when you sell to government entities or Emirati households, when you expand to Saudi Arabia or elsewhere in the Gulf, or when your competitors already rank for Arabic searches and you do not.

There are three common shapes. A bilingual site carries every page in both languages with a switcher. An Arabic-first site leads with Arabic and offers English as the second version, which suits some government-facing or community businesses. A partial Arabic site translates only the pages that convert, such as services, pricing and contact, and leaves the blog in English. The partial route is a sensible first step when budget or translation capacity is limited, as long as the Arabic pages that do exist are complete and well built.

• Choose bilingual when both audiences matter equally and you can keep both versions updated.
• Choose Arabic-first when most of your buyers read Arabic by default.
• Choose partial Arabic when you want Arabic search visibility on money pages first and can expand later.

How does a right-to-left layout differ from a flipped English page?

A proper right-to-left layout mirrors the reading flow, not the whole picture. The logo, main navigation and primary content start on the right, the eye moves leftwards, and anything that implies sequence or direction reverses. Things that carry meaning independent of direction stay as they are.

In Arabic website design, the cleanest way to achieve this is to set dir="rtl" and lang="ar" on the Arabic document itself. The W3C internationalisation guidance on structural markup and right-to-left text is explicit that base direction belongs in the markup, not in CSS, because direction affects meaning. Once the attribute is in place, browsers flip table column order, form alignment and text flow automatically, and stylesheets written with logical properties (margin-inline-start rather than margin-left, text-align: start rather than left) follow along without a second stylesheet.

Where teams go wrong is with the parts the browser cannot guess: arrow icons, carousels, progress steps, image crops with a subject looking “forward”, and any JavaScript that calculates positions from the left edge. Those need deliberate decisions, which is why we list each one in the mirroring checklist further down this page and sign it off with you on the staging site.

Why do phone numbers and brand names jumble on Arabic pages?

They jumble because the browser has to decide the order of left-to-right fragments sitting inside a right-to-left sentence, and without markup it sometimes guesses wrong. A phone number followed by a full stop, a product code with hyphens, or an English brand name at the end of an Arabic line are the usual victims.

The W3C article on inline bidirectional markup recommends tightly wrapping each opposite-direction phrase in an element with its own dir attribute, and using dir="auto" or the bdi element wherever text arrives at run time and its direction is unknown. In practice that means our templates wrap phone numbers, emails, SKUs, prices and brand names in the right elements automatically, so an editor typing into the CMS does not need to know any of this.

User input needs the same care. A search box, enquiry form or review field on an Arabic page might receive English, Arabic or a mix. Setting dir="auto" on those fields lets the browser pick the direction from the first strong character, which keeps an English email address from rendering backwards while an Arabic name still aligns to the right. We also test copy-and-paste from WhatsApp into forms, because customers in the UAE do that constantly and it brings invisible direction characters with it.

Which Arabic fonts work on websites, and how should they be sized?

Use an Arabic typeface that was designed for screens, pair it with your Latin brand font by visual weight rather than by point size, and give Arabic body text more line height than English. That combination does more for perceived quality in Arabic website design than any animation.

Arabic letters join and change shape by position, and many glyphs have tall ascenders and deep descenders with dots above and below. Text that looks comfortable in English at a given size can feel cramped in Arabic, so we usually set Arabic body copy slightly larger and with more generous leading, then check it on a small Android phone. The W3C Arabic and Persian layout requirements note also warns that pulling joined letters apart or pushing them together produces poor results, so letter-spacing, which designers often add to English headings, must be switched off on Arabic text.

Style matters too. Naskh-style faces read well in long paragraphs; Kufi-style faces suit headings, logos and short labels. Many brands use one of each. Whatever you choose, load only the weights you use and subset the font files where the licence allows, because Arabic fonts are larger than Latin ones and slow first loads on mobile data.

• Match the Arabic and Latin fonts by x-height and stroke weight, not by the same pixel size.
• Turn off letter-spacing and uppercase transforms on Arabic elements.
• Decide early between Western digits and Arabic-Indic digits, and apply the choice everywhere.
• Check the font licence covers web use and self-hosting.

Who supplies the Arabic text for an Arabic website design project?

Your translator or an Arabic-speaking member of your team supplies the Arabic text; we do not. The three of us work in English and Hindi, and we will not pretend otherwise. What we do is make the translator's job easy and make sure their words display correctly.

For most UAE businesses the best arrangement is a professional translator who is briefed on your brand voice, works from a glossary you approve, and reviews their own text on the staging site before launch. Headlines and calls to action often need transcreation, meaning the idea is rewritten for an Arabic reader rather than translated word by word. Legal pages such as terms and privacy notices are a different job again and are best translated by someone who handles legal text, with your lawyer's sign-off.

On our side we prepare the source: all English strings exported in one file per template, including button labels, form errors, email notifications and image alt text that people forget until the week before launch. When the Arabic comes back we import it, flag anything that overflows its container, and send a list of screenshots so the translator can shorten or rephrase in context.

If you are still choosing a translator, ask for a sample of web copy they have written, not only documents. Web copy has tight space limits and needs to scan quickly on a phone.

A translation workflow for Arabic website design that does not stall the launch

The translation workflow is where bilingual projects usually slip, so we plan it as a separate track with its own dates. The rule of thumb: freeze the English first, translate once, review in context, then launch both languages together.

Translating a draft that is still changing means paying twice and chasing mismatches. So in week one we agree the English page list and word counts, in week two the English copy is frozen for the pages that will launch, and the export goes to the translator the same day. While they work, we build and test the mirrored templates with placeholder Arabic so layout problems surface early.

• Agree the page list and which pages launch in Arabic on day one.
• Freeze English copy for those pages before sending anything for translation.
• Share a glossary: brand name spelling in Arabic, product names kept in English, preferred terms.
• Export every string, including form errors, emails, alt text and meta descriptions.
• Import the Arabic onto staging and send the translator screenshots of every template.
• Collect corrections in one round, apply them, and get written approval of the Arabic.

After launch, new English content follows the same path in miniature. The CMS shows which Arabic pages are out of date so nothing drifts silently, a feature we set up on every bilingual build rather than leaving to memory.

Language switcher, URLs and hreflang for Arabic pages

Give every Arabic page its own URL, link each pair with hreflang, and make the switcher land on the equivalent page rather than the home page. Those three decisions decide whether search engines and people can find your Arabic content.

Most UAE sites use subfolders, such as /en/ and /ar/, on one domain, because authority is shared and there is one hosting account to manage. A separate domain for Arabic is possible, and the UAE's domain administrator aeDA, part of TDRA, offers Arabic-script .امارات domains through accredited registrars, which some brands register for marketing even if the site itself lives on .ae or .com.

Google's documentation on localized versions of pages states that if two pages do not both point to each other, the hreflang tags are ignored, and that language codes follow ISO 639-1 with optional ISO 3166-1 region codes. So an English page tagged en-AE must be listed on its Arabic partner tagged ar-AE and vice versa, plus an x-default. The same document notes Google detects page language algorithmically rather than from the lang attribute, which is one more reason to publish real Arabic text rather than a thin translated shell.

• Label the switcher “العربية” and “English” in their own languages; skip flags, since a language is not a country.
• Remember the visitor's choice so the next visit opens in the same language.
• Keep slugs readable: transliterated or English slugs are easier to share; Arabic slugs work but encode into long strings when copied.

Forms, emails and documents in two directions

Every place a customer types or receives text needs an Arabic version, and good Arabic website design plans for all of them: enquiry forms, validation messages, confirmation emails, WhatsApp click-to-chat messages and downloadable PDFs. These are the parts most often forgotten in Arabic website design, and they are the parts customers notice.

Forms need right-aligned labels, placeholder text in Arabic, validation messages translated by your translator, and input fields that accept Arabic characters in names and addresses. Phone fields should accept both digit systems and normalise them before they reach your CRM, otherwise a lead typed with Arabic-Indic digits may fail to match an existing contact.

Automatic emails are templates like any other page. We build them with direction set per language and test them in the mail apps your customers actually use, because some mail clients strip direction attributes and need inline styles. If your site sends quotations or brochures as PDFs, those need an Arabic layout of their own; a PDF generated from an English template with Arabic pasted in will join letters incorrectly unless the generator supports Arabic shaping, which we check before choosing a library.

Which platform suits an Arabic website design project?

Any modern platform can publish Arabic, so platform choice in Arabic website design is really about people; the difference is how much work the right-to-left side takes and how comfortable your editors are with it. Choose by who will edit the site after launch.

How should Arabic pages be tested on mobile?

Test Arabic website design on real phones in both languages, with an Arabic keyboard, on the browsers your visitors use. Emulators miss font rendering differences, and desktop previews miss the swipe gestures that feel backwards in the wrong direction.

Our test pass for every bilingual build covers iPhone Safari, Android Chrome and a Samsung device, plus desktop browsers. On each device we open every template in Arabic, swipe carousels and galleries to confirm they move in the expected direction, open the menu drawer to check it slides from the correct side, type into forms with an Arabic keyboard, paste mixed text, switch language mid-journey, and complete a form or checkout. Screenshots of each template in both languages go into a shared folder so you and your translator can review without setting up devices.

Performance is part of testing. Arabic font files add weight, so we measure Core Web Vitals on the Arabic templates separately rather than assuming the English numbers apply. A heavy Arabic web font that blocks rendering can push largest contentful paint up on mid-range phones, which is fixable with preloading, font-display settings and subsetting.

SEO and AI-search visibility for Arabic website design

Arabic pages rank on their own merits, so they need their own keyword research, titles, descriptions and headings written in natural Arabic. A translated English keyword list often misses how people in the Gulf actually phrase searches.

We ask your translator or an Arabic-speaking marketer to research Arabic queries for your main services, then map one query per page, as we do in English. Titles and meta descriptions are translated as part of the string export, structured data is output in the page language, and Search Console is set up so you can see Arabic queries and impressions separately from English ones.

AI assistants and AI Overviews quote pages that answer questions directly. The same principles apply in Arabic: a short direct answer under each question heading, clear definitions, and facts with named sources. Nobody can guarantee rankings or citations in either language, but a well-structured Arabic version competes in a space where many UAE businesses still publish thin or machine-translated pages. For deeper work on bilingual crawl and hreflang issues on large sites, see technical SEO services in Dubai.

How much does Arabic website design cost?

A bilingual brochure site with us starts from US$150, a larger SEO site from US$300, and a bilingual store from US$750. The Arabic side adds engineering and testing time, not a second build, because the templates are written once with direction-aware CSS.

Quotes for Arabic website design vary widely across the market, and the reasons are mostly visible if the quote is itemised. The count of unique templates matters more than the count of pages: forty service pages sharing one template cost far less to mirror than eight pages that each have a bespoke layout. Custom interactive parts, such as maps, calculators or booking widgets, each need their own RTL work. Legacy sites being retrofitted with Arabic cost more than new builds, because hard-coded left and right values have to be found and replaced.

Translation is a separate cost paid to your translator, usually by word count, and sits outside our quote. So do Arabic font licences if you choose a commercial typeface rather than an open-licensed one. For a full budget including hosting and upkeep, read what a website costs in Dubai.

Red flags in an Arabic website design proposal

The biggest red flag is a proposal that promises Arabic “with one click”. Automatic translation and a direction toggle produce pages that look Arabic from a distance and read badly up close, which damages trust with exactly the audience you are trying to reach.

• No mention of who writes or approves the Arabic text.
• Arabic pages served from the same URL as English, switched by a cookie or query string.
• A plan to flip the layout with a CSS transform rather than the dir attribute.
• Images with English text baked in and no plan for Arabic versions.
• No mobile testing in Arabic listed in the scope.
• Letter-spacing and uppercase styles applied site-wide, including Arabic headings.
• The builder's own account holding the domain, hosting or font licences.

Ask any provider, including us, to show you an Arabic page they built on a phone, then type into its form with an Arabic keyboard and paste a phone number. It takes two minutes and reveals most shortcuts.

Working with a remote team in India on an Arabic website from the UAE

India is 1.5 hours ahead of the UAE, so an Arabic website design project run from India shares almost the whole working day: a 10 am call in Dubai is 11:30 am in India, and you can reach us on WhatsApp through the afternoon without anyone working late.

Calls happen on Google Meet or Zoom, and screen sharing is where most right-to-left decisions get made, because it is faster to look at a mirrored carousel together than to describe it. Between calls, WhatsApp carries quick questions and screenshots, and a shared document tracks decisions so your translator sees the same list we do.

Quotes and invoices are in USD and come from India; you pay by Wise or bank wire, and nothing is billed before you approve the written quote. Your contract terms, including confidentiality, are set out in the quote and our terms. The domain, hosting, CMS and any font licences are registered to your business from the start, and we work through user access you grant.

Worked example: a bilingual site for a hypothetical Sharjah trading business

To see how Arabic website design plays out in practice, say a family-run building materials trader in Sharjah wants to reach contractors who prefer Arabic, while keeping English for overseas suppliers. This scenario is illustrative, not a client story.

The owner lists twelve pages: home, about, six product categories, projects, certificates, careers and contact. We would suggest launching all twelve in both languages, since the product categories are where contractors search. The six category pages share one template, so the RTL work is concentrated in five templates rather than twelve pages. The owner's Arabic-speaking sales manager drafts the Arabic, and a freelance translator polishes it against a glossary that keeps brand names and product codes in English.

Week one sets the URL plan (/en/ and /ar/), the font pair and the copy freeze. Week two delivers templates on staging and the string export. Week three imports the Arabic, fixes overflows the translator flags, and tests on phones. Week four is launch, Search Console setup for both languages and a short handover video showing staff how to edit a product in both versions. The build would fall in our static range from US$150; the translator is paid separately.

Arabic website design launch checklist

Run this Arabic website design checklist on the staging site before the Arabic version goes live. Every item is quick to check and each one has broken a real launch somewhere.

• html element carries lang="ar" and dir="rtl" on every Arabic page.
• Navigation, breadcrumbs, arrows and carousels mirror; logos, media controls and numbers do not.
• Arabic font loads quickly, has no letter-spacing, and uses the agreed digit style.
• Phone numbers, emails, SKUs and brand names display in the correct order inside Arabic text.
• Forms accept Arabic input, show Arabic errors, and normalise digits before saving.
• Confirmation emails and PDFs render correctly in Arabic.
• Each page links its partner with hreflang, including x-default, in both directions.
• Switcher lands on the equivalent page and remembers the choice.
• Arabic titles, descriptions and alt text are present, not copied from English.
• Translator has approved the final Arabic on staging in writing.

Keeping both languages in step after launch

After launch, Arabic website design becomes a maintenance habit: a bilingual site stays healthy when every English change has an Arabic counterpart within a known time, and the CMS makes out-of-date translations visible. Without that, the Arabic version quietly falls behind and starts to look abandoned.

The two months of free maintenance after launch cover fixes in either direction, plugin and framework updates, and help when an editor's Arabic page does not look right. After that, maintenance starts from US$120/mo. We also suggest a quarterly check where your translator skims the Arabic site for outdated offers, and we review Search Console for Arabic queries that deserve their own page. If a bigger change is coming, such as adding a store or a booking flow, we scope the Arabic side at the same time so it never becomes an afterthought.