Arabic-First vs. Arabic-Later: Designing Bilingual Websites Properly

There are two ways agencies commonly build Arabic-English websites.

The first:

Design the entire website in English, finish development, and translate everything into Arabic at the end.

The second:

Design a system that understands from day one that it will work in both left-to-right and right-to-left environments.

The difference is much bigger than translation.

And users can usually feel it immediately.

Arabic interfaces use a right-to-left reading direction.

At document level, the correct direction should be expressed semantically. For example:

“<html lang="ar" dir="rtl">”

The dir attribute controls base direction, while the language attribute alone does not automatically establish the correct direction. Web standards guidance recommends defining direction semantically rather than relying only on visual CSS tricks.

But correct Arabic UX goes much further than one attribute.

Navigation changes.

Spacing changes.

Alignment changes.

Arrows and directional icons may change.

Forms change.

Cards change.

Sliders change.

Animations may change.

Even the way a user visually scans a page changes.

It does not mean that every GCC website must literally be designed in Arabic before English.

It means Arabic is treated as part of the design system from the beginning instead of being added after the website is finished.

When we design a bilingual component, we should already know how it behaves in both directions.

For example:

English:

Icon → Heading → Description

Arabic may require the visual relationship to reverse naturally.

Layouts should therefore be built using direction-aware techniques rather than dozens of manual overrides.

Modern CSS logical properties such as:

margin-inline-start margin-inline-end padding-inline-start padding-inline-end

are much more maintainable for multilingual interfaces than hard-coding everything around “left” and “right.”

One of the easiest ways to identify a poorly localized website is typography.

An English font may look elegant at 16 pixels with a tight line height.

Use equivalent values on an Arabic font and the result can suddenly feel crowded or difficult to read.

Arabic typography may need different:

• Font sizes
• Font weights
• Line heights
• Letter spacing
• Heading proportions
• Button dimensions

The Arabic font should also match the personality of the brand.

A financial platform, luxury brand, construction company and children's product should not automatically use the same Arabic typeface.

Typography is part of the identity.

Imagine an English CTA:

““Let's build something great.””

A literal Arabic translation might be grammatically correct while still sounding unnatural in a business context.

Good localization asks:

• Who is reading this?
• Which GCC market are we targeting?
• Should the tone be formal or conversational?
• Does this expression sound natural in Arabic?
• Should the English version and Arabic version use exactly the same length?

Often, they should not.

The goal is not to make both versions linguistically identical.

The goal is to make both versions feel native.

RTL does not mean taking a screenshot of the English website and horizontally flipping it.

Some elements should reverse.

Some should not.

Logos usually stay unchanged.

Media controls may keep internationally recognized behavior.

Numbers, telephone numbers, email addresses and mixed-language strings require special care.

User-generated content may even contain Arabic and English within the same element.

Browsers support bidirectional text handling, including mechanisms such as dir="auto" and bidirectional isolation for situations where direction is not known in advance.

Forms should receive particular attention.

Check:

• Input alignment
• Phone numbers
• Country codes
• Email addresses
• Password fields
• Currency
• Date fields
• Validation messages
• Dropdown icons
• Checkbox alignment
• Error messages

A page can look beautiful until the customer tries to complete the enquiry form.

That is why RTL testing cannot stop at screenshots.

You need to use the interface.

A multilingual website should not simply swap content on the same invisible URL.

Google recommends separate URLs for different language versions and supports hreflang annotations to connect localized versions of the same page.

For example:

example.com/en/services example.com/ar/services

This creates cleaner indexing, sharing, analytics and localization.

Each Arabic page should also have its own:

• Page title
• Meta description
• Headings
• Arabic search terms
• Internal links
• Alt text where appropriate
• Localized content

Do not assume that the keyword with the highest English search volume has a direct Arabic equivalent with the same search intent.

Building English first and “fixing RTL later”

This usually creates hundreds of small CSS exceptions.

Using machine translation without review

Correct grammar does not automatically equal natural language.

Choosing Arabic fonts at the end

Typography can change the dimensions of almost every component.

Translating navigation but not content

Google recommends making each language version clearly and substantially written in that language rather than translating only common interface elements.

Redirecting users aggressively based on language

Give users an obvious language switcher and let them choose. Google similarly cautions against forced language redirects that can make localized versions harder for users and crawlers to access.

The best multilingual websites do not feel like:

English website + Arabic patch.

They feel like one brand expressed naturally in two languages.

Your component library, spacing system, typography, navigation and development architecture should anticipate both directions.

That reduces bugs.

It reduces maintenance.

And most importantly, it creates a much more credible experience for Arabic-speaking customers.

Final Thought

If Arabic represents a meaningful part of your market, it should be a meaningful part of your design process.

Do not translate the website at the end.

Design the system for both languages from the beginning.