Bilingual experience
What Makes a Good Arabic & English Website?
A bilingual website needs two complete experiences. Translating the main heading while leaving navigation, forms and confirmation messages in another language creates friction at the moment a visitor needs clarity.
Start with an inventory of content
List the pages, menus, buttons, forms, errors, emails and downloadable materials that need translation. Product names and technical terms may need consistent terminology rather than literal translation. Review the words that actually appear after a user clicks or submits; these are easy to miss in a visual mockup.
Design for Arabic reading
RTL affects alignment, order and directional icons, while emails, phone numbers and some brand names still read left to right. Arabic headings can wrap differently from English. Test those mixed-content cases at narrow widths and choose a font with comfortable Arabic spacing instead of squeezing translated text into an unchanged layout.
Give both versions stable addresses
Each version should have a URL that someone can bookmark and share. Language annotations help search engines identify the corresponding versions. Titles, descriptions and page content need to agree with the URL’s language. On this website, English uses the main paths and Arabic uses the /ar paths.
Switch language without losing the destination
The language control should lead to the corresponding page, not always send someone back to the homepage. Check service pages and project details as well as the main navigation. If a translation does not exist, the experience should make the fallback explicit rather than presenting mixed content as a complete translation.
Review with real tasks
Ask someone to find a service, understand a project and send an enquiry in each language. This checks comprehension as well as layout. Mountna in our portfolio is an Arabic-first example: its shopping experience was considered from that audience’s starting point.
Your takeaway checklist
- Translated menus, forms and statuses
- RTL and mixed-direction review
- Separate URLs and matching metadata
- Language switch on the same page
- Mobile task review in both languages